參考示例:自定義節點
創建代碼
<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:200px;padding:5px;"
showTreeIcon="true" textField="text" idField="id"
ondrawnode="onDrawNode" showCheckBox="true">
</ul>
此時,我們監聽了“drawnode”事件。
drawnode 事件
function onDrawNode(e) {
var tree = e.sender;
var node = e.node;
var hasChildren = tree.hasChildren(node);
//所有子節點加上超鏈接
if (hasChildren == false) {
e.nodeHtml = '<a + node.id + '.html" target="_blank">' + node.text + '</a>';
}
//父節點高亮顯示;子節點斜線、藍色、下劃線顯示
if (hasChildren == true) {
e.nodeStyle = 'font-weight:bold;';
} else {
e.nodeStyle = "font-style:italic;"; //nodeStyle
e.nodeCls = "blueColor"; //nodeCls
}
//修改默認的父子節點圖標
if (hasChildren == true) {
e.iconCls = "folder";
} else {
e.iconCls = "file";
}
//父節點的CheckBox全部隱藏
if (hasChildren == true) {
e.showCheckBox = false;
}
}
Note: - 文本內容(nodeHtml):所有子節點加上超鏈接
- 節點樣式(nodeStyle/nodeCls):父節點高亮顯示;子節點斜線、藍色、下劃線顯示
- 節點圖片(iconCls):修改默認的父子節點圖標
- 隱藏CheckBox(showCheckBox):父節點的CheckBox全部隱藏
- 開發者可以擴展節點判斷條件,對文本、樣式、圖標、CheckBox等做任意自定義.