在列中显示模型的多值属性

Question

我只是在用Kendo UI开玩笑，我找不到一种方法来显示列中的多值属性，相对于前一列中的值。这是我想要的视图的代表性模型：

第2列和第3列中的值分别属于值1,2和3。我有一个模型，它是list，包含第2列和第3列的另一个列表。这是我到目前为止所拥有的：

@model List<Customer>
<div class="left" style="margin-top: 30px; margin-left: 0px;">
    <div style="margin-bottom: 5px;">
        <span style="font-weight: bold">Customer Data</span></div>
    @(Html.Kendo().Grid<Customer>()
   .Name("gvCustomerData")
   .Columns(columns =>
       {
           columns.Bound(Model => Model.CustomerName);
       })
       .Pageable()
       .Sortable()
       .Scrollable()
       .Filterable()
       .DataSource(dataSource => dataSource
           .Ajax().Model(model => model.Id(Model => Model.CustomerId))
                           .Read(read => read.Action("GetCustomerData", "Customer", new { DeptId= @ViewBag.DeptId})))
    )
</div>

在这种情况下，值可以是他正在处理的客户电话号码或项目。我不想手动迭代模型列表并构建原始HTML。 Kendo可以帮助简化流程吗？

Answer 1

虽然Kendo UI确实支持合并的列标题，但它似乎并不支持您的要求。

然而，我找到了this段代码，也许它可以帮到你：

function mergeGridRows(gridId, colTitle) {
    $('#' + gridId + '>.k-grid-content>table').each(function (index, item) { 
        var dimension_col = 1;
        // First, scan first row of headers for the "Dimensions" column.
        $('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {
            if ($(this).text() == colTitle) { 
                // first_instance holds the first instance of identical td
                var first_instance = null;     
                $(item).find('tr').each(function () {     
                    // find the td of the correct column (determined by the colTitle)
                    var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')');

                    if (first_instance == null) {
                        first_instance = dimension_td;
                    } else if (dimension_td.text() == first_instance.text()) {
                        // if current td is identical to the previous
                        // then remove the current td
                        dimension_td.remove();
                        // increment the rowspan attribute of the first instance
                        first_instance.attr('rowspan', typeof first_instance.attr('rowspan') == "undefined" ? 2 : first_instance.attr('rowspan') + 1);
                    } else {
                        // this cell is different from the last
                        first_instance = dimension_td;
                    }
                });
                return;
            }
            dimension_col++;
        }); 
    });
}