zTree是一个依靠 jQuery 实现的多功能的树插件
官网:http://www.treejs.cn/v3/api.php
简单使用:
1.引入css和js
<link rel="stylesheet" href="${ctx}/staticfile/components/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<scrip type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery.ztree.excheck-3.5.min.js"></script>
2.简单配置
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
}
};
3.获取后台传来的数据
后端返回json数据,为了业务需求需要在要显示的对象中添加id,pid,checked属性
private String id; //moduleId
private String pId; //上级的moduleId
private Boolean checked;//默认false
4.页面进行初始化zTree,加载数据
//这里相当于在拿后来传来的数据,后台在传数据的时候,属性名要对应上
var zNodes =${zTreeJson};
$(document).ready(function(){
$.fn.zTree.init($("#htZtree"), setting, zNodes);
var zTreeObj = $.fn.zTree.getZTreeObj("htZtree");
zTreeObj.expandAll(true); //展开所有树节点
});
5.将选中的数据传到后台
//获取到所以用户选中的节点id值
//获取所有选择的节点,提交时调用下面函数
function submitCheckedNodes(treeNode) {
//自定义数组
var nodes = new Array();
var zTreeObj = $.fn.zTree.getZTreeObj("htZtree");
nodes = zTreeObj.getCheckedNodes(true); //取得选中的结点
var str = "";
for (i = 0; i < nodes.length; i++) {
if (str != "") {
str += ",";
}
//获取每一个被选择的节点的id的值,拼接为字符串
str += nodes[i].id;
}
$('#roleIds').val(str); //将拼接完成的字符串放入隐藏域,这样就可以通过post提交
}