當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

JQ插件Ztree的简单使用

發(fā)布時(shí)間：2023/12/29 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 JQ插件Ztree的简单使用小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

這里來使用前端插件幫助我們實(shí)現(xiàn)功能模塊表中在前端實(shí)現(xiàn)文件樹的展示

官方學(xué)習(xí)

Ztree官方網(wǎng)站

Ztree的簡單學(xué)習(xí)

1.Ztree是什么？

zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。常常應(yīng)用于PC端。zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。專門適合項(xiàng)目開發(fā)，尤其是樹狀菜單、樹狀數(shù)據(jù)的Web顯示、權(quán)限管理等等。zTree 是開源免費(fèi)的軟件（MIT 許可證）。在開源的作用下，zTree 越來越完善，目前已經(jīng)擁有了不少粉絲，并且今后還會推出更多的 zTree 擴(kuò)展功能庫，讓 zTree 更加強(qiáng)大。

2.Ztree有什么特點(diǎn)

● zTree v3.0 將核心代碼按照功能進(jìn)行了分割，不需要的代碼可以不用加載
● 采用了延遲加載技術(shù)，上萬節(jié)點(diǎn)輕松加載，即使在 IE6 下也能基本做到秒殺
● 兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
● 支持 JSON 數(shù)據(jù)
● 支持靜態(tài)和 Ajax 異步加載節(jié)點(diǎn)數(shù)據(jù)
● 支持任意更換皮膚 / 自定義圖標(biāo)（依靠css）
● 支持極其靈活的 checkbox 或 radio 選擇功能
● 提供多種事件響應(yīng)回調(diào)
● 靈活的編輯（增/刪/改/查）功能，可隨意拖拽節(jié)點(diǎn)，還可以多節(jié)點(diǎn)拖拽喲
● 在一個(gè)頁面內(nèi)可同時(shí)生成多個(gè) Tree 實(shí)例
● 簡單的參數(shù)配置實(shí)現(xiàn)靈活多變的功能

3.Ztree如何使用？

下載js和css文件，可以點(diǎn)擊官網(wǎng)的碼云下載
在頁面中導(dǎo)入js和css文件，別忘記jq也要導(dǎo)入，這里需要導(dǎo)入兩個(gè)js文件（這里的路徑是動態(tài)服務(wù)器路徑）

在Html頁面的Body里面寫一個(gè)ul標(biāo)簽

在< script >標(biāo)簽里面寫js代碼渲染

有關(guān)var變量setting里面的屬性可以去官方api文檔自學(xué)，十分詳細(xì)
這里實(shí)現(xiàn)對ul標(biāo)簽進(jìn)行渲染成一個(gè)文件夾樹的是使用這句核心代碼

$.fn.zTree.init($("#treeDemo"), setting, zNodes); 。

4.Ztree的使用案例

這里環(huán)境使用Maven項(xiàng)目，相關(guān)依賴都已導(dǎo)入
這里看一下數(shù)據(jù)的表，這是一張自連接的表，樹的根節(jié)點(diǎn)是oa辦公協(xié)同系統(tǒng)，從這個(gè)根節(jié)點(diǎn)下開始其子節(jié)點(diǎn)：

所以我們首先修改實(shí)體類的屬性，增加一個(gè)boolean類型的open和List集合類型的children來保存其子類
我們可以使用ztree的異步設(shè)置來請求后臺返回一個(gè)符合規(guī)范的json數(shù)據(jù)來讓其解析渲染，所以這里代碼如下

<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();}}};

這里后臺需要查詢數(shù)據(jù)庫來返回?cái)?shù)據(jù)：

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; }

最終效果：

總結(jié)

以上是生活随笔為你收集整理的JQ插件Ztree的简单使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： bzoj2749: [HAOI2012]
下一篇：迅捷CAD编辑器使用的感觉还不错