在列中显示来自模型的多值属性答案

【问题标题】：Displaying multivalued attributes from model in columns在列中显示来自模型的多值属性
【发布时间】：2015-05-11 19:29:28
【问题描述】：

我刚刚开始使用 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 可以帮助简化流程吗？

【问题讨论】：

您将不得不依靠模板来实现这一点，也可能对第 1 列进行分组，具体取决于您希望网格如何显示和运行
模板在单行中呈现数据，我需要它在不同的行中。在这种情况下定义模式/模型会有所帮助吗？
如果这是您想要的stackoverflow.com/questions/23863581/…，您可以使用带有详细信息模板的嵌套网格。或者使用表格作为模板，如果您需要内联编辑，您可以使用 kendo.bind() 和 data-bind 属性将模板连接到可观察对象

标签： c# .net asp.net-mvc kendo-ui kendo-asp.net-mvc

【解决方案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++;
        }); 
    });
}

【讨论】：