剑道更改网格中的字体颜色答案

【问题标题】：Kendo change font-color in grid剑道更改网格中的字体颜色
【发布时间】：2013-12-10 07:20:09
【问题描述】：

是否可以通过某些条件更改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>

【问题讨论】：

你能分享正在生成的dom吗

标签： jquery jquery-ui kendo-ui kendo-grid

【解决方案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;
}

【讨论】：

没问题！乐意效劳。 :)

【解决方案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的数据也可以使用该方法！

【讨论】：

从 HTML5 开始不再支持 <font> 标记。改用 CSS 来设置文本颜色的样式。

【解决方案3】：

版本 2014.1.528 的附加信息

简单。

您需要做的就是为相应的类添加一个样式属性

对于网格，添加样式：

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

【讨论】：

【解决方案4】：

只需使用简单的样式。

用于数据网格中的文本

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

用于标题文本

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

【讨论】：