詳解js樹形控件—zTree使用總結(jié)

更新時(shí)間：2016年12月28日 09:57:35 作者：Fonour

本篇文章主要介紹了js樹形控件—zTree使用總結(jié)，樹形控件的使用是應(yīng)用開發(fā)過程中必不可少的。zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn).

0 zTree簡(jiǎn)介

樹形控件的使用是應(yīng)用開發(fā)過程中必不可少的。zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。

0.0 zTree的特點(diǎn)

最新版的zTree將核心代碼按照功能進(jìn)行了分割，不需要的代碼可以不用加載，如普通使用只需要加載核心的jquery.ztree.core-3.5.js，需要使用勾選功能加載jquery.ztree.excheck-3.5.min.js，需要使用編輯功能加載jquery.ztree.exedit-3.5.min.js
采用了延遲加載技術(shù)，上萬(wàn)節(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è)頁(yè)面內(nèi)可同時(shí)生成多個(gè) Tree 實(shí)例
簡(jiǎn)單的參數(shù)配置實(shí)現(xiàn)，靈活多變的功能

0.1 zTree文件介紹

從zTree官網(wǎng)下載的zTree包括以下組成部分

metroStyle文件夾：zTree的metro風(fēng)格樣式相關(guān)文件（圖片及css樣式表）。
zTreeStyle文件夾：zTree的標(biāo)準(zhǔn)風(fēng)格樣式文件夾（圖片及css樣式表）
js文件：zTree.all.js是完整的js庫(kù)，可單純加載此文件實(shí)現(xiàn)所有zTree功能，ztree.core、ztree.excheck、ztree.exedit、ztree.exhide是對(duì)ztree按照功能進(jìn)行的分割，分別對(duì)應(yīng)基本功能、復(fù)選功能、編輯功能、顯隱功能。

1 zTree的基本使用

1.0 zTree的創(chuàng)建

在頁(yè)面中添加對(duì)zTree的js及css引用，由于zTree基于JQuery，JQuery的引用是必須的。

<!DOCTYPE html>
<HTML>
<HEAD>
 <TITLE> ZTREE DEMO </TITLE>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
 <script type="text/javascript" src="jquery-1.4.2.js"></script>
 <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>
 <SCRIPT LANGUAGE="JavaScript">
  var zTreeObj;
  var setting = {};  // zTree 的參數(shù)配置，后面詳解
   var zNodes = [   // zTree 的數(shù)據(jù)屬性，此處使用標(biāo)準(zhǔn)json格式
   {
   name: "test1", open: true, children: [
   { name: "test1_1" }, { name: "test1_2" }]
  },
  {
   name: "test2", open: true, children: [
   { name: "test2_1" }, { name: "test2_2" }]
  }
  ];
  $(document).ready(function () {
   zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); //初始化zTree，三個(gè)參數(shù)一次分別是容器(zTree 的容器 className 別忘了設(shè)置為 "ztree")、參數(shù)配置、數(shù)據(jù)源
  });
 </SCRIPT>
</HEAD>
<BODY>
 <div>
  <ul id="treeDemo" class="ztree"></ul> 
 </div>
</BODY>
</HTML>

運(yùn)行結(jié)果如下

1.1 zTree的配置

zTree的配置采用Json格式，按照配置的類型分為view（可視界面相關(guān)配置）、data（數(shù)據(jù)相關(guān)配置）、check（復(fù)選框相關(guān)配置）、callback（各類事件的回調(diào)函數(shù)配置）、async（zTree異步加載配置），一下是我們經(jīng)常會(huì)使用到的一些配置及說(shuō)明，其他詳細(xì)配置可以參考zTree官方API文檔的詳細(xì)介紹。

var setting = {
   view: {
    selectedMulti: true, //設(shè)置是否能夠同時(shí)選中多個(gè)節(jié)點(diǎn)
    showIcon: true,  //設(shè)置是否顯示節(jié)點(diǎn)圖標(biāo)
    showLine: true,  //設(shè)置是否顯示節(jié)點(diǎn)與節(jié)點(diǎn)之間的連線
    showTitle: true,  //設(shè)置是否顯示節(jié)點(diǎn)的title提示信息
   },
   data: {
     simpleData: {
     enable: false, //設(shè)置是否啟用簡(jiǎn)單數(shù)據(jù)格式（zTree支持標(biāo)準(zhǔn)數(shù)據(jù)格式跟簡(jiǎn)單數(shù)據(jù)格式，上面例子中是標(biāo)準(zhǔn)數(shù)據(jù)格式）
      idKey: "id",  //設(shè)置啟用簡(jiǎn)單數(shù)據(jù)格式時(shí)id對(duì)應(yīng)的屬性名稱
      pidKey: "pId" //設(shè)置啟用簡(jiǎn)單數(shù)據(jù)格式時(shí)parentId對(duì)應(yīng)的屬性名稱,ztree根據(jù)id及pid層級(jí)關(guān)系構(gòu)建樹結(jié)構(gòu)
    }
   },
   check:{
    enable: true   //設(shè)置是否顯示checkbox復(fù)選框
   },
   callback: {
    onClick: onClick,    //定義節(jié)點(diǎn)單擊事件回調(diào)函數(shù)
    onRightClick: OnRightClick, //定義節(jié)點(diǎn)右鍵單擊事件回調(diào)函數(shù)
    beforeRename: beforeRename, //定義節(jié)點(diǎn)重新編輯成功前回調(diào)函數(shù)，一般用于節(jié)點(diǎn)編輯時(shí)判斷輸入的節(jié)點(diǎn)名稱是否合法
    onDblClick: onDblClick,  //定義節(jié)點(diǎn)雙擊事件回調(diào)函數(shù)
    onCheck: onCheck    //定義節(jié)點(diǎn)復(fù)選框選中或取消選中事件的回調(diào)函數(shù)
   },
   async: {
    enable: true,      //設(shè)置啟用異步加載
    type: "get",      //異步加載類型:post和get
    contentType: "application/json", //定義ajax提交參數(shù)的參數(shù)類型，一般為json格式
    url: "/Design/Get",    //定義數(shù)據(jù)請(qǐng)求路徑
    autoParam: ["id=id", "name=name"] //定義提交時(shí)參數(shù)的名稱，=號(hào)前面標(biāo)識(shí)節(jié)點(diǎn)屬性，后面標(biāo)識(shí)提交時(shí)json數(shù)據(jù)中參數(shù)的名稱
   }
  };

需要注意的是，zTree的事件回調(diào)部分，基本上每一個(gè)事件都對(duì)應(yīng)一個(gè)beforeXXX事件，比如onClick事件對(duì)應(yīng)有一個(gè)beforeOnClick事件，主要用于控制相關(guān)事件是否允許執(zhí)行，如果before事件返回false，則取消執(zhí)行對(duì)應(yīng)相關(guān)事件。

1.2 zTree的數(shù)據(jù)格式

zTree的每一個(gè)節(jié)點(diǎn)都是一個(gè)treeNode對(duì)象，treeNode對(duì)象經(jīng)常用到的屬性和方法如下：

treeNode: {
    name,  //節(jié)點(diǎn)顯示的文本
    checked, //節(jié)點(diǎn)是否勾選，ztree配置啟用復(fù)選框時(shí)有效
    open,  //節(jié)點(diǎn)是否展開
    icon,  //節(jié)點(diǎn)的圖標(biāo)
    iconOpen, //節(jié)點(diǎn)展開式的圖標(biāo)
    iconClose, //節(jié)點(diǎn)折疊時(shí)的圖標(biāo)
    id,   //節(jié)點(diǎn)的標(biāo)識(shí)屬性，對(duì)應(yīng)的是啟用簡(jiǎn)單數(shù)據(jù)格式時(shí)idKey對(duì)應(yīng)的屬性名，并不一定是id,如果setting中定義的idKey:"zId",那么此處就是zId
    pId,  //節(jié)點(diǎn)parentId屬性，命名規(guī)則同id
    children, //得到該節(jié)點(diǎn)所有孩子節(jié)點(diǎn)，直接下級(jí)，若要得到所有下屬層級(jí)節(jié)點(diǎn)，需要自己寫遞歸得到
    isParent, //判斷該節(jié)點(diǎn)是否是父節(jié)點(diǎn)，一般應(yīng)用中通常需要判斷只有葉子節(jié)點(diǎn)才能進(jìn)行相關(guān)操作，或者刪除時(shí)判斷下面是有子節(jié)點(diǎn)時(shí)經(jīng)常用到。
    getPath() //得到該節(jié)點(diǎn)的路徑，即所有父節(jié)點(diǎn)，包括自己，此方法返回的是一個(gè)數(shù)組，通常用于創(chuàng)建類似面包屑導(dǎo)航的東西A-->B-->C 
   }

zTree的數(shù)據(jù)源一般有標(biāo)準(zhǔn)數(shù)據(jù)格式、簡(jiǎn)單數(shù)據(jù)格式兩種，標(biāo)準(zhǔn)數(shù)據(jù)格式通過指定節(jié)點(diǎn)的chidren屬性構(gòu)建層級(jí)關(guān)系，而簡(jiǎn)單數(shù)據(jù)格式根據(jù)根據(jù)id，pid屬性構(gòu)建層級(jí)關(guān)系，我們?cè)趹?yīng)用開發(fā)中使用關(guān)系型數(shù)據(jù)庫(kù)，一般采用的都是簡(jiǎn)單數(shù)據(jù)格式。

標(biāo)準(zhǔn)數(shù)據(jù)格式

var nodes = [
 {name: "父節(jié)點(diǎn)1", children: [
  {name: "子節(jié)點(diǎn)1"},
  {name: "子節(jié)點(diǎn)2"}
 ]}
];

簡(jiǎn)單數(shù)據(jù)格式

var nodes = [
 {id:1, pId:0, name: "父節(jié)點(diǎn)1"},
 {id:11, pId:1, name: "子節(jié)點(diǎn)1"},
 {id:12, pId:1, name: "子節(jié)點(diǎn)2"}
];

注意zTree的默認(rèn)配置是不啟用簡(jiǎn)單數(shù)據(jù)格式，使用簡(jiǎn)單數(shù)據(jù)格式一定要在setting中進(jìn)行簡(jiǎn)單數(shù)據(jù)格式的相關(guān)配置。

1.3 zTree的常用方法

zTree的主要操作方法介紹如下

獲取zTree對(duì)象

var treeObj = $.fn.zTree.getZTreeObj("tree");

增加節(jié)點(diǎn)

addNodes(parentNode,index,newNodes,isSlient)

parentNode:指定的父節(jié)點(diǎn)，如果增加根節(jié)點(diǎn)，請(qǐng)?jiān)O(shè)置 parentNode 為 null 即可

index:新節(jié)點(diǎn)插入的位置（從 0 開始），index = -1 時(shí)，插入到最后，此參數(shù)可忽略

newNodes：需要增加的節(jié)點(diǎn)數(shù)據(jù) JSON 對(duì)象集合，數(shù)據(jù)只需要滿足 zTree 的節(jié)點(diǎn)數(shù)據(jù)必需的屬性即可

isSilent：true 時(shí)，添加節(jié)點(diǎn)后不展開父節(jié)點(diǎn)，其他值或缺省狀態(tài)都自動(dòng)展開

勾選或取消勾選全部節(jié)點(diǎn)

checkAllNodes(checked);

checked參數(shù)為true時(shí)全部勾選，為false時(shí)全部取消勾選。

勾選或取消勾選單個(gè)節(jié)點(diǎn)

checkNode(node, checked, checkedTypeFlag，callbackFlag);

node：要進(jìn)行操作的節(jié)點(diǎn)

checked：為true勾選，為false取消勾選

checkeTypeFlag:為true表示對(duì)當(dāng)前結(jié)點(diǎn)的子節(jié)點(diǎn)及父節(jié)點(diǎn)進(jìn)行勾選狀態(tài)的聯(lián)動(dòng)，為false不聯(lián)動(dòng)

callbackFlag:為true時(shí)表示執(zhí)行beforeOnCheck和onCheck事件的回調(diào)函數(shù)，為false不執(zhí)行

編輯節(jié)點(diǎn)

edit(node); 使節(jié)點(diǎn)處于編輯狀態(tài)，必須引用jquery.ztree.exedit 擴(kuò)展。

展開或折疊全部節(jié)點(diǎn)

expandAll(expand);

expand為true是展開所有節(jié)點(diǎn)，為false是折疊所有節(jié)點(diǎn)。

根據(jù)節(jié)點(diǎn)屬性查找結(jié)點(diǎn)

getNodesByParam(key,value, parentNode);

key:屬性名

value:屬性值

parentNode:是否在指定節(jié)點(diǎn)下查找，為null表示整個(gè)樹查找。

獲取被勾選或未被勾選的節(jié)點(diǎn)集合

getCheckedNodes(checked);

checked為true表示獲取所有被勾選的節(jié)點(diǎn)集合，為false表示所有未被勾選的節(jié)點(diǎn)集合

獲取輸入框勾選狀態(tài)被改變的節(jié)點(diǎn)集合

getChangeCheckedNodes()

2 zTree的常用操作

2.0 ajax請(qǐng)求數(shù)據(jù)并創(chuàng)建zTree

$(function () {
   var setting = {     //此處根據(jù)自己需要進(jìn)行配置
    view: {
     selectedMulti: false
    },
    data: {
     simpleData: {
      enable: true
     }
    },
    callback: {
     onClick: onDesignTreeClick,
     onRightClick: OnRightClick,
     beforeRename: beforeRename,
     onCheck：onCheck
    }
   };
   $.ajax({
    type: "Get",
    url: "/Design/GetDesignTreeData",     //ajax請(qǐng)求地址
     success: function (data) {
     $.fn.zTree.init($("#treeZo"), setting, data); //加載數(shù)據(jù)
    },
   });
  });

后臺(tái)代碼如下，可以根據(jù)需要返回你想要的任何數(shù)據(jù)，綁定到zTree上，然后通過treeNode.屬性名取到對(duì)應(yīng)的值，實(shí)現(xiàn)一些界面邏輯操作。

 public ActionResult GetDesignTreeData()
  {
   var result = _designAppService.GetDesignTreeData();
   List<ModelTreeViewModel> treeModels = new List<ModelTreeViewModel>();
   bool open = false;
   foreach (var design in result.Designs)
   {
    if (design.ParentId == Guid.Empty)
     open = true;
    else open = false;
    treeModels.Add(new ModelTreeViewModel() { Id = design.Id.ToString(), PId = design.ParentId.ToString(), Name = design.Name, Open = open, Data = design.Remarks ?? "", ViewPoint = design.ViewPoint ?? "", Checked = true });
   }
   return Json(treeModels, JsonRequestBehavior.AllowGet);
  }

2.1 節(jié)點(diǎn)單擊操作

節(jié)點(diǎn)單擊事件會(huì)捕獲事件對(duì)象e，zTree的唯一標(biāo)識(shí)treeId，當(dāng)前選中的節(jié)點(diǎn)對(duì)象treeNode三個(gè)參數(shù)。根據(jù)實(shí)際需求可獲取treeNode中包含的任何屬性數(shù)據(jù)，進(jìn)行相關(guān)操作

function onClick(e, treeId, treeNode) {
   if (treeNode.isParent) //如果不是葉子結(jié)點(diǎn)，結(jié)束
    return;
   alert(treeNode.name); //獲取當(dāng)前結(jié)點(diǎn)上的相關(guān)屬性數(shù)據(jù)，執(zhí)行相關(guān)邏輯
  };

2.2 節(jié)點(diǎn)復(fù)選框事件

一般情況下我們會(huì)直接使用treeObj.getCheckedNodes(true);獲取所有選中的節(jié)點(diǎn)，然后遍歷所有選中的節(jié)點(diǎn)進(jìn)行相關(guān)操作，當(dāng)面對(duì)大數(shù)據(jù)量時(shí)，這種操作方法便不可取，可通過getChangeCheckedNodes()方法獲取勾選狀態(tài)被改變的節(jié)點(diǎn)集合，值針對(duì)狀態(tài)改變的節(jié)點(diǎn)做相應(yīng)處理。

 function onCheck() {
   var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //獲取樹對(duì)象
   var nodes = treeObj.getChangeCheckedNodes();  //獲取勾選狀態(tài)改變的節(jié)點(diǎn)
   var designIds = [];
   var status = 0;         //定義初始勾選狀態(tài)為未勾選
   if (nodes[0].checked)
    status = 1;         //如果狀態(tài)改變節(jié)點(diǎn)為勾選狀態(tài)，說(shuō)明當(dāng)前操作是從未勾選變?yōu)橐压催x。
   $.each(nodes, function (i, item) {
    designIds.push(item.id);      //將狀態(tài)改變的節(jié)點(diǎn)id輸出到數(shù)組
     item.checkedOld = item.checked;    //這句話很關(guān)鍵，將節(jié)點(diǎn)的初始狀態(tài)置為當(dāng)前狀態(tài)。否則每次勾選操作獲取狀態(tài)改變節(jié)點(diǎn)時(shí)只會(huì)跟樹初始化的狀態(tài)相比較。
   })
   $.ajax({
    type: "Post",
    url: "/Design/GetRelationComponentIdsByDesigns",
    data: { "designIds": designIds },
    success: function (data) {
     RealBimOcx.BatchAddSubClrInfoBegin();
     $.each(data.result, function (i, item) {
      if (status == 1)           //這里根據(jù)發(fā)生改變的節(jié)點(diǎn)是勾選還是為勾選進(jìn)行相關(guān)邏輯操作。
       RealBimOcx.AddSubClrInfo(item, 255, 255, 0);
      else
       RealBimOcx.AddSubClrInfo(item, 0, 255, 0);
      if (i % 100 == 0) {
       RealBimOcx.BatchAddSubClrInfoEnd();
       RealBimOcx.BatchAddSubClrInfoBegin();
      }

     })
     RealBimOcx.BatchAddSubClrInfoEnd();

    }
   })
  };

2.3 實(shí)現(xiàn)zTree的右鍵增刪改操作

首先定義右鍵彈出面板

<div id="rMenu" style="z-index:100;">
  <ul>
   <li id="m_add" onclick="addTreeNode();">新增節(jié)點(diǎn)</li>
   <li id="m_del" onclick="removeTreeNode();">刪除節(jié)點(diǎn)</li>
   <li id="m_edit" onclick="editTreeNode();" style="border-bottom:1px solid #cecece">編輯節(jié)點(diǎn)</li><li id="m_left">升級(jí)</li>
   <li id="m_right">降級(jí)</li>
   <li id="m_up">上移</li>
   <li id="m_down" style="border-bottom:1px solid #cecece">下移</li>
   <li id="m_reset" onclick="resetTree();">重置節(jié)點(diǎn)</li>
<li id="m_open" onclick="treeOpen()">展開所有</li>
   <li id="m_stop" onclick="treeStop()">收起所有</li>
  </ul>
</div>

實(shí)現(xiàn)zTree右鍵單擊事件回調(diào)函數(shù)

  //右鍵單擊回調(diào)函數(shù)
  function OnRightClick(event, treeId, treeNode) {
   $("#treeZo").hide();
   if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
    zTree.cancelSelectedNode();
    showRMenu("root", event.clientX, event.clientY); //根據(jù)鼠標(biāo)位置顯示右鍵操作面板
   } else if (treeNode && !treeNode.noR) {
    zTree.selectNode(treeNode);
    showRMenu("node", event.clientX, event.clientY);
   }
   $("#treeZo").show();
  }
  //根據(jù)節(jié)點(diǎn)類型，控制右鍵操作菜單哪些可用哪些不可用
  function showRMenu(type, x, y) {
   $("#rMenu ul").show();
   if (type == "root") {
    $("#m_del").hide();
    $("#m_edit").hide();
    $("#m_left").hide();
    $("#m_right").hide();
    $("#m_up").hide();
    $("#m_down").hide();
    $("#m_add").addClass('mboder');
   } else {
    $("#m_del").show();
    $("#m_edit").show();
    $("#m_left").show();
    $("#m_right").show();
    $("#m_up").show();
    $("#m_down").show();
    $("#m_add").removeClass('mboder');
   }
   rMenu.css({ "top": y + "px", "left": x + "px", "visibility": "visible" });
   $("body").bind("mousedown", onBodyMouseDown);
  }
  //以藏右鍵面板
  function hideRMenu() {
   if (rMenu) rMenu.css({ "visibility": "hidden" });
   $("body").unbind("mousedown", onBodyMouseDown);
  }
  //單擊頁(yè)面其他位置 隱藏右鍵面板
  function onBodyMouseDown(event) { 
   if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
    rMenu.css({ "visibility": "hidden" });
   }
  }

新增節(jié)點(diǎn)

  //增加節(jié)點(diǎn)
  function addTreeNode() {
   hideRMenu();
   var name = new Date().getTime(); //利用時(shí)間戳生成節(jié)點(diǎn)名稱，保證節(jié)點(diǎn)名稱唯一
    var newNode = {
    name: name
   };
   if (zTree.getSelectedNodes()[0]) {
    newNode.checked = zTree.getSelectedNodes()[0].checked;
    newNode.pid = zTree.getSelectedNodes()[0].id;
    zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
   } else {
    zTree.addNodes(null, newNode);
   }
   var node = zTree.getNodeByParam("name", name, null); //得到新增加的節(jié)點(diǎn)
   zTree.selectNode(node); //選中新增加的節(jié)點(diǎn)
   zTree.editName(node);  //讓新增加的節(jié)點(diǎn)處于編輯狀態(tài)
  }

編輯節(jié)點(diǎn)

function editTreeNode() {
   var nodes = zTree.getSelectedNodes(); //得到選中節(jié)點(diǎn)集合
   if (nodes && nodes.length > 0) {
    var parent = nodes[0].getParentNode(); //得到選中節(jié)點(diǎn)的父節(jié)點(diǎn)
    if (parent) {
     nodes[0].pid = parent.id; //如果選中節(jié)點(diǎn)父節(jié)點(diǎn)存在，將當(dāng)前結(jié)點(diǎn)的pid屬性值設(shè)置為父節(jié)點(diǎn)的id
    }
    zTree.editName(nodes[0]); //讓選中節(jié)點(diǎn)處于編輯狀態(tài)
   }
   hideRMenu();  //隱藏右鍵面板
  };

節(jié)點(diǎn)編輯狀態(tài)離開時(shí)觸發(fā)事件

  //編輯并保存節(jié)點(diǎn)
  function beforeRename(treeId, treeNode, newName, isCancel) {
   if (newName.length == 0) { //節(jié)點(diǎn)名稱判斷
    alert("不能為空。");
    return false;
   }
   else {
    $.ajax({     //數(shù)據(jù)入庫(kù)
     type: "Post",
     url: "/Design/InsertOrUpdate",
     data: { "dto": { "Id": treeNode.id, "ParentId": treeNode.pid, "Name": newName } },
     success: function (data) {
      if (data.result == "Faild") {
       layerAlert("保存失敗。");
       return false;
      }
      else {
       treeNode.id = data.result; //將返回的id賦值給當(dāng)前結(jié)點(diǎn)
       return true;
      }

     }
    });
   }
  };

刪除節(jié)點(diǎn)數(shù)據(jù)

function removeTreeNode() {
   hideRMenu();
   var nodes = zTree.getSelectedNodes();
   if (nodes && nodes.length > 0) {
    if (nodes[0].children && nodes[0].children.length > 0) {
     alert("包含下級(jí)，無(wú)法刪除。");
    } else {
     if (confirm("該操作會(huì)將關(guān)聯(lián)數(shù)據(jù)同步刪除，是否確認(rèn)刪除？") == true) {
      $.ajax({
       type: "Post",
       url: "/Design/Delete",
       data: { "id": nodes[0].id },
       success: function (data) {
        if (data.result == "Success") {
         zTree.removeNode(nodes[0]);
        }
        else {
         alert("刪除失敗。");
        }
       }
      });
     };
    }
   }
  };

2.4 一些總結(jié)

我們通常使用到樹形控件做授權(quán)或關(guān)聯(lián)類似的操作，一般會(huì)先全部取消勾選，然后根據(jù)選中的數(shù)據(jù)關(guān)聯(lián)對(duì)樹控件的復(fù)選框進(jìn)行選中操作，在大數(shù)據(jù)量時(shí)，大約幾萬(wàn)條數(shù)據(jù)，全部取消勾選+根據(jù)關(guān)聯(lián)數(shù)據(jù)勾選相關(guān)節(jié)點(diǎn)這個(gè)操作通過js執(zhí)行會(huì)很慢，這種情況建議在后臺(tái)通過關(guān)聯(lián)關(guān)系重新組織zTree需要的數(shù)據(jù)源，對(duì)每條數(shù)據(jù)（對(duì)應(yīng)樹節(jié)點(diǎn)）設(shè)置checked屬性，然后再前臺(tái)頁(yè)面重新加載樹，這種操作速度要快得多。

$.ajax({
   type: "Get",
   url: "/Model/GetRelationModelTreeData?designId=" + treeNode.id + "&t=" + new Date(),
   success: function (data) {
    //$.each(data.result, function (i, item) {
    // var node = modelTree.getNodeByParam("id", item, null);
    // modelTree.checkNode(node, true, true);
    //});
    $.fn.zTree.init($("#treejian"), setting1, data.result); //改為重新加載，比js循環(huán)勾選速度要快。
   }
  });

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: