多表zTree

多表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>

//异步获得tree
function 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