如何从远程json数据更改选定节点的颜色在剑道ui树形视图编程

Question

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

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

Answer 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;
        }

定义了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/