Question

是否可以通过某种条件更改Kendo网格的字体颜色？我希望我得到的数据可以被jquery识别为：

if($("div td:contains('Online')")) {
         $("div :contains('Online')").css( "font-color", "Red" );
}

我有数据进入数据库以显示谁在线/离线，但这两个词有点相似，所以我希望我可以将文本'在线'更改为红色。我可以成功地显示数据，但是我没有任何其他标记（id或名称等）来使每个数据不同....

我必须做的唯一方法是让每一行都有id或标签吗？我可以使用.contains来查找对象并更改颜色吗？

我的HTML只是简单地说：

<body>
<div id="grid"></div>
<script>
    $(function() {
        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    read: "data/userState.php"
                },
                error: function(e) {
                    alert(e.responseText);
                },
                schema: {
                    data: "results",
                    total: "Count"
                },
                pageSize: 10
            },
            columns: [{ field: "userAcc", title: "Account" },{ field: "state", title: "State" }],
            pageable: {
                refresh: true,
                pageSizes: true
            },
            height: 430,
            resizable: true
        });
        if($("#grid td:contains('Online')")) {
            $("#grid td:contains('Online')").css( "font-color", "Red" );
        }
    });

</script>
</div>
</body>

Answer 1

删除if语句并使用column template代替。您可以将值包装在范围内，并有条件地将其类设置为根据您的条件显示红色文本。

以下是一个例子：

$("#grid").kendoGrid({
    // ...
    columns: [
        { field: "userAcc", title: "Account" },
        {
            field: "state",
            title: "State",
            template: "<span class='#if(state === \'Online\') {# red #}#'></span>"
        }
    ]
    // ...
});

..和你的CSS课......

.red {
    color: red;
}

Answer 2

抱歉，我找到了自己的答案。也就是说，我需要使用模板（我不熟悉它）。只需使用模板：

<div id="grid"></div>
<script>
    $(function() {
        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    read: "data/userState.php"
                },
                error: function(e) {
                    alert(e.responseText);
                },
                schema: {
                    data: "results",
                    total: "Count"
                },
                pageSize: 10
            },
            columns: [{ field: "userAcc", title: "Account" },{ field: "state", title: "State", template: '#=SetColor(state)#' }],
            pageable: {
                refresh: true,
                pageSizes: true
            },
            height: 430,
            resizable: true
        });
    });
    function SetColor(state)
        {
            if(state=="Online")
                return "<font color=\"red\">"+state+"</font>";
            else
                return state;
        }
</script>
</div>

将模板用于您想要更改的字段，并返回要装饰的文本，并且我保证人们想要与分数不同，或者少于60的数据也可以使用该方法！

Answer 3

版本2014.1.528的其他信息

简单。

您需要做的就是将样式属性添加到相应的类

对于网格，添加样式：

.k-grid .text-box {
    color: black !important;
}

Answer 4

只需使用简单的样式。

用于数据网格中的文本

.k-grid table {
    font-weight: bold !important;
}

用于标题文字

.k-filter-row th, .k-grid-header th.k-header{
    font-weight: bold !important;
}

Kendo在网格中更改字体颜色

4 个答案: