多表zTree

来源：互联网发布：黄牛抢购软件编辑：程序博客网时间：2024/06/10 17:28

多表zTree

表结构

库存组织(em_store_groups) → 下有多个仓库(em_stores) → 下有多个库存发布(em_store_mats)

库存组织(em_store_groups)

仓库(em_stores)

库存发布(em_store_mats)

完成效果

zTree由3个属性组成：(id,name,pId)

json中还可以加入其它需要使用的数据

json数据结构(例)：

[{"name":"地面类","id":"1","psId":"0"}, {"name":"天空类","id":"2","psId":"0"}, {"name":"海底类","id":"3","psId":"0"}, {"name":"四轮机车","id":"11","psId":"1"}, {"name":"二轮机车","id":"12","psId":"1"}, {"name":"民航机","id":"23","psId":"2"}, {"name":"战斗机","id":"24","psId":"2"}, {"name":"快艇","id":"35","psId":"3"}, {"name":"潜水艇","id":"36","psId":"3"}, {"name":"本田","id":"111","psId":"11"}, {"name":"宝马","id":"112","psId":"11"}, {"name":"奔驰","id":"113","psId":"11"}, {"name":"凯迪拉克","id":"114","psId":"11"}, {"name":"新世纪","id":"125","psId":"12"}, {"name":"哈雷","id":"126","psId":"12"}, {"name":"客机A310","id":"237","psId":"23"}, {"name":"空客A410","id":"238","psId":"23"}, {"name":"飞鹰S88","id":"249","psId":"24"}, {"name":"铁汉K50","id":"2410","psId":"24"}, {"name":"飞毛腿02","id":"3511","psId":"35"}, {"name":"潜水1号","id":"3612","psId":"36"}];

★因为这里库存组织(em_store_groups)与仓库(em_stores)做了表连接，如果以表中的主键，作为json中的id，

那么json中id会重复，无法生成树，所以在这里实际json中，加入了另一个字段storeId，用于存放每条数据的实际id，

而仓库(em_stores)表中的，‘仓库编号(store_no)’是惟一的，故sql获取数据时用此字段作为id，

而仓库(em_stores)表的实际主键，放入storeId中

后台将json写入页面后：

<link rel="stylesheet" href="<%=request.getContextPath()%>/css/default/zTree.css" media="screen,print" />

<script language="javascript" type="text/javascript" src="<%=request.getContextPath()>/scripts/jquery.ztree.all3.3.min.js"></script>

//异步获得treefunction getTree(){$.ajax({type: 'POST',dataType : "json",url:global_ctxPath+"/storage/stores/treeList",error: function () {alert('请求失败');},success:function(data){ treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes$.fn.zTree.init($("#productsTree"), setting,treeNodes);//加载树}});}

其中$("#productsTree")为指定div的id

//设置tree属性var setting = {  view:{   selectedMulti:false,   addHoverDom: addHoverDom,   removeHoverDom: removeHoverDom,  },  edit:{   enable:true,   showRemoveBtn :true,   showRenameBtn:true  },  data: {   simpleData: {    enable: true,    rootPId:"0"   }  },  callback:{   beforeClick:beforeClick ,   onClick:onClick,   beforeRemove:beforeRemove,   onRemove: onRemove,   beforeRename:beforeRename,   onRename:onRename  } };

其中rootPid：“0”，设置根节点pId值

/**单击事件-----------------------------------------------*/ //点击前事件function beforeClick(treeId, treeNode, clickFlag){ if(nodeIdTemporary==treeNode.id){  zTree.cancelSelectedNode(treeNode);   return false; }}

//点击事件function onClick(event, treeId, treeNode, clickFlag){ nodePId = treeNode.pId;//获得节点控制id clickFlagTemporary = clickFlag;//保存选中节点数量 nodeId = treeNode.storeId;//获得当前节点主键 nodeIdTemporary = treeNode.id;
 $("#storeName").html(treeNode.name);  iframe01.document.getElementById("Node_StoreId").value = nodeId;//赋值→iFrame中隐藏域的值 iframe01.document.getElementById("Node_PId").value = nodePId;//赋值→iFrame中隐藏域的值 if(nodePId != '0'){  iframe01.document.getElementById("form01").action = "${pageContext.request.contextPath}/storage/stores/tableList/1";//查询路劲  iframe01.document.getElementById("form01").submit();//提交iFrame中from表单 }}

/**删除事件--------------------------------------------------*/ //删除前事件function beforeRemove(treeId, treeNode){nodePId = treeNode.pId;nodeId = treeNode.storeId;if(window.confirm("您确定删除吗？")){return checkNode(nodeId,nodePId);}return false;}  //删除事件 function onRemove(){  if(nodePId == "0"){//删除仓库组织   location.href="${pageContext.request.contextPath}/storage/stores/removeStoreGroup/"+nodeId;  }else{   location.href="${pageContext.request.contextPath}/storage/stores/removeStore/"+nodeId;  } }

//验证选中节点下，是否有数据function checkNode(nodeId,nodePId){var has=false;$.ajax({type:"POST",dataType:"json",async:false,data:{abc:Math.random,nodeId:nodeId,nodePId:nodePId,},url:global_ctxPath+"/storage/stores/checkNodeResult",error: function () {alert('请求失败');return false;},success:function(data){if(data){alert("该仓库下有数据，无法删除!");has= false;}else{has= true;}}});return has;}

 /**修改事件------------------------------------------------------------*/ //修改前事件 function beforeRename(){  }  //修改事件 function onRename(event, treeId, treeNode){ if(treeNode.pId=="0"){  }else{ } }



为了让每个节点之后，直接拥有添加功能，自定义添加按钮
 
/**自定义按钮----------------------------------------------------------*///添加按钮以及按钮点击事件function addHoverDom(treeId, treeNode){var sObj = $("#" + treeNode.tId + "_span");if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;// var addStr = "<button type='button' class='add' id='addBtn_" + treeNode.id + "' title='add node' onfocus='this.blur();'></button>";var addStr = "<a id='addBtn_"+treeNode.id+"' onfocus='this.blur()' title='添加节点'><img src='<%=request.getContextPath()%>/images/addchildnode.png' width='16' height='16' /></a>";sObj.append(addStr);var btn = $("#addBtn_"+treeNode.id);if (btn) btn.bind("click", function(){addNode(treeNode.storeId,treeNode.pId);return false;});} //按钮失焦事件function removeHoverDom(treeId, treeNode){$("#addBtn_"+treeNode.id).unbind().remove();}
 
 
/**添加方法--------------------------------------------------*/function addNode(nodeId,nodePId){ if(nodeId == 'rootNode'){ addStoreGroup(); }else{ addStore(nodeId,nodePId); }}

 
最后效果如上图，
此文笔记，详细功能参考官方api与demo
 
 
 
 
 
 
 	
					
					   多表zTree
	  	   zTree
	  	   ztree
	  	   ztree
	  	   ztree
	  	   ztree
	  	   zTree
	  	   zTree
	  	   zTree
	  	   zTree
	  	   ztree
	  	   Ztree
	  	   ztree
	  	   ztree
	  	   ztree
	  	   ztree
	  	   zTree
	  	   ztree
	     		  
	  	   Ubuntu安装openGL
	  	   php 遍历一段时间
	  	   埋藏
	  	   oracle的jdbc连接方式:oci和thin
	  	   图的深度优先搜索/Depth-first search/C++
	  	   多表zTree
	  	   如何开启QtCreator的代码自动补全功能
	  	   结构体与类的区别
	  	   我们应该做什么产品-谈谈google的产品和发展
	  	   且行且走（8月15日,8月16日）
	  	   色环电阻识别法
	  	   关于Hibernate save方法执行之后得到的id与数据库中实际存入值的id不一致的问题
	  	   gcc编译选项详解
	  	   线程小解