這次帶給大家zTree非同步載入時新增子節點總是重複怎麼解決，解決zTree非同步載入時加入子節點總是重複的注意事項有哪些，下面就是實戰案例，一起來看一下。
zTree 是一個依靠 jQuery 實現的多功能 「樹插件」。以下透過本文給大家分享jQuery zTree 非同步載入新增子節點重複問題，需要的朋友參考下吧
##zTree 簡介
zTree 是一個依靠jQuery 實現的多功能「樹插件」。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。
zTree 是開源免費的軟體（MIT 許可證）。如果您對 zTree 感興趣或願意資助 zTree 繼續發展下去，可以進行捐款。
- zTree v3.0 將核心程式碼按照功能進行了分割，不需要的程式碼可以不用載入
- 採用了延遲載入技術，上萬節點輕鬆加載，即使在IE6 下也能基本做到秒殺
- 兼容IE、FireFox、Chrome、Opera、Safari 等瀏覽器
- #支援JSON 資料
- 支援靜態和Ajax 非同步載入節點資料
- 支援任意更換皮膚/ 自訂圖示（依賴css）
- 支援極為靈活的checkbox 或radio 選擇功能
- #提供多種
事件回應回呼
- 靈活的編輯（增/刪/改/查）功能，可隨意拖曳節點，還可以多節點拖曳喲
- 在一個頁面內可同時產生多個Tree 實例
- 簡單的參數配置實作靈活多變的功能
## 原始問題//添加结点, 产品和版本
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) {
//添加产品结点
pid = 0;
treeNode = null;
treelevel = 1;
} else if (treeNode) {
//添加版本结点
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 });
});
}登入後複製
辦法一 將
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 });
}登入後複製
問題就可以解決了，但是有沒有優化呢？感覺改後的程式碼分類太多了
最優辦法#似乎不用這麼麻煩吧？前兩天回答了類似的問題。
1、點擊新增子節點後，直接ajax 傳給後台保存數據，擷取success 事件
2、ajax success 時，利用treeNode.zAsync 屬性就可以知道此父節點是否進行過異步加載，如果為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");登入後複製
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
怎麼發掘空白處隱藏元素
Ajax怎麼實作下拉方塊無刷新聯動
無new建置詳解
#jQuery實作下拉選單導覽
以上是zTree非同步載入時新增子節點總是重複怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！
