樹形控件zTree使用小結

 zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。

官方提供了很好的API文檔和Demo 可以從如下地址下載：http://www.ztree.me/hunter/zTree.html

這段時間公司項目剛好用到了ztree，抽個時間總結一下。

準備工作

1、zTree v3.x 有 3 個 js 文件，一個 核心包 ( jquery.ztree.core-3.x.js )，兩個擴展包 -- 複選框功能包 ( jquery.ztree.excheck-3.x.js ) & 編輯功能包 ( jquery.ztree.exedit-3.x.js ),根據自己的需要進行引入

     2、引入zTreeStyle.css 文件，爲了儘量避免樣式衝突，將 zTree 容器的 className 設置爲 'ztree'

      3、引入樣式圖片

頁面佈局

<div>
   <ul id="treeDemo" class="ztree"></ul>
</div>

id 在樹的容器加載的時候會用到，class樣式引入時需要用到，所以這兩個千萬不能少

JS部分

一、生成樹 

   首先說明一下，ztree可以接受兩種數據格式：標準數據格式 和  簡單數據格式

//標準的 JSON 數據需要嵌套表示節點的父子包含關係
var nodes = [
	{name: "父節點1", children: [
		{name: "子節點1"},
		{name: "子節點2"}
	]}
];

//簡單模式的 JSON 數據需要使用 id / pId 表示節點的父子包含關係,若爲簡單模式，需要設置參數配置中 simpleData中enable爲true
var nodes = [
	{id:1, pId:0, name: "父節點1"},
	{id:11, pId:1, name: "子節點1"},
	{id:12, pId:1, name: "子節點2"}
];

初始化樹

<script>  
  var zTreeObj;
  var setting = {}; // zTree 的參數配置，後面詳解
  var zNodes = [  // zTree 的數據，此處使用標準json格式
  {
  name: "test1", open: true, children: [
  { name: "test1_1" }, { name: "test1_2" }]
 },
 {
  name: "test2", open: true, children: [
  { name: "test2_1" }, { name: "test2_2" }]
 }
 ];
   //初始化zTree，三個參數一次分別是容器、參數配置、數據源
 $(document).ready(function () {
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
})
 //若用ajax請求數據源，該語句寫在ajax返回success中執行即可;

以上初始化方法是將所有節點一次性加載出，也可以用異步加載的方式，即點擊父節點的時候加載出子節點

var initRoot = [{"id": "0", "isParent": true, "name": "根節點"}];//設置根節點
var setting = { // 其他參數配置，後面詳解
    async: {
        enable: true,//採用異步加載
        url : url,
	autoParam: ["id", "name"] //將需要作爲參數提交的屬性名稱
    }
};
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting,initRoot);//若根節點也用異步加載出，最後一個參數設置爲 null 即可

二、ztree的配置
zTree的配置採用Json格式，按照配置的類型分爲view（可視界面相關配置）、data（數據相關配置）、check（複選框相關配置）、callback（各類事件的回調函數配置）、async（zTree異步加載配置），以下是我們經常會使用到的一些配置及說明，其他詳細配置可以參考zTree官方API文檔的詳細介紹。

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

三、常用操作

1、點擊操作及獲取該節點相關信息

var setting ={ //配置中定義點單擊事件回調函數
        callback: {
            onClick: zTreeOnClick
        },
}
function zTreeOnClick(event, treeId, treeNode) {// event 標準的js event對象；treeId 對應ztree的treeid ;treeNode 被點擊的節點 JSON 數據對象
	alert(treeNode.id + ", " + treeNode.name);
	
	//判斷該節點是否爲葉節點
	 if (treeNode.isParent){
          alert("該節點不爲葉節點")
	}
	//獲取該節點的父節點
	var parentNode = treeNode.getParentNode();
	//獲取同級兄弟節點
    var brotherNodes = parentNode.children;
    

}

2、模糊搜索樹節點，並高亮顯示結果

var setting = {
	view: {
		fontCss: setHighlight // 一定要設置樣式，setHighlight是自定義方法
	}
};
var zTree = $.fn.zTree.getZTreeObj("tree");

//模糊搜索滿足條件的節點，該示例爲name值模糊搜索
function searchNode(value) {
    if (value == ""){return;}
    //獲取所有節點
    var allNodes = zTree.transformToArray(zTree.getNodes());
    //關閉原有搜索結果樣式
    for (var i = 0; i < allNodes.length; i ++) {
        allNodes[i].highlight = false;//取消高亮樣式
        zTree.updateNode(allNodes[i]);//更新樹節點上的樣式
    }
    // 先關閉所有節點
    zTree.expandAll(false);
    // 展開根節點（如果不展開根節點，下面的節點無法展開）
    zTree.expandNode(zTree.getNodes()[0],true);
    // 獲取與value匹配的節點
    var nodes = zTree.getNodesByParamFuzzy("name", value);
    //展開搜索到的節點
    for (var i = 0; i < nodes.length; i ++) {
            nodes[i].highlight=true;//添加樣式
            zTree.updateNode(nodes[i]);//更新樹節點上的樣式
            zTree.expandNode(nodes[i].getParentNode(),true);//展開節點    
    }
}

// 設置高亮字體
function setHighlight(treeId, treeNode) {
          return (treeNode.highlight) ? {color:"green", "font-weight":"bold", "background-color": "#ddd"} : {color:"#000", "font-weight":"normal"};
   }

需要注意的是，若用異步加載方式加載節點，未加載過的節點搜索不出來。