如何从远程 json 数据中以编程方式更改选定节点颜色以用于 kendo ui 中的树视图？答案

【问题标题】：How to change the selected node color programmatically from remote json data for treeview in kendo ui?如何从远程 json 数据中以编程方式更改选定节点颜色以用于 kendo ui 中的树视图？
【发布时间】：2014-08-08 18:52:02
【问题描述】：

我想根据 json 数据更改 kendo ui 中树视图节点的默认选择和悬停颜色。所以我添加了一个像下面这样的模板，它不起作用，有什么帮助吗？

template: "<span style='color:#= item.color#;background-color:#= item.bgcolor #;selected-color:#= item.selectedColor#; hover-color:#= item.hoverColor#'> #= item.text # </span>",

【问题讨论】：

如果是编程练习，可能没问题，但从用户体验的角度来看……你确定要这样做吗？
我们使用 Kendo UI treeview 来显示不同颜色的不同状态，一些颜色由于是颜色而没有正确突出显示，所以这成为一个要求，我只是想找到一种方法，如果没有，我们将使用默认样式。
我的意思是您正在尝试以非常小的粒度自定义颜色。如果问题是状态，请为状态使用不同的颜色，而不是 hover 或 selected。这让用户感到困惑，但也很棘手且非常脆弱。检查this，看看它可能变得多么棘手和丑陋。
This 更近一点...
jsfiddle.net/KendoDev/qZeK6/8 这是我们的问题，为了突出黄色，我们使用灰色，在这种情况下，当我们有灰色文本时，灰色会被合并。

标签： html css kendo-ui kendo-treeview

【解决方案1】：

您应该覆盖这些节点的 KendoUI CSS 样式。这并不像您尝试的那么容易，因为hover 实际上是一个修饰符，而不是一个 html 元素。

您应该将模板定义为：

 <script id="template" type="text/kendo-template">
    <style>
        span.ob-#=item.uid# {
            color: #= item.text #;
        }
        li[data-uid='#=item.uid#'] span.k-state-hover {
            background: #= item.hoverColor # !important;
        }
        li[data-uid='#=item.uid#'] span.k-state-selected {
            background: #= item.selectedColor #;
            box-shadow: inset 0 0 3px 4px #= item.selectedColor #;
        }
    </style>
    <span class="ob-#= item.uid#"> #= item.text #</span>
</script>

这里的技巧是我们使用li[data-uid="xyz"] 为每个元素添加一个样式，其中xyz 是每个节点的uid。使用这个技巧，您可能会覆盖样式并使它们依赖于节点。

风格：

        span.ob-#=item.uid# {
            color: #= item.text #;
        }

定义节点的文本颜色。

风格：

        li[data-uid='#=item.uid#'] span.k-state-hover {
            background: #= item.hoverColor # !important;
        }

defines 定义selected 状态的样式。

最后

        li[data-uid='#=item.uid#'] span.k-state-selected {
            background: #= item.selectedColor #;
            box-shadow: inset 0 0 3px 4px #= item.selectedColor #;
        }

定义selected 项目的样式。

在这里运行：http://jsfiddle.net/OnaBai/qZeK6/7/

【讨论】：