Kendo ui 剑道网格分组与行模板不兼容

当我使用其他“可分组”行模板时，在剑道网格中不起作用 但是以前没有问题，现在如何使用分组在一起的行模板呢

我把我写的代码放在了一篇评论中

jsfiddle:

$（文档）.ready（函数（）{
var ds=新的kendo.data.DataSource({
运输：{
阅读：{
url:“/api/clientssnapshot”，
数据类型：“json”，
键入：“获取”
}
}
});
$（'.table'）.kendoGrid({
数据源：ds，
可排序：是的，
分组：对，
是的，
可导航：是的，
身高：500，
可滚动：对，
行模板：kendo.template（$（“#客户端行模板”）.html（）.replace（'class=“k-alt”'，''），
altRowTemplate:kendo.template（$（“#客户端行模板”）.html（），//@class=“k-alt”@
数据绑定：函数（）{
$（'.spark'）。sparkline（[1,2,3,4,5,6,85,2,1]）；
//$（'.spark'）。每个（函数（即，e）{
//var$this=$（this）；
////console.info（$this.attr（'data-inrate'））；
//var arr=eval（'['+$this.attr（'data-inrate'）+']）；
//console.log（this）；
//$this.sparkline（arr）；
//});
}
});
});
#=Mac#
#=无线电名称#
#=TX#
#=RX#
#=信号#
#=正常运行时间#
搜索：
雨衣
无线电
美联社
远程计算机
名称
德克萨斯州
接收
信号
正常运行时间
用法

对单元格进行分组时，KendoUI会在现有单元格前面插入一个新单元格，但这仅适用于标准模板，而不适用于您的模板

我的建议是切换到每个单元格的模板。基本上，您的列定义将变成：

columns : [
    { field: "Mac", title: "Mac", width: 170 },
    { field: "RadioName", title: "Radio", width: 150 },
    { field: "ApName", title: "Ap", width: 80, template: '<a href="http://#= ApIp #" target="_blank">#=ApName#</a>' },
    { field: "RemoteIp", title: "Remote IP", width: 160, template: '<a href="http://#= RemoteIp #" target="_blank">#=RemoteIp#</a>' },
    { field: "AccountingName", title: "Name", width: 130, template: '<a href="#= AccountingId #" target="_blank"> #= AccountingName # </a>' },
    { field: "TX", title: "TX", width: 44  },
    { field: "RX", title: "RX", width: 50 },
    { field: "Signal", title: "Signal", width: 50 },
    { field: "Uptime", title: "Uptime", width: 78},
    { field: "Usage", title: "Usage", template: '<span class="spark" data-inrate="#= InRateHistory #">   </span>'  },
    { command: [ "edit" ], title: "&nbsp;" }
],

列：[
{字段：“Mac”，标题：“Mac”，宽度：170}，
{字段：“RadioName”，标题：“Radio”，宽度：150}，
{字段：“ApName”，标题：“Ap”，宽度：80，模板：''}，
{字段：“远程IP”，标题：“远程IP”，宽度：160，模板：''}，
{字段：“AccountingName”，标题：“Name”，宽度：130，模板：''}，
{字段：“TX”，标题：“TX”，宽度：44}，
{字段：“RX”，标题：“RX”，宽度：50}，
{字段：“信号”，标题：“信号”，宽度：50}，
{字段：“正常运行时间”，标题：“正常运行时间”，宽度：78}，
{字段：“用法”，标题：“用法”，模板：''}，
{命令：[“编辑”]，标题：}
],

此外，您只需将网格HTML占位符定义为：

<div class="table"></div>

---

您的JSFIDLE已在此处修改：

您可以在自己的模板中使用此线程中发布的技巧完成此操作：

其中包含此JSFIDLE：

这是那把小提琴的密码

加价

<table id="grid" style="width: 100%;">
</table>

<script id="rowTemplate" type="text">             
     <tr>         
         #= new Array(this.group().length + 1).join('<td class="k-group-cell"></td>') #
         <td>${Id}</td>
         <td>${StatusText}</td>
         <td>${CommissionTypeText}</td>
     </tr>
</script>

---

基本上，您要传入数据源，在数据源上调用group（），并在适用时注入组单元格。

这一次并不是那么容易。分组时（对于每个新组），模板应额外添加一个单元格。是否可以使用每个单元格的模板来代替行的模板，从而避免此问题？

<table id="grid" style="width: 100%;">
</table>

<script id="rowTemplate" type="text">             
     <tr>         
         #= new Array(this.group().length + 1).join('<td class="k-group-cell"></td>') #
         <td>${Id}</td>
         <td>${StatusText}</td>
         <td>${CommissionTypeText}</td>
     </tr>
</script>

var localData = [
    {Id: 1, StatusText: "Status 1", CommissionTypeText: "Commission 1"},
    {Id: 2, StatusText: "Status 2", CommissionTypeText: "Commission 2"},
    {Id: 3, StatusText: "Status 3", CommissionTypeText: "Commission 3"}
];

var dataSource = new kendo.data.DataSource( {
     data: localData,
     schema: {
         model: {
             fields: {
                 Id: { type: "number" },
                 StatusText: { type: "string" },
                 CommissionTypeText: { type: "string" }
             }
         }
     }
});

$("#grid").kendoGrid({
     dataSource: dataSource,
     rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
     scrollable: true,
     height: 500,
     sortable: true,
     filterable: true,
     groupable: true,
     pageable: true,
     columns: [
         {
             field: "Id",
             title: "Id",
             filterable: false
         },
         {
             field: "StatusText",
             title: "StatusText"
         },
         {
             field: "CommissionTypeText",
             title: "CommissionTypeText"
         }
     ]
});