如何更改树的颜色?

时间:2015-06-17 11:41:24

标签: javascript jquery css jqtree

好吧,我"创造了"一个小树,有两个父母和三个孩子使用JqTree,现在我想改变它的属性,如颜色,边框等,但我不想更改库。你能救我吗?

提前致谢。



var ExampleData = {};

ExampleData.data = [{
  label: 'node1',
  id: 1,
  children: [{
    label: 'child1',
    id: 2
  }, {
    label: 'child2',
    id: 3
  }]
}, {
  label: 'node2',
  id: 4,
  children: [{
    label: 'child3',
    id: 5
  }]
}];

ExampleData.getFirstLevelData = function(nodes) {
  if (!nodes) {
    nodes = ExampleData.example_data;
  }

  var data = [];

  $.each(nodes, function() {
    var node = {
      label: this.label,
      id: this.id
    };

    if (this.children) {
      node.load_on_demand = true;
    }

    data.push(node);
  });

  return data;
}

ExampleData.getChildrenOfNode = function(node_id) {
  var result = null;

  function iterate(nodes) {
    $.each(nodes, function() {
      if (result) {
        return;
      } else {
        if (this.id == node_id) {
          result = this;
        }

        if (this.children) {
          iterate(this.children);
        }
      }
    });
  }

  iterate(ExampleData.example_data);

  return ExampleData.getFirstLevelData(result.children);
}

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

});

		#navdata {

		  width: auto;

		  height: auto;

		  flex: 1;

		  padding-bottom: 1px;

		}

		#navgrid {

		  width: 50%;

		  height: 200px;

		  overflow-x: visible;

		  overflow-y: scroll;

		  border: solid 1px #79B7E7;

		  background-color: #DDEBF7;

		}

		#header {

		  background-color: #79B7E7;

		  width: 100%;

		  text-align: center;

		  border: 1px solid white;

		}

		#tree {

		  background-color: #FF0000;

		}

		

<!DOCTYPE html>
<html>

<head>

  

</head>

<body>
  <div id="navgrid">
    <div id="header">Header</div>
    <div id="tree1"></div>
  </div>
</body>

</html>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

为jqTree添加以下css

等级1:

a^= 16; b^= 16;

level2:

.jqtree-tree .jqtree-title .jqtree-title-folder {
    color: aqua !important;
}

答案 1 :(得分:0)

感谢@risadinha正确搜索,与我的做法不同,至少答案现在会在StackOverflow上。

var data = [
  {
    label: 'node1',
    id: 1,
    color: 'green'
  }
];

关于CSS:

.jqtree-element {
  background-color: red;
}