Kendo 具有值的列的网格列模板

Question

我的 kendo 网格有特殊列，其值："Unpaid"、"Paid"。从后端到达 0 - 表示 "Unpaid"，1 - 表示 "Paid".

本专栏我的配置：

{
columnMenu: true
encoded: true
field: "Invoice__state"
filterable: {cell: {…}}
resizable: true
sortable: true
title: "State"
type: "string"
values: Array(2)
0: {value: 1, text: "Paid"}
1: {value: 0, text: "Unpaid"}
}

一切都很好（图 1）。

现在我需要为列做一些标记 - 红色代表未付费，绿色代表付费。我想为列使用模板。我只是添加了简单的模板

template: "<span class="label label-danger">#: Invoice__state #</span>"

但现在我看到 0 或 1 个未付款或已付款（图 2）。

如何修改模板以显示标签而不是值？

pic1

pic2

Answer 1

您可以借助条件属性来完成。

此处代码供您参考。

CSS 块：

  <style>
.red{
    color:red;
}

.green {
    color:green;
}
</style>

Javascript 块：

<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category", values: [
{ text: "Beverages", value: 1 },
{ text: "Food", value: 2 }
],attributes: {
            class: "#=category ==1 ? 'red' : 'green' # #console.log(data)#"
          } }
],
dataSource: [
{ productName: "Tea", category: 1 },
{ productName: "Ham", category: 2 }
]
});
</script>

Kendo 具有值的列的网格列模板

Kendo grid column template for column with values

kendo-ui

kendo-grid

kendo-template