Question

我遇到了剑道网格和自定义模板的问题。问题是，我需要检查列的值

如果值== 1，我需要将其更改为图标检查
如果值== 0，我需要将其更改为图标删除
如果值== -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});
}

Answer 1

这是 Working Demo

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

CDN for font awesome。

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 Grid - 动态列和自定义模板

1 个答案: