天天看點

【zTree】 zTree使用的 小例子

使用zTree樹不是第一次了  但是 還是翻閱着之前做的 對照着 使用起來比較友善  這裡就把小例子列出來   總結一下使用步驟 這樣友善下次使用起來友善一點

使用zTree樹的步驟:

1.首先  在jsp中引用zTree相關的 CSS檔案和JS檔案

2.其次  在jsp中設定zTree的容器,一般一個<ul id="treeDemo" class="ztree" style="display:none;"></ul>就足夠了 但是必須要設定id,是為了後續的友善使用

3.再者  在js中  配置zTree的setting 配置資訊

4.如果資料是動态的 則将動态擷取到的資料 動态組成ztree的節點 

5.初始化 zTree樹

JSP頁面:

【zTree】 zTree使用的 小例子
【zTree】 zTree使用的 小例子

View Code

JS代碼:

【zTree】 zTree使用的 小例子
【zTree】 zTree使用的 小例子

如果想要更多的效果  例如節點上增删改等  按鈕操作   更多的樣式    更多的事件  就可以檢視zTree的API 

界面效果:

【zTree】 zTree使用的 小例子

繼續閱讀