css - dijitt.Tree：仅对顶级条目进行样式设置

Question

我将 dijit/Tree 与基于大型分层 JSON 字符串的数据一起使用。到目前为止，它就像一个魅力。即使使用 CSS 的样式看起来也不错，但现在我只需要更改顶级元素的样式。仅选择这些条目的最佳方法是什么？据我所知，他们现在有明确的课程。

有人出主意吗？

亲切的问候马库斯

Answer 1

同时，我找到了解决方案。

您必须实现树的 onOpen 函数并为最近打开的节点的所有子节点添加一个 CSS 类：

var tree = new dijit.Tree({
    model: treeModel,
    id: "navTree",       
    showRoot: false,
    autoExpand: false,       
    onOpen: function(item, node){
     var subNodeList = node.getChildren();       
     addMyClasses(subNodeList,(node.indent+1));
    },        
     openOnClick: false
}

function addMyClasses(nodeList,level){
   nodeList.forEach(function(entry){      
    entry.labelNode.className += " treeNavLevel"+level;   
   });
}

在我的例子中，我为树的每一层添加了一个不同的 CSS 类。您可以从 node.indent 字段中获取级别