jquery - Kendo 更改网格中的字体颜色

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

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

最佳答案

去掉 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;
}

关于jquery - Kendo 更改网格中的字体颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20488394/

相关文章:

jQuery UI 对话框叠加 - 如何为不同的对话框设置不同的背景颜色

javascript - jQuery UI 可排序多元素目标

jquery - 在 jquery 中使用固定标题调整表列的大小

javascript - 使用 jquery 淡入/淡出

kendo-ui - 必须以编程方式将网格设置为 editable=false

javascript - Div 在 asp.net PageLoad 上加载并消失

javascript - $ ('#notificationClick' ).click 不起作用

asp.net - 如何将 kendo Ui 下拉列表选定值的 ID 传递到 Controller ?

kendo-ui - 如何找出剑道网格中有多少行?

jquery - 首次单击后取消绑定(bind)元素的单击事件,并在 angularjs 中执行操作后重新绑定(bind)它