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

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>

在这种情况下，值可以是客户 phone 数量或他正在处理的项目。我不想手动遍历模型列表并针对它构建原始 HTML。 Kendo 可以帮助简化流程吗？

Answer 1

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

不过，我找到了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++;
        }); 
    });
}