Kendo Grid - 动态列和自定义模板答案

【问题标题】：Kendo Grid - Dynamic Column and Custom TemplateKendo Grid - 动态列和自定义模板
【发布时间】：2016-10-12 05:56:52
【问题描述】：

我对剑道网格和自定义模板有疑问。问题是，我需要检查列的值

如果 Value == 1，我需要将其更改为 Icon Check
如果 Value == 0，我需要将其更改为 Icon Delete
如果值 == -1。我需要返回空的html

这是示例代码：Fiddle

var myFields = {
        no: { },
        section: { },
        service: { }
    };
for(var x = 0 ; x < dataList.length; x++){
    myFields["data"+x] = { };
}

    var no = 0;
var myColumns = [
                 { title: "No", locked: true, width: 50, template: function(e){return ++no; } },
                 { field: "section", title: "Hole Section", locked: true, width: 130 },
                 { field: "service", title: "Services", locked: true, width: 200 }
                 /* other columns ... */
             ];
for(var x = 0 ; x < dataList.length; x++){
    myColumns.push( { field: "data"+x, title: dataList[x], width: 100, locked: false});
}

【问题讨论】：

标签： javascript kendo-grid dynamic-columns kendo-template

【解决方案1】：

这是一个Working Demo

解决方案：您可以通过用图标替换数字来更改输入到网格中的数据。我更喜欢使用 FontAwesome Icons，因为它很轻。

字体真棒CDN。

https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css

用于更改数据的代码更改如下。

tableData[tableData.length - 1]["data"+c] = formatCellData(dataOffset[c].selected); 
// replace you code with function call.

函数定义如下。

function formatCellData(value){
  switch(value){
  case 1:  return "<i class='fa fa-check''></i>";break;
  case 0:  return "<i class='fa fa-trash''></i>";break;
  case -1: return "";break;
  default: return "";
  }
}

现在这将确保您获得的是 HTML 部分而不是数字，

现在我们需要确保将 HTML 字符串作为常规 HTML 读取并显示图标，而不是按原样显示 HTML 字符串，因此将此 encoded: false 属性添加到您的列数据中。

for(var x = 0 ; x < dataList.length; x++){
 myColumns.push( { field: "data"+x, title: dataList[x], width: 100, locked: false,encoded: false});
}

希望这会有所帮助。

【讨论】：

@DavidVincent 很高兴为您提供帮助 :)