0

在我的应用程序中，我有一个视图，谁的任务是显示与该项目相关的项目和价格。

以下是我的视图呈现表格结果的方式：

@if (Model.Count > 0)
{
    <table>
        <tr>
            <th>
                @Html.ActionLink("Object Name", "BrowseObjectList", new { _sortOrder = ViewBag.CardNameSortParm })
            </th>
            <th>
                Object Image
            </th>
            <th>
                @Html.ActionLink("Object Provider Name", "BrowseObjectList", new { _sortOrder = ViewBag.ObjectProviderNameSortParm })
            </th>
            <th>
                @Html.ActionLink("Highest Price", "BrowseObjectList", new { _sortOrder = ViewBag.HighestPriceSortParm })
            </th>
            <th>
                @Html.ActionLink("Price Date", "BrowseObjectList", new { _sortOrder = ViewBag.PriceDateSortParm })
            </th>
        </tr>

        @for (int i = 0; i < Model.Count; i++)
        {
            var className = i%2 == 0 ? "even" : "odd";
            <tr class="@className">
                <th rowspan="5">
                    @Html.ActionLink(Model[i].m_Obj.m_ObjName, "ObjectPriceLists", new { id = Model[i].m_Obj.m_ID}, new {@class = "NavLink" })
                </th>
                <th rowspan="5">
                    @Html.Image(Model[i].m_Obj.m_ObjImageLink, Model[i].m_Obj.m_ObjName, null)
                </th>
                @for (int j = 0; j < Model[i].m_ItemPriceLists.Count; j++)
                {
                    <tr class="@className">
                        <td style="height: 100%">@Html.DisplayFor(item => item[i].m_ItemPriceLists[j].m_Provider.m_ProviderName)</td>
                        <td style="height: 100%">@Html.DisplayFor(item => item[i].m_ItemPriceLists[j].m_PriceHigh)</td>
                        <td style="height: 100%">@Html.DisplayFor(item => item[i].m_ItemPriceLists[j].m_PriceListDate)</td>
                    </tr>
                }
            </tr>
        }
    </table>
}

现在，它呈现“Ok”，因为视图形状达到了我想要的效果，如下所示：

Object Name Object Image    Provider    Highest Price   Price Date
                            Prov 1                 1    2013-05-03
                            Prov 2                 2    2013-05-03
Object 1    Image           Prov 3                 3    2013-05-03
                            Prov 4                 4    2013-05-03

现在这是通缉的结果。“对象名称”列是单列，就像在 excel 页面中一样，图像也是单列。每个“供应商/最高价格/价格日期”都是与对象名称和图像位于同一行的单行。但是我所拥有的是这样的东西：

Object Name Object Image    Provider    Highest Price   Price Date
                            Prov 1            1         2013-05-03
                            Prov 2            2         2013-05-03
                            Prov 3            3         2013-05-03


Object 1    Image           Prov 4            4         2013-05-03

您需要在这里看到的是第 4 条提供程序行的高度调整以匹配图像和对象的比例。“对象 1”列和“图像”取图像的高度，但高度在每四个提供者之间不均分。只有第 4 次调整大小以填充剩余空间。

现在我知道我的 html 布局可能很糟糕，因为我从 html 格式开始，我想知道如何正确地塑造它，以便每行的大小均匀。

编辑

我的情况很难描述，但这里有一个我想要什么和我得到什么的 excel 演示：

使用excel的问题示例

4

2 回答 2

1

这可能需要您进行一些调整，但我想像这样的东西应该这样做：

    @for (int i = 0; i < Model.Count; i++)
    {
        var className = i%2 == 0 ? "even" : "odd";
        @for (int j = 0; j < Model[i].m_ItemPriceLists.Count; j++)
        {
            <tr class="@className" style="height:38px;">
            @if(j == 0) {
                <td rowspan="4">
                    @Html.ActionLink(Model[i].m_Obj.m_ObjName, "ObjectPriceLists", new { id = Model[i].m_Obj.m_ID}, new {@class = "NavLink" })
                </td>
                <td rowspan="4">
                    @Html.Image(Model[i].m_Obj.m_ObjImageLink, Model[i].m_Obj.m_ObjName, null)
                </td>
            } else {
                <td></td>
            }
                <td> @Html.DisplayFor(item => item[i].m_ItemPriceLists[j].m_Provider.m_ProviderName)</td>
                <td> @Html.DisplayFor(item => item[i].m_ItemPriceLists[j].m_PriceHigh)</td>
                <td> @Html.DisplayFor(item => item[i].m_ItemPriceLists[j].m_PriceListDate)</td>
            </tr>
        }
    }

用固定的像素高度对行进行样式化，即图像高度/行跨度 .. http://jsfiddle.net/vUKfX/2/

于 2013-05-03T13:23:07.140 回答
1

我假设这个问题的原因是因为您的 Image 比四个数据行组合的高度长，并且您希望这些行平等地缩放。

你有几个选择。您可以简单地将 Image 单元格的 rowspan="5" 更改为 rowspan="6"，这将允许它在不缩放底部数据行的情况下删除一行。但这可能很难看。

这是一个更好看的解决方案，得到你想要的，但它是丑陋的代码（为可视化添加了边框）：

 <!DOCTYPE html>
 <html>
 <body>
  <table border="1">
   <tr>
    <th>Object Name
    </th>
    <th>Object Image
    </th>
    <th>Object Provider Name
    </th>
    <th>Highest Price
    </th>
    <th>Price Date
    </th>
   </tr>
   <tr>
    <td>
     <table border="1">
      <tr>
       <td>Object 1
       </td>

       <td>Object 1 Image<br />
        Object 1 Image<br />
        Object 1 Image<br />
        Object 1 Image<br />
        Object 1 Image<br />
        Object 1 Image<br />
        Object 1 Image<br />
        Object 1 Image<br />
       </td>
      </tr>
     </table>
    </td>
    <td colspan="4">
     <table border="1" width="100%">
      <tr>
       <td>asdf</td>
       <td>qwer</td>
       <td>qwer</td>
      </tr>
      <tr>
       <td>asdf</td>
       <td>qwer</td>
       <td>qwer</td>
      </tr>
      <tr>
       <td>asdf</td>
       <td>qwer</td>
       <td>qwer</td>
      </tr>
      <tr>

       <td>asdf</td>
       <td>qwer</td>
       <td>qwer</td>
      </tr>
     </table>

    </td>
   </tr>
 </body>
 </html>

但可能最好的解决方案是调整你的图像高度......

希望有帮助！

于 2013-05-03T13:40:01.887 回答