<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é)點(非父節(jié)點)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é)點沒有子節(jié)點時;點擊此父節(jié)點會觸發(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é)點的父節(jié)點id    }  },  //視圖配置  view: {    //是否顯示節(jié)點前的圖標(biāo)    showIcon: false,    //節(jié)點上a標(biāo)簽的樣式    fontCss: {    }  },  //選框配置  check: {    //啟用復(fù)選框    enable: true,    //chkStyle:"radio"    //復(fù)選框父子級選擇聯(lián)動設(shè)置    chkboxType: { "Y": "ps", "N": "ps" }  },  //事件配置  callback: {    //點擊復(fù)選框之前的事件    beforeCheck:function(treeId, treeNode){//如果節(jié)點是父節(jié)點,并且勾選時沒有子節(jié)點,則不允許勾選;針對父節(jié)點沒有展開,則沒有異步加載子節(jié)點,此情況禁止點擊父節(jié)點全選子節(jié)點的操作      if(treeNode.isParent && !treeNode.children){        return false;      }    },    //回調(diào)錯誤事件    onAsyncError: function(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown){      alert("初始化節(jié)點數(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é)點后面顯示此父節(jié)點下有幾個一級子節(jié)點      $(".ztree").find("a[title="+treeNode.name+"]").find("span[class='node_name']").html(treeNode.name+"<span>("+count+")</span>");    },    //父節(jié)點展開時的事件    onExpand: function(event, treeId, treeNode){      //zTree對象      var zTree = $.fn.zTree.getZTreeObj("treeDemo");      //獲取點擊的id      var nowId = treeNode.id;      //獲取所有節(jié)點      var allNodes = zTree.getNodes();      //獲取點擊節(jié)點的層級      var level = treeNode.level;      //定義過濾函數(shù);獲取節(jié)點層級與點擊節(jié)點層級相同并且為父節(jié)點的節(jié)點      function filter(node) {        return (node.level == treeNode.level && node.isParent);      }      //獲得點擊節(jié)點同級的父節(jié)點的集合      var sameLevelNodes = zTree.getNodesByFilter(filter);      //遍歷同級節(jié)點集合      for(var i=0;i<sameLevelNodes.length;i++){        //將非被點擊父節(jié)點收起;實現(xiàn)手風(fēng)琴效果        if(sameLevelNodes[i].id != nowId){          zTree.expandNode(sameLevelNodes[i], false, true, true);        }      }    },    //點擊事件    onClick: function(e, treeId, treeNode, clickFlag) {      //tree實例      var zTree = $.fn.zTree.getZTreeObj("treeDemo");      //點擊文字關(guān)聯(lián)復(fù)選框      //如果不是父節(jié)點,則關(guān)聯(lián),或者是父節(jié)點,但展開狀態(tài)位true是,也關(guān)聯(lián);      if(!treeNode.isParent || (treeNode.isParent && treeNode.open)){        zTree.checkNode(treeNode, !treeNode.checked, true);//點擊文字關(guān)聯(lián)復(fù)選框      }      //點擊文字展開當(dāng)前節(jié)點      zTree.expandNode(treeNode, true, true, true);      // zTree.reAsyncChildNodes(treeNode, "refresh");//強行異步加載(存在子節(jié)點也進(jìn)行加載)      //手風(fēng)琴效果;直接調(diào)用onExpand      zTree.setting.callback.onExpand(e, treeId, treeNode);      //點擊節(jié)點名稱和勾選節(jié)點前面的復(fù)選框邏輯相同;      //直接在onClick里面調(diào)用onCheck函數(shù);并傳入所需參數(shù)      zTree.setting.callback.onCheck(e, treeId, treeNode);    },    //點擊復(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é)點;      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"));          //如果點擊的節(jié)點存在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é)點背景顏色更改          $("#treeDemo").find("a[title="+treeNode.name+"]").css("backgroundColor","#00b6ba");        //非選中狀態(tài),刪除        }else{          //將右側(cè)的次節(jié)點對應(yīng)的li刪除          $("#ulright").find("li[title="+treeNode.name+"]").animate({            width:"0%",            height:"0"          },400,function(){            $("#ulright").find("li[title="+treeNode.name+"]").remove();          })          //取消此節(jié)點的背景顏色          $("#treeDemo").find("a[title="+treeNode.name+"]").css("backgroundColor","");        }      //選中的是父節(jié)點;獲取所有子節(jié)點(非父節(jié)點),判斷復(fù)選框狀態(tài)加入到右側(cè)ul或刪除      }else{        //調(diào)用遞歸函數(shù);獲取所有非父級子節(jié)點數(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é)點是否在右側(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é)點背景顏色修改            $("#treeDemo").find("a[title="+addNodesArray[i]+"]").css("backgroundColor","#00b6ba");          }        //是非選中狀態(tài),刪除        }else{          //遍歷節(jié)點,執(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é)點信息;可一次性全部加載;可試試異步請求var zNodes = [{      name: "數(shù)據(jù)表",//名稱      id: 4,//id,子元素的pid      isParent:true,//是否為父節(jié)點,默認(rèn)為false      pid:0//父節(jié)點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é)點  $.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);