Multi-table zTree
Table Structure
Inventory Organization (em_store_groups) → With multiple warehouses (em_stores) → With multiple inventory release (em_store_mats)
Inventory Organization (em_store_groups)
Warehouse (em_stores)
Inventory release (em_store_mats)
Complete results
zTree consists of three attributes: (id, name, pId)
json may also need to use other data added
json data structure (Example):
[{"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"}];
★ because there inventory organization (em_store_groups) and warehouse (em_stores) made a table join, if the primary key to the table, as the id json,
Then in json id will be repeated, unable spanning tree, so here actual json, adding another field storeId, used to store the actual data for each id,
And warehouse (em_stores) in the table, 'Warehouse Number (store_no)' is unique, this field is used so as sql id data is acquired,
And warehouse (em_stores) the actual primary key table, placed in storeId
Json background will be written after the page:
<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); //加载树
}
});
}
Where $ ( "# productsTree") of the specified 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
}
}; Wherein rootPid: "0", set the value of the root node pId
/**单击事件-----------------------------------------------*/
//点击前事件
function beforeClick(treeId, treeNode, clickFlag){
if(nodeIdTemporary==treeNode.id){
zTree.cancelSelectedNode(treeNode);
return false;
}
}//点击事件
function onClick (event, treeId, treeNode, clickFlag) {nodePId = treeNode.pId; // get node control id clickFlagTemporary = clickFlag; // save the number of the selected nodes nodeId = treeNode.storeId; // get the current primary node key nodeIdTemporary = treeNode. id;
$ ( "# StoreName") html (treeNode.name);. Iframe01.document.getElementById ( "Node_StoreId") value = nodeId;. // assignment → iFrame in a hidden field value iframe01.document.getElementById ( "Node_PId") .value = nodePId;. // assignment → iFrame in a hidden field values if (! nodePId = '0') {iframe01.document.getElementById ( "form01") action = "$ {pageContext.request.contextPath} / storage / stores / tableList / 1 "; // query Road King iframe01.document.getElementById (" form01 ") submit ();. // form submitted from the iFrame}}
/**删除事件--------------------------------------------------*/
//删除前事件
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{ } }
After the order so that each node has a direct add features, add custom buttons
/**自定义按钮----------------------------------------------------------*/
//添加按钮以及按钮点击事件
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);
}
}
Finally, the effect above,
This article notes, refer to the official api detailed functions and demo