看到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; }
好了，调用后就直接可以使用了，非常简单，还有一些简单配置请参考官网吧~
