Kendo 网格 - 动态列和自定义模板

Question

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

如果 Value == 1，我需要将其更改为 Icon Check
如果Value == 0，我需要将其更改为Icon Delete
如果值 == -1。我需要 return 清空 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});
}

Answer 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});
}

希望对您有所帮助。

Kendo 网格 - 动态列和自定义模板

Kendo Grid - Dynamic Column and Custom Template

javascript

dynamic-columns

kendo-grid

kendo-template