关于ztree二次加载数据。
js代码:
var groupSetting = {
/* check : {
enable : true//复选框
}, */
view: {
showIcon: false,//是否显示节点的图标
showLine: true,//显示节点之间的连线。
expandSpeed: "slow",//节点展开、折叠时的动画速度
selectedMulti: true//不允许同时选中多个节点。
},
callback: {
onClick: groupzTreeOnClick,//点击节点加载子节点
},
data : {
simpleData : {
enable : true, //使用简单数据模式
idKey : "id", //节点数据中保存唯一标识的属性名称
pIdKey : "pid", //节点数据中保存其父节点唯一标识的属性名称
rootPId : 0 //用于修正根节点父节点数据 默认值:null
},
key: {
name:"shopName",
}
}
};
var groupTreeNodes;
function loadOrgTree(){
$.ajax({
url : "getOrgTree.action",
type : 'POST',//请求方式:post
data: {shopId:1},
dataType : 'json',//数据传输格式:json
async : false,//是否异步
cache : false,//是否使用缓存
error : function() {
//请求失败处理函数
$.messager.alert("警告",'请求失败!');
},
success : function(data) {
if(data!=null && data!=""){
groupTreeNodes = data;//把后台封装好的简单Json格式赋给treeNodes
}
}
});
var group = $("#groupTree");
$.fn.zTree.init(group, groupSetting, groupTreeNodes);
}
function groupzTreeOnClick(event, treeId, treeNode) {
var shopId=treeNode.id;
//判断该节点下是否有节点,没有就加载节点
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var node = treeObj.getNodeByTId(treeNode.tId);
if(node.children == null || node.children == "undefined"){
$.ajax({
url : "getOrglod.action",
type : 'get',//请求方式:get
data: {shopId:shopId},
dataType : 'json',//数据传输格式:json
error : function() {
//请求失败处理函数
$.messager.alert("警告",'亲,请求失败!');
},
success : function(data) {
if(data!=null && data!=""){
//添加新节点
newNode = treeObj.addNodes(node, data);
}
}
});
};
};
jsp代码:
<div data-options="region:'west',split:true" style="width:15%;">
<ul id="groupTree" class="ztree" ></ul>
</div>
引用ztree插件:
<link href="<%=request.getContextPath()%>/js/zTree/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/js/zTree/jquery.ztree.core-3.5.js"></script>
<script src="<%=request.getContextPath()%>/js/zTree/jquery.ztree.excheck-3.5.js"></script>