欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery樹形控件zTree使用小結

 更新時間：2016年08月02日 10:23:44   作者：Fonour  
這篇文章主要為大家詳細介紹了jQuery樹形控件zTree使用方法，zTree樹插件的基本使用方法，感興趣的小伙伴們可以參考一下

0 zTree簡介 

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

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

0.1 zTree文件介紹
 從zTree官網(wǎng)下載的zTree包括以下組成部分 

•metroStyle文件夾：zTree的metro風格樣式相關文件（圖片及css樣式表）。
•zTreeStyle文件夾：zTree的標準風格樣式文件夾（圖片及css樣式表）
•js文件：zTree.all.js是完整的js庫，可單純加載此文件實現(xiàn)所有zTree功能，ztree.core、ztree.excheck、ztree.exedit、ztree.exhide是對ztree按照功能進行的分割，分別對應基本功能、復選功能、編輯功能、顯隱功能。 

1 zTree的基本使用

1.0 zTree的創(chuàng)建
在頁面中添加對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ù)屬性，此處使用標準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，三個參數(shù)一次分別是容器(zTree 的容器 className 別忘了設置為 "ztree")、參數(shù)配置、數(shù)據(jù)源
 });
 </SCRIPT>
</HEAD>
<BODY>
 <div>
 <ul id="treeDemo" class="ztree"></ul> 
 </div>
</BODY>
</HTML>

運行結果如下

 

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

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

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

1.2 zTree的數(shù)據(jù)格式
 zTree的每一個節(jié)點都是一個treeNode對象，treeNode對象經(jīng)常用到的屬性和方法如下： 

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

zTree的數(shù)據(jù)源一般有標準數(shù)據(jù)格式、簡單數(shù)據(jù)格式兩種，標準數(shù)據(jù)格式通過指定節(jié)點的chidren屬性構建層級關系，而簡單數(shù)據(jù)格式根據(jù)根據(jù)id，pid屬性構建層級關系，我們在應用開發(fā)中使用關系型數(shù)據(jù)庫，一般采用的都是簡單數(shù)據(jù)格式。
 標準數(shù)據(jù)格式

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

簡單數(shù)據(jù)格式

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

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

1.3 zTree的常用方法
zTree的主要操作方法介紹如下 
獲取zTree對象：var treeObj = $.fn.zTree.getZTreeObj("tree");
增加節(jié)點：addNodes(parentNode,index,newNodes,isSlient)

parentNode:指定的父節(jié)點，如果增加根節(jié)點，請設置 parentNode 為 null 即可

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

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

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

 勾選或取消勾選全部節(jié)點：checkAllNodes(checked);
 checked參數(shù)為true時全部勾選，為false時全部取消勾選。
 勾選或取消勾選單個節(jié)點：checkNode(node, checked, checkedTypeFlag，callbackFlag);
 node：要進行操作的節(jié)點
 checked：為true勾選，為false取消勾選
 checkeTypeFlag:為true表示對當前結點的子節(jié)點及父節(jié)點進行勾選狀態(tài)的聯(lián)動，為false不聯(lián)動
 callbackFlag:為true時表示執(zhí)行beforeOnCheck和onCheck事件的回調(diào)函數(shù)，為false不執(zhí)行
 編輯節(jié)點
 edit(node);  使節(jié)點處于編輯狀態(tài)，必須引用jquery.ztree.exedit 擴展。
 展開或折疊全部節(jié)點：expandAll(expand);
 expand為true是展開所有節(jié)點，為false是折疊所有節(jié)點。
 根據(jù)節(jié)點屬性查找結點：getNodesByParam(key,value, parentNode);
 key:屬性名
 value:屬性值
 parentNode:是否在指定節(jié)點下查找，為null表示整個樹查找。
 獲取被勾選或未被勾選的節(jié)點集合：getCheckedNodes(checked);
 checked為true表示獲取所有被勾選的節(jié)點集合，為false表示所有未被勾選的節(jié)點集合
 獲取輸入框勾選狀態(tài)被改變的節(jié)點集合：getChangeCheckedNodes()

2 zTree的常用操作
2.0 ajax請求數(shù)據(jù)并創(chuàng)建zTree 

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

后臺代碼如下，可以根據(jù)需要返回你想要的任何數(shù)據(jù)，綁定到zTree上，然后通過treeNode.屬性名取到對應的值，實現(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é)點單擊操作
 節(jié)點單擊事件會捕獲事件對象e，zTree的唯一標識treeId，當前選中的節(jié)點對象treeNode三個參數(shù)。根據(jù)實際需求可獲取treeNode中包含的任何屬性數(shù)據(jù)，進行相關操作 

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

2.2 節(jié)點復選框事件 

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

function onCheck() {
  var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //獲取樹對象
  var nodes = treeObj.getChangeCheckedNodes(); //獲取勾選狀態(tài)改變的節(jié)點
  var designIds = [];
  var status = 0;     //定義初始勾選狀態(tài)為未勾選
  if (nodes[0].checked)
  status = 1;     //如果狀態(tài)改變節(jié)點為勾選狀態(tài)，說明當前操作是從未勾選變?yōu)橐压催x。
  $.each(nodes, function (i, item) {
  designIds.push(item.id);   //將狀態(tài)改變的節(jié)點id輸出到數(shù)組
   item.checkedOld = item.checked;  //這句話很關鍵，將節(jié)點的初始狀態(tài)置為當前狀態(tài)。否則每次勾選操作獲取狀態(tài)改變節(jié)點時只會跟樹初始化的狀態(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é)點是勾選還是為勾選進行相關邏輯操作。
    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 實現(xiàn)zTree的右鍵增刪改操作
首先定義右鍵彈出面板 

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

實現(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ù)鼠標位置顯示右鍵操作面板
  } else if (treeNode && !treeNode.noR) {
  zTree.selectNode(treeNode);
  showRMenu("node", event.clientX, event.clientY);
  }
  $("#treeZo").show();
 }
 //根據(jù)節(jié)點類型，控制右鍵操作菜單哪些可用哪些不可用
 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);
 }
 //單擊頁面其他位置 隱藏右鍵面板
 function onBodyMouseDown(event) { 
  if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
  rMenu.css({ "visibility": "hidden" });
  }
 }

新增節(jié)點 

 //增加節(jié)點
 function addTreeNode() {
  hideRMenu();
  var name = new Date().getTime(); //利用時間戳生成節(jié)點名稱，保證節(jié)點名稱唯一
  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é)點
  zTree.selectNode(node); //選中新增加的節(jié)點
  zTree.editName(node); //讓新增加的節(jié)點處于編輯狀態(tài)
 }

編輯節(jié)點

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

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

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

   }
  });
  }
 };

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

function removeTreeNode() {
  hideRMenu();
  var nodes = zTree.getSelectedNodes();
  if (nodes && nodes.length > 0) {
  if (nodes[0].children && nodes[0].children.length > 0) {
   alert("包含下級，無法刪除。");
  } else {
   if (confirm("該操作會將關聯(lián)數(shù)據(jù)同步刪除，是否確認刪除？") == 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 一些總結
 我們通常使用到樹形控件做授權或關聯(lián)類似的操作，一般會先全部取消勾選，然后根據(jù)選中的數(shù)據(jù)關聯(lián)對樹控件的復選框進行選中操作，在大數(shù)據(jù)量時，大約幾萬條數(shù)據(jù)，全部取消勾選+根據(jù)關聯(lián)數(shù)據(jù)勾選相關節(jié)點這個操作通過js執(zhí)行會很慢，這種情況建議在后臺通過關聯(lián)關系重新組織zTree需要的數(shù)據(jù)源，對每條數(shù)據(jù)（對應樹節(jié)點）設置checked屬性，然后再前臺頁面重新加載樹，這種操作速度要快得多。 

$.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)勾選速度要快。
  }
 });

更多關于ztree控件的內(nèi)容，請參考專題《jQuery插件ztree使用匯總》

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論