zTree jQuery 樹插件的使用(實(shí)例講解)

<link rel="stylesheet" href="./zTree_v3-master/css/zTreeStyle/zTreeStyle.css" rel="external nofollow" >
<script type="text/javascript" src="./jquery-1.9.1.js"></script>
<script type="text/javascript" src="./zTree_v3-master/js/jquery.ztree.all.min.js"></script>

<div class="box">
 <ul id="treeDemo" class="ztree"></ul>
 <ul id="ulright">
 <li style="text-align: center;background-color: #ddd;border-bottom: 1px dashed">已選擇</li>
 </ul>
 </div>

ul,li,body{
 margin: 0;
 padding: 0;
 }
 .ztree li span.node_name {
 font-size: 16px;
 }
 .box{
 width: 500px;
 margin:10px auto;
 border:3px solid #ccc;
 padding: 20px;
 border-bottom: none;
 }
 #treeDemo{
 width: 200px;
 display: inline-block;
 background-color: #f1f1f1;
 min-height: 200px;
 }
 #ulright{
 width: 200px;
 margin-left: 50px;
 min-height: 200px;
 border:1px solid #ccc;
 display: inline-block;
 vertical-align: top;
 background-color: #eeeee8;
 }
 #ulright li{
 width: 100%;
 height: 30px;
 list-style: none;
 line-height: 30px;
 margin-bottom: 3px;
 background-color: #00b6ba;
 padding-left: 10px;
 box-sizing: border-box;

 }


 /**/
 .ztree li a.curSelectedNode{
 background-color: transparent;
 border:#00b6ba;
 }
 .ztree li span.node_name{
 font-size: 18px;
 line-height: 18px;
 color: #000;
 }
 .ztree li a{
 padding: 5px;
 vertical-align: middle;
 }
 .ztree li a:hover{
 text-decoration: none;
 }
 .ztree li span.button.chk{
 margin: 9px 3px;
 }

//遞歸找到所有節(jié)點(diǎn)(非父節(jié)點(diǎn))
function getAllChildrenNodes(treeNode,result){
 if (treeNode.isParent) {
 var childrenNodes = treeNode.children;
 if (childrenNodes) {
 for (var i = 0; i < childrenNodes.length; i++) {
 if(!childrenNodes[i].children){
 result.push(childrenNodes[i].name);
 }
 result = getAllChildrenNodes(childrenNodes[i], result);
 }
 }
 }
 return result;
}
var parames = 3;
//zTree的所有配置
var setting = {
 //zTree 的唯一標(biāo)識，初始化后，等于 用戶定義的 zTree 容器的 id 屬性值。
 treeId:"",
 //zTree 容器的 jQuery 對象，主要功能：便于操作,內(nèi)部參數(shù),不可修改
 treeObj:null,
 //異步請求數(shù)據(jù)配置;當(dāng)父節(jié)點(diǎn)沒有子節(jié)點(diǎn)時(shí);點(diǎn)擊此父節(jié)點(diǎn)會觸發(fā)請求
 async:{
 //打開此功能
 enable: true,
 url:"./zTreeDemoV9.0SimpleFromV10.0.php",
 type:"post",
 //發(fā)送的父級id的字段定義;如修改,遵循格式autoParam: ["id=parentId"]
 autoParam: ["id"],
 //其他需要提交的參數(shù)["name","topic","key","ss"]轉(zhuǎn)換后格式為name=topic&key=ss
 otherParam:["json",parames || 1,"test","2"],
 dataType:"json",
 contentType: "application/x-www-form-urlencoded",
 //ajax請求后的數(shù)據(jù)預(yù)處理函數(shù)
 dataFilter: function(treeId,parentNode,responseData){
 for(var i=0;i<responseData.length;i++){
 responseData[i] = JSON.parse(responseData[i])
 }
 return responseData;
 }
 },
 //數(shù)據(jù)配置
 data: {
 simpleData: {
 enable: true,
 idKey: "id", //修改默認(rèn)的ID為自己的id
 pIdKey: "pid", //修改默認(rèn)父級ID為自己數(shù)據(jù)的父級id
 rootPId: 0 //根節(jié)點(diǎn)的父節(jié)點(diǎn)id
 }
 },
 //視圖配置
 view: {
 //是否顯示節(jié)點(diǎn)前的圖標(biāo)
 showIcon: false,
 //節(jié)點(diǎn)上a標(biāo)簽的樣式
 fontCss: {
 }
 },
 //選框配置
 check: {
 //啟用復(fù)選框
 enable: true,
 //chkStyle:"radio"
 //復(fù)選框父子級選擇聯(lián)動設(shè)置
 chkboxType: { "Y": "ps", "N": "ps" }
 },
 //事件配置
 callback: {
 //點(diǎn)擊復(fù)選框之前的事件
 beforeCheck:function(treeId, treeNode){//如果節(jié)點(diǎn)是父節(jié)點(diǎn),并且勾選時(shí)沒有子節(jié)點(diǎn),則不允許勾選;針對父節(jié)點(diǎn)沒有展開,則沒有異步加載子節(jié)點(diǎn),此情況禁止點(diǎn)擊父節(jié)點(diǎn)全選子節(jié)點(diǎn)的操作
 if(treeNode.isParent && !treeNode.children){
 return false;
 }
 },
 //回調(diào)錯(cuò)誤事件
 onAsyncError: function(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown){
 alert("初始化節(jié)點(diǎn)數(shù)據(jù)失敗,請稍后重試");
 },
 //回調(diào)成功事件
 onAsyncSuccess: function(event, treeId, treeNode, resData){
 var zTree = $.fn.zTree.getZTreeObj("treeDemo");
 console.log("數(shù)據(jù)加載成功");
 var count = (treeNode.children.length);
 //加載成功后;在節(jié)點(diǎn)后面顯示此父節(jié)點(diǎn)下有幾個(gè)一級子節(jié)點(diǎn)
 $(".ztree").find("a[title="+treeNode.name+"]").find("span[class='node_name']").html(treeNode.name+"<span>("+count+")</span>");
 },
 //父節(jié)點(diǎn)展開時(shí)的事件
 onExpand: function(event, treeId, treeNode){
 //zTree對象
 var zTree = $.fn.zTree.getZTreeObj("treeDemo");
 //獲取點(diǎn)擊的id
 var nowId = treeNode.id;
 //獲取所有節(jié)點(diǎn)
 var allNodes = zTree.getNodes();
 //獲取點(diǎn)擊節(jié)點(diǎn)的層級
 var level = treeNode.level;
 //定義過濾函數(shù);獲取節(jié)點(diǎn)層級與點(diǎn)擊節(jié)點(diǎn)層級相同并且為父節(jié)點(diǎn)的節(jié)點(diǎn)
 function filter(node) {
 return (node.level == treeNode.level && node.isParent);
 }
 //獲得點(diǎn)擊節(jié)點(diǎn)同級的父節(jié)點(diǎn)的集合
 var sameLevelNodes = zTree.getNodesByFilter(filter);
 //遍歷同級節(jié)點(diǎn)集合
 for(var i=0;i<sameLevelNodes.length;i++){
 //將非被點(diǎn)擊父節(jié)點(diǎn)收起;實(shí)現(xiàn)手風(fēng)琴效果
 if(sameLevelNodes[i].id != nowId){
 zTree.expandNode(sameLevelNodes[i], false, true, true);
 }
 }
 },
 //點(diǎn)擊事件
 onClick: function(e, treeId, treeNode, clickFlag) {
 //tree實(shí)例
 var zTree = $.fn.zTree.getZTreeObj("treeDemo");
 //點(diǎn)擊文字關(guān)聯(lián)復(fù)選框
 //如果不是父節(jié)點(diǎn),則關(guān)聯(lián),或者是父節(jié)點(diǎn),但展開狀態(tài)位true是,也關(guān)聯(lián);
 if(!treeNode.isParent || (treeNode.isParent && treeNode.open)){
 zTree.checkNode(treeNode, !treeNode.checked, true);//點(diǎn)擊文字關(guān)聯(lián)復(fù)選框
 }
 //點(diǎn)擊文字展開當(dāng)前節(jié)點(diǎn)
 zTree.expandNode(treeNode, true, true, true);
 // zTree.reAsyncChildNodes(treeNode, "refresh");//強(qiáng)行異步加載(存在子節(jié)點(diǎn)也進(jìn)行加載)
 //手風(fēng)琴效果;直接調(diào)用onExpand
 zTree.setting.callback.onExpand(e, treeId, treeNode);

 //點(diǎn)擊節(jié)點(diǎn)名稱和勾選節(jié)點(diǎn)前面的復(fù)選框邏輯相同;
 //直接在onClick里面調(diào)用onCheck函數(shù);并傳入所需參數(shù)
 zTree.setting.callback.onCheck(e, treeId, treeNode);
 },
 //點(diǎn)擊復(fù)選框事件
 onCheck: function(e, treeId, treeNode) {
 //獲取右側(cè)ul內(nèi)所有l(wèi)i標(biāo)簽;用于比較當(dāng)前選擇復(fù)選框在右側(cè)是否一斤存在
 var rightLi = $("#ulright").find("li");
 //選中的是底層節(jié)點(diǎn);
 if(!treeNode.isParent){
 //選中狀態(tài),加入到右側(cè)
 if(treeNode.checked){
 //遍歷右側(cè)li,如果選中的已經(jīng)存在;return
 for(var i=0;i<rightLi.length;i++){
 if($(rightLi[i]).attr("title") == treeNode.name){
 return;
 }
 }
 // 創(chuàng)建li 追加li
 var addLi = $("<li title="+treeNode.name+"><span></span>");
 addLi.find("span").text(treeNode.name);
 addLi.animate({
 width:"100%",
 height:"30"
 },400)
 addLi.appendTo($("#ulright"));
 //如果點(diǎn)擊的節(jié)點(diǎn)存在connect字段;判斷復(fù)選框狀態(tài)加入到右側(cè)ul或刪除
 if(treeNode.connect){
 //遍歷右側(cè)li,如果選中的已經(jīng)存在;return
 for(var i=0;i<rightLi.length;i++){
 if($(rightLi[i]).attr("title") == treeNode.connect){
 return;
 }
 }
 // 創(chuàng)建li 追加li
 var addLi = $("<li title="+treeNode.connect+"><span></span>");
 addLi.find("span").text(treeNode.connect);
 addLi.animate({
 width:"100%",
 height:"30"
 },400)
 addLi.appendTo($("#ulright"));
 }
 //將被勾選的節(jié)點(diǎn)背景顏色更改
 $("#treeDemo").find("a[title="+treeNode.name+"]").css("backgroundColor","#00b6ba");
 //非選中狀態(tài),刪除
 }else{
 //將右側(cè)的次節(jié)點(diǎn)對應(yīng)的li刪除
 $("#ulright").find("li[title="+treeNode.name+"]").animate({
 width:"0%",
 height:"0"
 },400,function(){
 $("#ulright").find("li[title="+treeNode.name+"]").remove();
 })
 //取消此節(jié)點(diǎn)的背景顏色
 $("#treeDemo").find("a[title="+treeNode.name+"]").css("backgroundColor","");
 }
 //選中的是父節(jié)點(diǎn);獲取所有子節(jié)點(diǎn)(非父節(jié)點(diǎn)),判斷復(fù)選框狀態(tài)加入到右側(cè)ul或刪除
 }else{
 //調(diào)用遞歸函數(shù);獲取所有非父級子節(jié)點(diǎn)數(shù)組集合
 var addNodesArray = getAllChildrenNodes(treeNode,[]);
 //是選中狀態(tài),加入到右側(cè)ul
 if(treeNode.checked){
 //定義存儲右側(cè)li的數(shù)組
 var rightLiArray = [];
 $("#ulright li").each(function(i,v){
 rightLiArray.push($(v).attr("title"))
 })
 rightLiArray = rightLiArray.slice(1);
 //遍歷勾選的數(shù)組集合
 for(var i=0;i<addNodesArray.length;i++){
 //判斷此節(jié)點(diǎn)是否在右側(cè)ul內(nèi);不存在則加入
 if(rightLiArray.indexOf(addNodesArray[i]) == -1){
 //創(chuàng)建li 追加li
 var addLi = $("<li title="+addNodesArray[i]+"><span>"+addNodesArray[i]+"</span>");
 addLi.animate({
 width:"100%",
 height:30
 },400)
 addLi.appendTo($("#ulright"));
 }
 //將節(jié)點(diǎn)背景顏色修改
 $("#treeDemo").find("a[title="+addNodesArray[i]+"]").css("backgroundColor","#00b6ba");
 }
 //是非選中狀態(tài),刪除
 }else{
 //遍歷節(jié)點(diǎn),執(zhí)行刪除操作
 for(var i=0;i<addNodesArray.length;i++){
 $("#ulright").find("li[title="+addNodesArray[i]+"]").animate({
 width:"0%",
 height:0
 },function(){
 $(this).css("display","none");
 $(this).remove();
 })
 //還原背景顏色
 $("#treeDemo").find("a[title="+addNodesArray[i]+"]").css("backgroundColor","");
 }
 }
 }
 },
 }

};
//zTree的節(jié)點(diǎn)信息;可一次性全部加載;可試試異步請求
var zNodes = [{
 name: "數(shù)據(jù)表",//名稱
 id: 4,//id,子元素的pid
 isParent:true,//是否為父節(jié)點(diǎn),默認(rèn)為false
 pid:0//父節(jié)點(diǎn)id;data中的rootPId;
 },{
 name: "測試表",
 id: 1,
 isParent:true,
 pid:0
 },{
 name: "信息表",
 id: 2,
 isParent:true,
 pid:0
 },{
 name: "作廢表",
 id: 3,
 isParent:true,
 pid:0
 }];
$(document).ready(function() {
 //初始化zTree; zTree容器的jquery對象/ 配置/ 節(jié)點(diǎn)
 $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

<?php

$pId = $_POST['id'];

if($pId == 4){
 $array = array('{"name":"數(shù)據(jù)表_一","id":"1_1","pid":"0"}','{"name":"數(shù)據(jù)表_二","id":"1_2","pid":"0"}','{"name":"數(shù)據(jù)表_三","id":"1_3","pid":"0"}','{"name":"數(shù)據(jù)表_四","id":"1_4","pid":"0"}','{"name":"數(shù)據(jù)表_五","id":"1_5","pid":"0"}');
}else if($pId == 1){
 $array = array('{"name":"測試表_一","id":"2_1","pid":"1"}','{"name":"測試表_二","connect":"測試表_一","id":"2_2","pid":"1"}','{"name":"測試表_三","id":"2_3","pid":"1"}','{"name":"測試表_四","id":"2_4","pid":"1"}','{"name":"測試表_五","id":"2_5","pid":"1"}');
}else if($pId == 2){
 $array = array('{"name":"信息表_一","id":"3_1","pid":"3"}','{"name":"信息表_二","id":"3_2","pid":"3"}','{"name":"信息表_三","id":"3_3","pid":"3"}','{"name":"信息表_四","id":"3_4","pid":"3"}','{"name":"信息表_五","id":"3_5","pid":"3"}','{"name":"信息表_五_一","id":"3_5_1","pid":"3_5"}','{"name":"信息表_五_二","id":"3_5_2","pid":"3_5"}','{"name":"信息表_三_一","id":"3_3_1","pid":"3_3"}','{"name":"信息表_三_二","id":"3_3_2","pid":"3_3"}','{"name":"信息表_三_三","id":"3_3_3","pid":"3_3"}');
}else if($pId == 3){
 $array = array('{"name":"作廢表_一","id":"4_1","pid":"3"}','{"name":"作廢表_二","id":"4_2","pid":"3"}','{"name":"作廢表_三","id":"4_3","pid":"3"}');
}

echo json_encode($array);