一.配置树参数
//1.获取setting值 function getSetting(){ var setting = { view: { dblClickExpand: true, selectedMulti : true,//可以多选 showLine: true }, check: { enable: true ,//显示复选框 chkStyle : "checkbox" }, data: { key: { title:"t" }, simpleData: { enable: true, idKey: "id", pIdKey: "pId", rootPId: null } }, callback: { onCheck: onCheck } }; return setting; }
二.初始化树(创建树)
//2.创建树 function createTree(treeId,dL,dLSize){ //获取树参数默认值 var setting=getSetting(); var zNodes=new Array(); //设置根节点数据 zNodes[0]={ id:'##', pId:"-1", name:'物资类别', t:'物资类别',open:true}; for(var i=0;i<dLSize;i++){//设置子节点数据 zNodes[i+1]={ id:dL[i].classCode, pId:dL[i].parentCode, name:dL[i].className+"("+dL[i].classCode+")", classId:dL[i].classId, t:dL[i].className}; } //1)创建zTree树 $.fn.zTree.init($(treeId), setting, zNodes); //2)初始化已经被选中的物资类别 checkMaterial(); }
三.选中一开始被选中的(初始化一开始就选了的内容)
//3.初始化被选中的物资类别 function checkMaterial(){ var classCodes = $("#classCodes").val();//物资编码 var datalist = classCodes.split(",");//将物资编码打散成数组 //获取所有树节点 var treeObj = $.fn.zTree.getZTreeObj("materialTree"); if(datalist!='' &&datalist.length>0){ var nodes=treeObj.getNodes();//获取所有子节点 for(var i=0;i<datalist.length;i++){ //通过id查找节点 var node = treeObj.getNodeByParam("classId",datalist[i],null); //选中该节点 if(node!=null){//先判断节点是否为空 //选中该节点 treeObj.checkNode(node,true,true); //获取该节点父节点 var parent = node.getParentNode(); if(!parent.open){//如果父节点没有展开则展开父节点 treeObj.expandNode(parent,true,true); } } } } }
四.树的回调事件(保存选择的复选框内容)
//4.树的点击事件回调函数 function onCheck(event, treeId, treeNode){ var classCodes = $("#classCodes").val();//物资编码 var classNames = $("#classNames").val();//物资名字 //alert("onCheck"); //获取所有树节点 var treeObj = $.fn.zTree.getZTreeObj("materialTree"); if(treeNode.checked){//如果是选中节点 if(treeNode.isParent){//如果选中的是父节点(有子节点的节点) //获取选中的父节点的所有子节点 var childrenNodes = treeNode.children; for (var i = 0; i < childrenNodes.length; i++) { classCodes+=","+childrenNodes[i].classId; classNames+=","+childrenNodes[i].name; } }else{//如果是子节点(无子节点的节点) classCodes += ","+treeNode.classId; classNames += ","+treeNode.name; } }else{//如果是取消选中 if(treeNode.isParent){//如果取消的是父节点(有子节点的节点) //获取消的父节点的所有子节点 var childrenNodes = treeNode.children; for (var i = 0; i < childrenNodes.length; i++) { var classCode=","+childrenNodes[i].classId; var className=","+childrenNodes[i].name; //删除取消的节点对应的数据 classCodes=classCodes.replace(classCode, ""); classNames=classNames.replace(className, ""); } }else{//如果是子节点(无子节点的节点) classCode = ","+treeNode.classId; className = ","+treeNode.name; //删除取消的节点对应的数据 classCodes=classCodes.replace(classCode, ""); classNames=classNames.replace(className, ""); } } //保存选中的值(物资类别编码、物资类别名字) $("#classCodes").val(classCodes); $("#classNames").val(classNames); }
五.保存所选内容
//5.保存所选物资类别 function saveMaterial(inputName){ //获取父页要修改input元素 var $input=parent.$("input[name="+inputName+"]"); //获取选中的物资类别名称 var className=$("#classNames").val(); var classCode=$("#classCodes").val(); //截取掉多余的“,” var classNames=className.substring(1,className.length+1); //截取掉多余的“,” var classCodes=classCode.substring(1,classCode.length+1); //修改所选的物资类别名字 $input.val(classNames); //修改所选的物资类别编码 $input.attr("classCodes",classCodes); $input.next().val(classCodes); //关闭弹窗 parent.layer.closeAll(); }
六.关闭弹窗
//6.关闭弹窗 function closeMaterial(){ parent.layer.closeAll(); }
联系客服