你可以动态地将个人风格应用于jquery dynatree节点吗？

Question

我正在寻找一种方法将某种样式应用于树构建时具有特定属性的dynatree节点。例如：我有一个项目树，如果他们有一些与之相关的数据，我想要浅蓝色背景颜色。无论用户点击节点，我都希望这种颜色存在。这将是动态应用于与click事件不同的节点的样式。下面的代码我正在使用木偶。

这是我的树：

            this.ui.treediv.dynatree({
                children: this.collection.models[0].attributes,
                checkbox: false,
                selectMode: 1, // 1:single, 2:multi, 3:multi-hier
                clickFolderMode: 1, // 1:activate, 2:expand, 3:activate and expand
                onClick: function (node, e) {
                    // key is ShiftID - trigger event on the TaskSetup collection
                    if (!node.childList) {
                        App.vent.trigger("clicked:shiftassignment", node.data.key);
                    }
                }
            });

这是我尝试应用样式但是注意到节点的键不在每个li标签的DOM中的任何位置，所以我真的不知道应用样式的#id属性。< / p>

            // Expand tree so we can apply the proper style below.
            this.ui.treediv.dynatree("getRoot").visit(function (node) {
                node.expand(true);
            });

            // Not a real good way to traverse the tree and highlight the nodes that have a shift set with dynatree, the below will work though.
            var tree = this.ui.treediv.dynatree("getTree");
            _.each(this.collection.models[0].attributes.children, function (child) {
                _.each(child.children, function (lastChild) {
                    if (lastChild.hasShiftSet) {
                        $("#" + lastChild.key).toggleClass("ui-state-highlight", true);
                    }
                });
            });

我还尝试了以下哪些应该可以工作，但是在渲染时，类和标题似乎没有应用于元素。

               onPostInit: function(isReloading, isError) {
                    this.$tree.dynatree("getRoot").visit(function (node) {
                        node.expand(true);
                        if (node.data.hasShiftSet) {
                            node.data.addClass = "dynatree-changed";
                            node.data.title = "NEW TITLE";
                        }
                    });
                    this.reactivate();
                }

Answer 1

发现问题，现在它将动态更改颜色。代码需要进入dynatree的onRender，以便为该节点添加类。

                onRender: function(isReloading, isError) {
                    this.$tree.dynatree("getRoot").visit(function (node) {
                        node.expand(true);
                        if (node.data.hasShiftSet) {
                            node.data.addClass = "dynatree-highlight";
                        }
                    });
                }

以下是dynatree渲染的屏幕截图，其中“dynatree-highlight”自定义css属性应用于与条件匹配的项目。