使用ztree.js，受益一生，十分钟学会使用tree树形结构插
2017-11-01 本文已影响146人
风间影月
看到ztree.js，这几个字眼，毋庸置疑，那肯定就是tree树形结构了，曾经的swing年代有jtree，后来jquery年代有jstree和treeview，虽然我没写过，但是我见过，一些小功能做起来比较繁琐，几个功能做了一个月，当然了有能力的关系，也有插件易用度的关系
最近要实现的功能用tree树形结构来做是最好的，就是资源的分配，来简单讲讲ztree吧，这是目前国内很火的一个插件，百度一下就能了解，使用起来十分简单
小编我用过3年的jqgrid，在此还是要再次感谢当年的王组让我去跟jqgrid深入浅出，多用了jqgrid后，再看ztree，那就十分简单了，不知道ztree作者是否也参考过jqgrid
首先你需要引入js以及css吧
<!-- ztree -->
<link href="<%=request.getContextPath()%>/css/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/js/ztree/jquery.ztree.core.js"></script>
然后你需要定义一个id="treePermission"，这点和jqgrid一样
<!-- ztree start -->
<div class="zTreeDemoBackground left">
<ul id="treePermission" class="ztree"></ul>
</div>
var setting = {
async: {
enable: true,
url: getAsyncUrl,
autoParam: ["id"]
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
}
};
// 查询子节点
function getAsyncUrl(treeId, treeNode) {
return "<%=request.getContextPath()%>/auth/permission/getTreeSubNode";
}
var zNodes =[
{ id:1, pId:0, name:"父节点1 - 展开", open:true},
{ id:11, pId:1, name:"父节点11 - 折叠"},
{ id:111, pId:11, name:"叶子节点111"},
{ id:112, pId:11, name:"叶子节点112"},
{ id:113, pId:11, name:"叶子节点113"},
{ id:114, pId:11, name:"叶子节点114"},
{ id:12, pId:1, name:"父节点12 - 折叠"},
{ id:121, pId:12, name:"叶子节点121"},
{ id:122, pId:12, name:"叶子节点122"},
{ id:123, pId:12, name:"叶子节点123"},
{ id:124, pId:12, name:"叶子节点124"},
{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
{ id:2, pId:0, name:"父节点2 - 折叠"},
{ id:21, pId:2, name:"父节点21 - 展开", open:true},
{ id:211, pId:21, name:"叶子节点211"},
{ id:212, pId:21, name:"叶子节点212"},
{ id:213, pId:21, name:"叶子节点213"},
{ id:214, pId:21, name:"叶子节点214"},
{ id:22, pId:2, name:"父节点22 - 折叠"},
{ id:221, pId:22, name:"叶子节点221"},
{ id:222, pId:22, name:"叶子节点222"},
{ id:223, pId:22, name:"叶子节点223"},
{ id:224, pId:22, name:"叶子节点224"},
{ id:23, pId:2, name:"父节点23 - 折叠"},
{ id:231, pId:23, name:"叶子节点231"},
{ id:232, pId:23, name:"叶子节点232"},
{ id:233, pId:23, name:"叶子节点233"},
{ id:234, pId:23, name:"叶子节点234"},
{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
];
$(document).ready(function(){
$.post("<%=request.getContextPath()%>/auth/permission/getTreeRootNode",{},function(jsonResult){
$.fn.zTree.init($("#treePermission"), setting, jsonResult.data);
});
});
zNodes是初始化的静态数据，可以不用，这里为了方便贴了出来，初始化的时候放入$.fn.zTree.init($("#treePermission"), setting, zNodes);即可
znodes我没有使用，在初始化的时候会预先加载根目录，然后点击再次加载子目录
@Override
public List<TreeNode> queryNode(Integer parentId) {
SysPermissionExample example = new SysPermissionExample();
Criteria criteria = example.createCriteria();
criteria.andParentidEqualTo(parentId);
List<SysPermission> permissions = sysPermissionMapper.selectByExample(example);
// 如果为空，说明没有根权限，需要创建一个
if (permissions.isEmpty()) {
return null;
}
// 获得根权限返回出去
List<TreeNode> rootNodeList = new ArrayList<TreeNode>();
for (SysPermission p : permissions) {
TreeNode rootNode = new TreeNode(p.getId(), p.getParentid(), p.getName(),
p.getType() == ShiroPermissionTypeEnum.MENU.value ? true : false,
p.getType() == ShiroPermissionTypeEnum.MENU.value ? true : false);
rootNodeList.add(rootNode);
}
return rootNodeList;
}
@RequestMapping(value="/permission/getTreeSubNode")
@ResponseBody
public List<TreeNode> getTreeSubNode(TreeNode node) throws Exception{
List<TreeNode> rootNodeList = systemAuthService.queryNode(node.getId());
return rootNodeList;
}
微信公众号：BeJavaGod
Java技术交流群
