为每个级别设置一个 JS 项目的样式

Question

我正在使用 Jqtree 开发拖放树，但是我想按节点级别设置树的样式。

树Javascript

  var data = [
  {
      name: 'node1', id: 1,
      children: [
          { name: 'child1', id: 2 },
          { name: 'child1', id: 2, children: [
              { name: 'child7', id: 7 },
              { name: 'child7', id: 8 } ] },
          { name: 'child2', id: 3 }
      ]
  },
  {
      name: 'node2', id: 4,
      children: [
          { name: 'child3', id: 5 },
          { name: 'child4', id: 6 }
      ]
  }
];
$('#tree1').tree({
  data: data,
  autoOpen: true,
  dragAndDrop: true
});

显示树的代码

$(function() {
    $('#tree1').tree({
        data: data,
        autoOpen: true,
        dragAndDrop: true

    });

但是我看到了 jqtree 文档，我如何只对这个 var 提供的结果设置样式或添加代码？

var node = $('#tree1').tree('getNodeById', 123);
var treelevel = node.getLevel();

Answer 1

您可以相应地为它们分配 ID 和样式：

$('#tree1').tree({
    data: data,
    onCreateLi: function(node, $li) {
        $li.attr('id', 'item' + node.id);
    }
});

#item5 span{background: red;}

http://jsfiddle.net/2uwb7qwj/

为每个级别设置一个 JS 项目的样式

Styling an JS item per level

html

javascript

css

jqtree