Question

我第一次使用Kendo并尝试将HTML表转换为Kendo网格。在初始化时，我希望表按特定列分组，而不能由任何其他列分组。下面是一个汽车表格的设计示例，该表格按照汽车的制作进行分组，演示了我在初始化时如何尝试按特定列进行分组。

此尝试不会导致对表进行分组。我知道kendoGrid调用正在工作，因为如果我将groupable设置为true，我可以通过拖放分组任何列，但仍然不会发生初始分组。我怀疑不知何故，团队领域＆＃34; make＆＃34;并没有被我的make专栏所束缚，但我见过的例子似乎表明这可以像我一样使用数据字段完成。

<table id="carsGrid">
    <thead>
        <tr>
            <th>Year</th>
            <th>Color</th>
            <th data-field="make">Make</th>
         </tr>
    </thead>
    <tbody>
        <tr>
            <td>2010</td>
            <td>Red</td>
            <td>Dodge</td>
        </tr>
        <tr>
            <td>2014</td>
            <td>Blue</td>
            <td>Ford</td>
        </tr>
        <tr>
            <td>2016</td>
            <td>Black</td>
            <td>Dodge</td>
        </tr>   
    </tbody>
</table>

在文档的准备功能中：

$('#carsGrid').kendoGrid({
    datasource: { group: { field: "make" } },
    groupable: false //I do not want grouping on other columns
});

Answer 1

我为您的问题找到了一些解决方案：请查看此示例http://dojo.telerik.com/OhEta

您应在data-groupable="false"元素中添加<th>属性：

 <thead>
     <tr>
        <th data-field="year" data-groupable="false">Year</th>
        <th data-field="color" data-groupable="false">Color</th>
        <th data-field="make">Make</th>
     </tr>
 </thead>

Answer 2

您可以在javascript中设置列及其值，而不是使用html <table>。

首先，您可以将整个<table></table>部分替换为：

<div id="grid"></div>。

然后在文档的ready函数中，您可以将每列的值抛出到数组中：

var productsArray = [{Year: 2010, Color: "Red", Make: "Dodge"},
                     {Year: 2014, Color: "Blue", Make: "Ford"},
                     {Year: 2016, Color: "Black", Make: "Dodge"}]

并使用以下内容更新您设置kendo网格的位置：

$("#grid").kendoGrid({
    dataSource: {
      data: productsArray,        
      group: {field: "Make"}
    },
    columns: [
      { field: "Year" },
      { field: "Color" },
      { field: "Make" }
    ]
});

Click Here了解您可以使用的实例。

Kendo网格行分组不起作用

2 个答案: