jQuery zTree 異步加載添加子節(jié)點重復(fù)問題
zTree 簡介
zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點。
zTree 是開源免費的軟件(MIT 許可證)。如果您對 zTree 感興趣或者愿意資助 zTree 繼續(xù)發(fā)展下去,可以進行捐助。
- zTree v3.0 將核心代碼按照功能進行了分割,不需要的代碼可以不用加載
- 采用了 延遲加載 技術(shù),上萬節(jié)點輕松加載,即使在 IE6 下也能基本做到秒殺
- 兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
- 支持 JSON 數(shù)據(jù)
- 支持靜態(tài) 和 Ajax 異步加載節(jié)點數(shù)據(jù)
- 支持任意更換皮膚 / 自定義圖標(biāo)(依靠css)
- 支持極其靈活的 checkbox 或 radio 選擇功能
- 提供多種事件響應(yīng)回調(diào)
- 靈活的編輯(增/刪/改/查)功能,可隨意拖拽節(jié)點,還可以多節(jié)點拖拽喲
- 在一個頁面內(nèi)可同時生成多個 Tree 實例
- 簡單的參數(shù)配置實現(xiàn) 靈活多變的功能
原始問題
//添加結(jié)點, 產(chǎn)品和版本 function addNode(event) { rMenu.css({ "visibility": "hidden" }); var treeNode = zTree.getSelectedNodes()[0]; var pid; var nodeName; var treelevel; if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) { //添加產(chǎn)品結(jié)點 pid = 0; treeNode = null; treelevel = 1; } else if (treeNode) { //添加版本結(jié)點 pid = treeNode.id; treelevel = 2; } $.post( "AddNode.action", { type: treelevel, id: pid }, function(nodeIdAndName) { var params = /([^\|]+)\|([^\|]+)/.exec(nodeIdAndName); if (!((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.open)) { zTree.expandNode(treeNode, true); } treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel }); }); }
原本直接添加子節(jié)點的時候,如果父節(jié)點沒有展開,會添加兩個一樣的子節(jié)點(第一次的時候);后來我對父節(jié)點是否展開進行了判斷,但是卻變成了如果父節(jié)點展開,會添加兩個一樣的子節(jié)點(第一次的時候),這個問題要怎么解決呢?
辦法一
將
if (!((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.open)) { zTree.expandNode(treeNode, true); } treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });
改成
if(!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) { treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel }); } else if(treeNode.open) { if(treeNode.isParent) { zTree.reAsyncChildNodes(treeNode, "refresh"); } else { treeNode.isParent=true; zTree.reAsyncChildNodes(treeNode, "refresh"); } } else { zTree.expandNode(treeNode, true); treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel }); }
問題就可以解決了,但是有沒有優(yōu)化呢?感覺改后的代碼分類太多了
最優(yōu)辦法
貌似不用這么麻煩吧?前兩天回答了類似的問題。
1、點擊添加子節(jié)點后,就直接 ajax 傳給后臺保存數(shù)據(jù),捕獲 success 事件
2、ajax success 時,利用 treeNode.zAsync 屬性就可以知道此父節(jié)點是否進行過異步加載,如果為 false 那么直接 reAsyncChildNodes 刷新, 如果為 true 那么利用 addN...
if ((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.zAsync) treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel }); else zTree.reAsyncChildNodes(treeNode, "refresh");
總結(jié)
以上所述是小編給大家介紹的jQuery zTree 異步加載添加子節(jié)點重復(fù)問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jquery實現(xiàn)的隨機多彩tag標(biāo)簽隨機顏色和字號大小效果
這篇文章主要介紹了jquery實現(xiàn)的隨機多彩tag標(biāo)簽隨機顏色和字號大小效果,需要的朋友可以參考下2014-03-03jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點顏色的方法
這篇文章主要介紹了jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點顏色的方法,結(jié)合實例形式分析了jQuery圖表插件echarts設(shè)置折線圖的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03easyUI使用分頁過濾器對數(shù)據(jù)進行分頁操作實例分析
這篇文章主要介紹了easyUI使用分頁過濾器對數(shù)據(jù)進行分頁操作,結(jié)合實例形式詳細(xì)分析了easyUI分頁過濾器對數(shù)據(jù)進行分頁操作具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2020-06-06淺談jquery選擇器 :first與:first-child的區(qū)別
下面小編就為大家?guī)硪黄獪\談jquery選擇器 :first與:first-child的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11