如何为 Kendo Tree View 节点添加自定义 CSS？答案

【问题标题】：how to add Custom CSS for Kendo Tree View nodes?如何为 Kendo Tree View 节点添加自定义 CSS？
【发布时间】：2017-07-20 16:43:52
【问题描述】：

我将剑道树视图与我自己的数据源一起使用。从那里我想为某些节点添加自定义 css 类。

假设我想在动态加载的 Kendo UI TreeView 中为某些树节点添加红色背景。我该怎么做？

My expectation sample image is given below

【问题讨论】：

分享你尝试过的代码

标签： jquery css kendo-ui treeview kendo-treeview

【解决方案1】：

为了将 CSS 类动态应用到剑道树视图节点，我找到了使用 jquery 的解决方案。在数据源内部我们可以定义Node的level，根据level我们可以在Kendo tree view数据绑定事件中添加CSS类。

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/treeview/dragdrop">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.flat.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.flat.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
        <div id="example">
            <div class="demo-section k-content">
                <h4>Treeview One</h4>
                <div id="treeview-left"></div>
                <h4 style="padding-top: 2em;">Treeview Two</h4>
                <div id="treeview-right"></div>
            </div>

            <script>
                

                $("#treeview-right").kendoTreeView({
                    dragAndDrop: true,
                    dataSource: [
                        { text: "Storage", Level: "first", expanded: true, items: [
                            { text: "Wall Shelving",Level: "second",items:[{text:"hi",Level: "third",}] },
                            { text: "Floor Shelving",Level: "second" },
                            { text: "Kids Storage",Level: "second" }
                        ]
                        },
                        { text: "Lights",Level: "first", items: [
                            { text: "Ceiling",Level: "second" },
                            { text: "Table",Level: "second" },
                            { text: "Floor",Level: "second" }
                        ]
                        },{ text: "fight",Level: "first", items: [
                            { text: "Ceiling",Level: "second" },
                            { text: "Table",Level: "second" },
                            { text: "Floor",Level: "second" }
                        ]
                        }
                    ],
                   dataBound:function(e){
                    
                     var treeview = $("#treeview-right").data("kendoTreeView");
                     $('#treeview-right ul li').each(function(i)
                      {
                       debugger;
                       	var dataItem = treeview.dataItem(this);
                       if(dataItem.Level == "first"){
                         $(this).addClass("first");
                       }
                       if(dataItem.Level == "second"){
                         $(this).addClass("second");
                       }
                       if(dataItem.Level == "third"){
                         $(this).addClass("third");
                       }

                      });
                     

                   }
                 
                });
            </script>

            <style>
                #treeview-left,
                #treeview-right
                {
                    overflow: visible;
                }
              .first{ color:red }
              .second{ color:green }
              .third{ color:blue }
            </style>
        </div>


</body>
</html>

【讨论】：

【解决方案2】：

今天我使用剑道模板为自己解决了这个问题。下面的代码 sn-p 很简单，但是如果你想在你的渲染中包含 JavaScript 逻辑，那么请看 Telerik 的演示：https://demos.telerik.com/kendo-ui/treeview/templates。

我的 JavaScript 数据如下所示：

[
    { title: 'Label', extraClasses: 'st-assembly' }
]

我按如下方式初始化树视图：

 $('#structure-tree').kendoTreeView({
    dataSource: PrimaryStructure,
    dataTextField: 'title',
    template: '<span class="#: item.extraClasses #">#: item.title #</span>',
    select: onKendoTreeViewSelect,
    dragAndDrop: true,
 });

在模板之前，treeview 元素呈现为：

<span class="k-in">Label</span>

现在元素呈现为：

<span class="k-in"><span class="st-assembly">Label</span></span>

希望这会有所帮助。

【讨论】：