如何更改樹的顏色？

那麼，我用「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

如何更改樹的顏色？

回答

相關問題