[英]Kendo Grid Custom Column
我有以下代碼:
$("#grid").kendoGrid({
dataSource: {
type: "odata",
data: scannedResult.targetList,
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "proccess",
title: "Contact Name",
width: 200
}, {
field: "status",
title: "status"
}, {
field: "comment",
title: "comment"
}]
});
創建一個kendo簡單網格。 這里的細節是我的傻瓜 。
現在,字段status
可以是3個值中的1個:已通過,已失敗,已跳過。 我希望status
列顯示一個圖標而不是值。 雖然代碼相當簡單,但我不知道如何使列成為自定義列。
有沒有辦法讓列成為自定義列?
您應該使用模板定義。 就像是:
<script id="status-template" type="text/kendo-templ">
# if (data.status === 1) { #
<span>Status1</span>
# } else if (data.status === 2) { #
<span>Status 2</span>
# } else { #
<span>Status 3</span>
# } #
</script>
columns: [{
field: "proccess",
title: "Contact Name",
width: 200
}, {
field: "status",
title: "status",
template: $("#status-template").html()
}, {
field: "comment",
title: "comment"
}]
看到它在這里運行: http : //jsfiddle.net/OnaBai/5x8wt0f7/
顯然,模板可以發出任何HTML代碼,它可能是鏈接,圖像......
這已經得到了解答,但我想展示如果人們在鏈接到jQuery選擇器時感到困惑,我會如何寫這個。
// Custom Template that takes in entire Row object
function statusTemplate(dataRow) {
return `<span class="label label-${dataRow.status.toLowerCase()}">${dataRow.status}</span>`;
}
// Column definitions for grid
columns: [{
field: "proccess",
title: "Contact Name",
width: 200
}, {
field: "status",
title: "status",
template: statusTemplate
}, {
field: "comment",
title: "comment"
}]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.