jQuery：ztree樹結構外掛具體應用(根據資料渲染樹形結構)
阿新 • • 發佈：2019-02-15
var roleStr = '' //點選配置樹形結構彈框事件 tableData.peizhi = function(data){ layer.open({ type: 1, title: '角色管理', content: $('#ztree'), area: ['60%', '500px'], success: function(index, layero){ //do something $('#uid').val(data.uid) roleStr = $('#uid').val() } }); };table = renderTable.render(tableData,['30%', '460px']); var setting = { data:{ simpleData:{ enable:true, idKey:"id", pidKey:"pid", rootPid:0 } }, check: { enable: true }, callback: { beforeCheck: beforeCheck, onCheck: onCheck, onCollapse:onCollapse, } }; vartreeNodes = []; var userEmpId =[]; var userId = []; var newList = [] //一切準備好後初始化樹 $(document).ready(function() { //初始化zNodes陣列——treeNodes $(function () { //從後臺獲取json串的連線 var url = "/dept/getList?page=1&limit=99999"; var URLmsg $.ajax({ url: '/user/getList?page=1&limit=99999', method:'get', success:function(msg){ msg.data.forEach(function(ele){ userEmpId.push(ele.empId); userId.push(ele.uid) }) } }) $.ajax({ url: url, method: 'get', //這個是傳到後臺的資料，後臺就是根據它獲取zTree結點資訊的，它是一個json格式的串 success: function (data) { var layerDelay = layer.load(1); $.ajax({ url: "/emp/getLEList?page=1&limit=99999", method: 'get', success: function (rowdata) { //新增子節點到指定的父節點 layer.close(layerDelay); //資料整合 var empList = rowdata.data; // for(var i=0;i<empList.length;i++){ for(var j=0;j<userEmpId.length;j++){ if(empList[i].id==userEmpId[j]){ empList[i].id = userId[j] newList.push(empList[i]) } } } var numFi =11; var nnmFi = 111; var nnmSc = 1111; var numSc = 32; var num = 1; var listL = []; var msg = data.data; msg.forEach(function(ele){ if(ele.code.length==2){ treeNodes.push({ "isParent": 'true', "id":num++, "name":ele.name, "pId":0, "dbj":ele.code }); } else if(ele.code.length==4&&ele.code.substr(0,2)=='GM'){ treeNodes.push({ "isParent": 'true', "id":numFi++, "name":ele.name, "pId":1, "dbj":ele.code }); listL.push(ele.code) } else if(ele.code.length==4&&ele.code.substr(0,2)=='HM'){ treeNodes.push({ "isParent": 'true', "id":numSc++, "name":ele.name, "pId":2, "dbj":ele.code }); } else if(ele.code.length==8){ treeNodes.push({ "isParent": 'true', "id": nnmSc++, "name": ele.name, "pId": 126, "dbj": ele.code }); } }); for(var i=11;i<listL.length+11;i++){ msg.forEach(function (ele) { if(ele.code.length==6&&ele.code.substr(0,4)==ele.upcode&&listL[i-11]==ele.upcode) { treeNodes.push({ "isParent": 'true', "id": nnmFi++, "name": ele.name, "pId": i, "dbj": ele.code }); } }) }; for (var i = 0; i < newList.length; i++) { if (newList[i].dept.code.length == 2&&newList[i].dept.code=='GM') { treeNodes.push({ "isParent": 'false', "id": i, "name": newList[i].name, "pId": 1, "dbj": newList[i].id }); } else if(newList[i].dept.code.length == 2&&newList[i].dept.code=='HM'){ treeNodes.push({ "isParent": 'false', "id": i, "name": newList[i].name, "pId": 2, "dbj": newList[i].id }); } } for(var j=0;j<treeNodes.length;j++){ for (var i = 0; i < newList.length; i++) { if (newList[i].dept.code.length == 4&&newList[i].dept.code==treeNodes[j].dbj) { treeNodes.push({ "isParent": 'false', "id":nnmFi++, "name": newList[i].name, "pId": treeNodes[j].id, "dbj": newList[i].id }); } else if((newList[i].dept.code.length == 6&&newList[i].dept.code==treeNodes[j].dbj)||(newList[i].dept.code.length == 8&&newList[i].dept.code==treeNodes[j].dbj)){ treeNodes.push({ "isParent": 'false', "id":nnmSc++, "name": newList[i].name, "pId": treeNodes[j].id, "dbj": newList[i].id }); } } } $.fn.zTree.init($("#treeDemo"), setting,treeNodes); var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var nodes = treeObj.getNodes(); for (var i = 0; i < nodes.length; i++) { //設定節點展開 treeObj.expandNode(nodes[i], true, false, true); } // treeObj.expandAll(true); //按鈕提交事件 // submitBtn() } }); } }); }); }); var str=[]; //按鈕提交事件 var imBtn = document.getElementById('imBtn'); imBtn.addEventListener('click',function(){ var xstr = unique(str).join(',') // var xstr = unique(str) layer.confirm( '是否確認提交？', {btn: ['確定','取消']}, function(){ $.ajax({ url: '/role/saveUserRole', method: 'get', //data:{userUids:JSON.stringify(xstr),roleUid:JSON.stringify(roleStr)}, data:{userUids:xstr,roleUid:roleStr}, }).done(function(msg){ if(msg.code==1001){ return layer.alert(msg.msg) }else if(msg.code==9000){ return layer.alert(msg.msg) } layer.closeAll(); layer.msg('操作成功'); }) } ) }) function unique(arr){ var len = arr.length; var result = [] for(var i=0;i<len;i++){ var flag = true; for(var j = i;j<arr.length-1;j++){ if(arr[i]==arr[j+1]){ flag = false; break; } } if(flag){ result.push(arr[i]) } } return result; } //展開監聽事件 // function onExpand(event, treeId, treeNode) { // $('#'+treeNode.tId+' ul').html(''); // var URLmsg // // 判斷是否父節點 // // if (!treeNode.isParent) { // //alert("treeId自動編號：" + treeNode.tId + ", 節點id是：" + treeNode.id + ", 節點文字是：" + treeNode.name); // $.ajax({ // // url: "../json/table.json",//請求的action路徑 // url:"/dept/getList?page=1&limit=99999", // method:'get', // // data: {"pid": treeNode.id}, // success: function (rowdata) { //新增子節點到指定的父節點 // var list = rowdata.data; // // var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); // // var data = []; // // URLmsg=treeNode.dbj // $.ajax({ // url: "/emp/getLEList?deptCode="+URLmsg, // method: 'get', // success: function (msg) { //新增子節點到指定的父節點 // var empList = msg.data; // empList.forEach(function(ele){ // data.push({ // "isParent": 'false', // "id": ele.id, // "name": ele.name, // "pId": ele.id // }); // }); // treeObj.addNodes(treeNode, data, true);// 如果是根節點，那麼就在null後面載入資料 // treeObj.expandNode(treeNode, true, false, false);// 將新獲取的子節點展開 // } // }); // //第一層級門店 // if (treeNode.isFirstNode && treeNode.parentTId == null) { // // treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel }); // list.forEach(function (ele) { // if (ele.code.length == 4 && ele.code.substr(0, 2) == treeNode.pId) { // data.push({ // "isParent": 'true', // "id": ele.uid, // "name": ele.name, // "pId": ele.code // }); // } // }); // treeObj.addNodes(treeNode, data, true);// 如果是根節點，那麼就在null後面載入資料 // treeObj.expandNode(treeNode, true, false, false);// 將新獲取的子節點展開 // } else if (treeNode.isLastNode) { // list.forEach(function (ele) { // if (ele.code.length == 4 && ele.code.substr(0, 2) == treeNode.pId) { // data.push({ // "isParent": 'true', // "id": ele.uid, // "name": ele.name, // "pId": ele.code // }); // } // }); // treeObj.addNodes(treeNode, data, true);// 如果是根節點，那麼就在null後面載入資料 // treeObj.expandNode(treeNode, true, false, false);// 將新獲取的子節點展開 // } // //第二層級門店 // else if (treeNode.parentTId == "treeDemo_1") { // list.forEach(function (ele) { // if (ele.code.length == 6 && ele.code.substr(0, 4) == treeNode.pId) { // data.push({ // "isParent": 'true', // "id": ele.uid, // "name": ele.name, // "pId": ele.code // }); // } // }); // treeObj.addNodes(treeNode, data, true);// 如果是根節點，那麼就在null後面載入資料 // treeObj.expandNode(treeNode, true, false, false);// 將新獲取的子節點展開 // } // //第三層級門店 // else if (treeNode.parentTId == "treeDemo_1") { // list.forEach(function (ele) { // if (ele.code.length == 8 && ele.code.substr(0, 6) == treeNode.pId) { // data.push({ // "isParent": 'true', // "id": ele.uid, // "name": ele.name, // "pId": ele.code // }); // } // }); // treeObj.addNodes(treeNode, data, true);// 如果是根節點，那麼就在null後面載入資料 // treeObj.expandNode(treeNode, true, false, false);// 將新獲取的子節點展開 // } // else { // treeObj.reAsyncChildNodes(treeNode, "refresh"); // } // } // // }) // showLog("[ "+getTime()+" onExpand ] " + treeNode.name); // } function onCollapse(event, treeId, treeNode) { showLog("[ "+getTime()+" onCollapse ] " + treeNode.name); } function expandNode(e) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), type = e.data.type, nodes = zTree.getSelectedNodes(); if (type.indexOf("All")<0 && nodes.length == 0) { alert("請先選擇一個父節點"); } if (type == "expandAll") { zTree.expandAll(true); } else if (type == "collapseAll") { zTree.expandAll(false); } else { var callbackFlag = $("#callbackTrigger").attr("checked"); for (var i=0, l=nodes.length; i<l; i++) { zTree.setting.view.fontCss = {}; if (type == "expand") { zTree.expandNode(nodes[i], true, null, null, callbackFlag); } else if (type == "collapse") { zTree.expandNode(nodes[i], false, null, null, callbackFlag); } else if (type == "toggle") { zTree.expandNode(nodes[i], null, null, null, callbackFlag); } else if (type == "expandSon") { zTree.expandNode(nodes[i], true, true, null, callbackFlag); } else if (type == "collapseSon") { zTree.expandNode(nodes[i], false, true, null, callbackFlag); } } } } function beforeCheck(treeId, treeNode) { className = (className === "dark" ? "":"dark"); showLog("[ "+getTime()+" beforeCheck ] " + treeNode.name ); return (treeNode.doCheck !== false); } function onCheck(e, treeId, treeNode) { if(treeNode.checked==false){ str = []; } var treeObj=$.fn.zTree.getZTreeObj("treeDemo"), nodes=treeObj.getCheckedNodes(true); for(var i=0;i<nodes.length;i++){ if(nodes[i].isParent==false&&nodes[i].checked==true){ str.push(nodes[i].dbj) } // return str; //獲取選中節點的值 } //如果被選事件 if(treeNode.checked==true&&treeNode.isParent==false){ str.push(treeNode.dbj) }else if(treeNode.checked==false&&treeNode.isParent==false){ for(var i=0;i<str.length;i++){ if(treeNode.dbj==str[i]){ str.splice(i,1) } } } return str showLog("[ "+getTime()+" onCheck ] " + treeNode.name ); } function filter(treeId, parentNode, childNodes) { if (!childNodes) return null; for (var i=0, l=childNodes.length; i<l; i++) { childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.'); } return childNodes; } var log, className = "dark"; function showLog(str) { if (!log) log = $("#log"); log.append("<li class='"+className+"'>"+str+"</li>"); if(log.children("li").length > 8) { log.get(0).removeChild(log.children("li")[0]); } } function getTime() { var now= new Date(), h=now.getHours(), m=now.getMinutes(), s=now.getSeconds(), ms=now.getMilliseconds(); return (h+":"+m+":"+s+ " " +ms); } function refreshNode(e) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), type = e.data.type, silent = e.data.silent, nodes = zTree.getSelectedNodes(); if (nodes.length == 0) { alert("請先選擇一個父節點"); } for (var i=0, l=nodes.length; i<l; i++) { zTree.reAsyncChildNodes(nodes[i], type, silent); if (!silent) zTree.selectNode(nodes[i]); } } function setAutoTrigger(e) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.setting.check.autoCheckTrigger = $("#autoCallbackTrigger").attr("checked"); $("#autoCheckTriggerValue").html(zTree.setting.check.autoCheckTrigger ? "true" : "false"); } function checkNode(e) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), type = e.data.type, nodes = zTree.getSelectedNodes(); if (type.indexOf("All")<0 && nodes.length == 0) { alert("請先選擇一個節點"); } if (type == "checkAllTrue") { zTree.checkAllNodes(true); } else if (type == "checkAllFalse") { zTree.checkAllNodes(false); } else { var callbackFlag = $("#callbackTrigger").attr("checked"); for (var i=0, l=nodes.length; i<l; i++) { if (type == "checkTrue") { zTree.checkNode(nodes[i], true, false, callbackFlag); } else if (type == "checkFalse") { zTree.checkNode(nodes[i], false, false, callbackFlag); } else if (type == "toggle") { zTree.checkNode(nodes[i], null, false, callbackFlag); }else if (type == "checkTruePS") { zTree.checkNode(nodes[i], true, true, callbackFlag); } else if (type == "checkFalsePS") { zTree.checkNode(nodes[i], false, true, callbackFlag); } else if (type == "togglePS") { zTree.checkNode(nodes[i], null, true, callbackFlag); } } } } $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting,treeNodes); $("#refreshNode").bind("click", {type:"refresh", silent:false}, refreshNode); $("#refreshNodeSilent").bind("click", {type:"refresh", silent:true}, refreshNode); $("#addNode").bind("click", {type:"add", silent:false}, refreshNode); $("#addNodeSilent").bind("click", {type:"add", silent:true}, refreshNode); $("#checkTrue").bind("click", {type:"checkTrue"}, checkNode); $("#checkFalse").bind("click", {type:"checkFalse"}, checkNode); $("#toggle").bind("click", {type:"toggle"}, checkNode); $("#checkTruePS").bind("click", {type:"checkTruePS"}, checkNode); $("#checkFalsePS").bind("click", {type:"checkFalsePS"},