kendoui grid中渲染单元格

最新推荐文章于 2025-06-10 09:34:02 发布

_lyrieek

最新推荐文章于 2025-06-10 09:34:02 发布

阅读量3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端-kendo 前端文章标签： javascript dom jquery kendo

本文链接：https://blog.youkuaiyun.com/TimCur_F4/article/details/73558368

前端同时被 2 个专栏收录

2 篇文章

订阅专栏

前端-kendo

1 篇文章

订阅专栏

本文介绍如何在Kendo UI Grid中进行单元格的渲染操作，通过JavaScript和jQuery来定制Grid的显示效果，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常，grid这样显示出来

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    columns: [
        { field: "name" },
        { field: "remark" }
    ],
    dataSource: //数据源
});
</script>

如果要渲染某个field，比喻name，希望它变成粗体字，那么可以这样

$("#grid").kendoGrid({
    columns: [
        { field: "name",template : "<div style='font-weight:bold'>#: name #</div>" },

        { field: "remark"}
    ],
    dataSource: //数据源
});

template很方便修改简单的样式，但如果你想修改所有的样式呢？dataBinding事件可以帮到你

$("#grid").kendoGrid({
    columns: [
        { field: "name",template : "<div style='font-weight:bold'>#: name #</div>" },
        { field: "remark"}
    ],
    dataBinding : function(e) {
      var items = e.items;
      for (var i = 0; i < items.length; i++) {
        console.log(items[i]);
      }
    },
    dataSource: //数据源
});

但如果你在item加上HTML就会发现，grid会把你的HTML标签都展示出来，如果你的remark本身就是HTML格式存储的，grid也会把它的HTML转义显示他的标签，而不是样式，那么怎么办呢？

$("#grid").kendoGrid({
    columns: [
        { field: "name",

        { field: "remark",template : function(dataItem) { return dataItem.remark; }],
    dataSource: //数据源
});





对，template也支持函数处理，可以很好的批量渲染单元格