我怎样才能改变树的颜色?
How can I change the tree's color?
嗯,我"created"一棵小树有两个parents和三个children使用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>
感谢@risadinha 的正确搜索,与我所做的不同,至少答案现在会在 Whosebug 上。
var data = [
{
label: 'node1',
id: 1,
color: 'green'
}
];
在 CSS 上:
.jqtree-element {
background-color: red;
}
为 jqTree 添加以下 css
1 级:
.jqtree-tree .jqtree-title .jqtree-title-folder {
color: aqua !important;
}
2级:
.jqtree-tree .jqtree-title {
color: bisque !important;
}
嗯,我"created"一棵小树有两个parents和三个children使用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>
感谢@risadinha 的正确搜索,与我所做的不同,至少答案现在会在 Whosebug 上。
var data = [
{
label: 'node1',
id: 1,
color: 'green'
}
];
在 CSS 上:
.jqtree-element {
background-color: red;
}
为 jqTree 添加以下 css
1 级:
.jqtree-tree .jqtree-title .jqtree-title-folder {
color: aqua !important;
}
2级:
.jqtree-tree .jqtree-title {
color: bisque !important;
}