如何更改树的颜色？

那么，我用“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 
 

 
});

\t \t #navdata { 
 

 
\t \t width: auto; 
 

 
\t \t height: auto; 
 

 
\t \t flex: 1; 
 

 
\t \t padding-bottom: 1px; 
 

 
\t \t } 
 

 
\t \t #navgrid { 
 

 
\t \t width: 50%; 
 

 
\t \t height: 200px; 
 

 
\t \t overflow-x: visible; 
 

 
\t \t overflow-y: scroll; 
 

 
\t \t border: solid 1px #79B7E7; 
 

 
\t \t background-color: #DDEBF7; 
 

 
\t \t } 
 

 
\t \t #header { 
 

 
\t \t background-color: #79B7E7; 
 

 
\t \t width: 100%; 
 

 
\t \t text-align: center; 
 

 
\t \t border: 1px solid white; 
 

 
\t \t } 
 

 
\t \t #tree { 
 

 
\t \t background-color: #FF0000; 
 

 
\t \t } 
 

 
\t \t

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    
 

 
</head> 
 

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

 
</html>

来源

2015-06-17 Kyle

请不要尝试粘贴一个问题之前找到解决方案：https://github.com/mbraak/jqTree/issues/93 - 如果你做了搜索，你尝试过的东西，他们没有制定出来，然后写下有关您尝试过的以及如何解决问题的细节。 – Risadinha

谢谢！我搜索了它，但我很笨，所以我搜索了：“如何更改使用库时的css属性”，我希望有一天所有关于编程的答案都将在StackOverflow上。 – Kyle

我将重新制定我的问题 – Kyle

添加以下的CSS jqTree

1级：

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

level2的：

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

来源

2015-06-17 12:39:35 aba

谢谢，分享+1，标题文件夹是什么？我已经测试过，但没有改变？ – Kyle

请参阅jqTree.css：http://mbraak.github.io/jqTree/jqtree.css – aba

谢谢！我会看看：） – Kyle

感谢@risadinha比我做什么，至少答案现在想要在这里在计算器上搜索正确的，是不同的。

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

而且对CSS：

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

来源

2015-06-17 12:00:41 Kyle

如果您可以使此答案更加完整，请对其进行编辑：D – Kyle

如何更改树的颜色？

回答

相关问题