自定義節(jié)點

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