[英]Kendo grid change style cell data
我有一個非常基本的劍道網格。 我正在使用模板功能來設置單元數據的樣式。 我想要做的是紅色樣式“編輯”和綠色樣式“刪除”。
網格代碼
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/
我沒有直接應用我建議你做的顏色,而是定義幾個做樣式的CSS類。
例:
.Edit {
color: red;
}
.Delete {
color: green;
}
.Edit.Delete {
color: blue;
}
並在模板中指定要使用的class
。
template: "<span class='#: Action #'>#: Action #</span>"
這在Edit
時使用red
,如果是Delete
則使用green
,如果兩者都使用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>
# }); #
</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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.