生活随笔
收集整理的這篇文章主要介紹了
JQ插件Ztree的简单使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這里來使用前端插件幫助我們實現功能模塊表中在前端實現文件樹的展示
官方學習
Ztree官方網站
Ztree的簡單學習
1.Ztree是什么？
- zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。常常應用于PC端。zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。專門適合項目開發，尤其是 樹狀菜單、樹狀數據的Web顯示、權限管理等等。zTree 是開源免費的軟件（MIT 許可證）。在開源的作用下，zTree 越來越完善，目前已經擁有了不少粉絲，并且今后還會推出更多的 zTree 擴展功能庫，讓 zTree 更加強大。
2.Ztree有什么特點
● zTree v3.0 將核心代碼按照功能進行了分割，不需要的代碼可以不用加載
● 采用了延遲加載技術，上萬節點輕松加載，即使在 IE6 下也能基本做到秒殺
● 兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
● 支持 JSON 數據
● 支持靜態和 Ajax 異步加載節點數據
● 支持任意更換皮膚 / 自定義圖標（依靠css）
● 支持極其靈活的 checkbox 或 radio 選擇功能
● 提供多種事件響應回調
● 靈活的編輯（增/刪/改/查）功能，可隨意拖拽節點，還可以多節點拖拽喲
● 在一個頁面內可同時生成多個 Tree 實例
● 簡單的參數配置實現靈活多變的功能
3.Ztree如何使用？
- 下載js和css文件，可以點擊官網的碼云下載
- 在頁面中導入js和css文件，別忘記jq也要導入，這里需要導入兩個js文件（這里的路徑是動態服務器路徑）
<script src="${pageContext.request.contextPath}/js/plugins/ztree/jquery.ztree.core.min.js"></script> <script src="${pageContext.request.contextPath}/js/plugins/ztree/jquery.ztree.excheck.js"></script>
<body>
<ul id="treeDemo" class="ztree"></ul>
</body>
<script>
var setting={
check: { enable: true }, view:{"showLine":true}
};
var zNodes=[ {"id":1,"name":"日常管理","open":true, "children":[ {"id":2,"name":"我的任務"}, {"id":3,"name":"我的考勤"}, {"id":4,"name":"我的福利"} ]},
{"id":5,"name":"權限管理", "children":[ {"id":6,"name":"資源管理"}, {"id":7,"name":"角色管理"}, {"id":8,"name":"剪貼","icon":"${pageContext.request.contextPath}/img/1705.jpg"} ]} ]; $(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
- 有關var變量setting里面的屬性可以去官方api文檔自學，十分詳細
- 這里實現對ul標簽進行渲染成一個文件夾樹的是使用這句核心代碼
$.fn.zTree.init($("#treeDemo"), setting, zNodes); 。
4.Ztree的使用案例
- 這里環境使用Maven項目，相關依賴都已導入
- 這里看一下數據的表，這是一張自連接的表，樹的根節點是oa辦公協同系統，從這個根節點下開始其子節點：
- 所以我們首先修改實體類的屬性，增加一個boolean類型的open和List集合類型的children來保存其子類
- 我們可以使用ztree的異步設置來請求后臺返回一個符合規范的json數據來讓其解析渲染，所以這里代碼如下
<SCRIPT type
="text/javascript">var setting
= {async: {enable
: true,url
: "${pageContext.request.contextPath}/sources/getRootSourcesByPid"},view
: {addHoverDom
: function(treeId
, treeNode
) {var aObj
= $("#" + treeNode
.tId
+ "_a");aObj
.attr("href", "javascript:void(0);");aObj
.attr("target","_self");if (treeNode
.editNameFlag
|| $("#btnGroup" + treeNode
.tId
).length
> 0)return;var s
= '<span id="btnGroup'+treeNode
.tId
+'">';if (treeNode
.level
== 1) {if (treeNode
.children
.length
== 0) {s
+= '<span class="button edit" οnclick="editNode('+ treeNode
.id
+ ')" ></span>';s
+= '<span class="button remove" οnclick="deleteNode('+ treeNode
.id
+ ')"></span>';}else{s
+= '<span class="button edit" οnclick="editNode('+ treeNode
.id
+ ')" ></span>';}} else if (treeNode
.level
== 2) {s
+= '<span class="button edit" οnclick="editNode('+ treeNode
.id
+ ')" ></span>';s
+= '<span class="button remove" οnclick="deleteNode('+ treeNode
.id
+ ')" ></span>';}s
+= '</span>';aObj
.append(s
);},removeHoverDom
: function deleteNode(treeId
, treeNode
) {$("#btnGroup" + treeNode
.tId
).remove();}}};
public List
<Sources> getRootSourcesByPid(int pid
) {
SourcesExample sourcesExample
=new SourcesExample();
SourcesExample
.Criteria criteria
= sourcesExample
.createCriteria();
criteria
.andPidEqualTo(pid
);
List
<Sources> sourcesList
= sourcesMapper
.selectByExample(sourcesExample
);
for (Sources sources
: sourcesList
) {
List
<Sources> subList
=getRootSourcesByPid(sources
.getId());sources
.setChildren(subList
); }
return sourcesList
; }
總結
以上是生活随笔為你收集整理的JQ插件Ztree的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
