劍道網格改變樣式單元格數據

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/