看到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技术交流群
网友评论