剑道网格改变样式单元格数据

Question

我有一个非常基本的剑道网格。我使用模板功能来设置单元格数据的样式。我想要做的是样式“编辑”红色和“删除”绿色。

电网规范

grid = $("#grid").kendoGrid({ 
     dataSource: { 
      data: createRandomUserData(), 
      schema: { 
       model: { 
        id: 'Id', 
        fields: { 
         FirstName: { 
          type: "string" 
         }, 
         Action: { 
          type: "string" 
         } 
        } 
       } 
      } 
     }, 
     columns: [ 
      { 
       field: "FirstName", 
       title: "First Name" 
      }, 
      { 
       field: "Action", 
       title: "Action", 
       template: "<span style='color:red'>#: Action #</span>" 
      } 
     ] 
    }).data("kendoGrid"); 

我怎样才能做到这一点。我无法分隔单元格数据。

的jsfiddle - http://jsfiddle.net/Sbb5Z/1338/

Answer 1

而不直接应用的颜色是什么，我建议你做的是定义几个CSS类，做造型。

例子：

.Edit { 
    color: red; 
} 

.Delete { 
    color: green; 
} 

.Edit.Delete { 
    color: blue; 
} 

而且在使用哪个class模板指定。

template: "<span class='#: Action #'>#: Action #</span>" 

它使用red当他们Edit，​​如果Delete和blue如果两者。

你的jsfiddle此处修改：http://jsfiddle.net/OnaBai/298nZ/

编辑：如果要拆分每字/格式，那么你就需要一点点编程。基本上你可能会这样做。

// Convert words separated by spaces into an array 
var words = data.Action.split(" "); 
// Iterate on array elements for emitting the HTML 
$.each(words, function(idx, word) { 
    // emit HTML using template syntax 
    <span class="#: word #">#: word #</span> 
}); 

所有这一切都需要被包裹在一个模板，你会得到：

<script type="text/kendo-script" id="template"> 
    # console.log("data", data, data.Action); # 
    # var words = data.Action.split(" "); # 
    # $.each(words, function(idx, word) { # 
     <span class='#= word #'>#= word #</span>&nbsp; 
    # }); # 
</script> 

而网格的定义：

grid = $("#grid").kendoGrid({ 
    dataSource: { 
     data: createRandomUserData(), 
     schema: { 
      model: { 
       id: 'Id', 
       fields: { 
        FirstName: { 
         type: "string" 
        }, 
        Action: { 
         type: "string" 
        } 
       } 
      } 
     } 
    }, 
    columns: [ 
     { 
      field: "FirstName", 
      title: "First Name" 
     }, 
     { 
      field: "Action", 
      title: "Action", 
      template: $("#template").html() 
     } 
    ] 
}).data("kendoGrid"); 

的的jsfiddle修改这里：http://jsfiddle.net/298nZ/1/