Question

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

网格代码

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，green使用Delete，blue使用// 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> });。

你在这里修改了JSFiddle：http://jsfiddle.net/OnaBai/298nZ/

编辑：如果你想分割/格式化每个单词，那么你需要一点编程。基本上你可以这样做。

<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");

你的网格定义：

{{1}}

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

Kendo网格更改样式单元格数据

1 个答案: