使用ztree.js，受益一生，十分钟学会使用tree树形结构插件-白红宇

看到ztree.js，这几个字眼，毋庸置疑，那肯定就是tree树形结构了，曾经的swing年代有jtree，后来jquery年代有jstree和treeview，虽然我没写过，但是我见过，一些小功能做起来比较繁琐，几个功能做了一个月，当然了有能力的关系，也有插件易用度的关系

最近要实现的功能用tree树形结构来做是最好的，就是资源的分配，来简单讲讲ztree吧，这是目前国内很火的一个插件，百度一下就能了解，使用起来十分简单

小编我用过3年的jqgrid，在此还是要再次感谢当年的王组让我去跟jqgrid深入浅出，多用了jqgrid后，再看ztree，那就十分简单了，不知道ztree作者是否也参考过jqgrid

首先你需要引入js以及css吧

然后你需要定义一个id="treePermission"，这点和jqgrid一样

定义一下数据结构和基本配置

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
     
       queryNode(Integer parentId) {                SysPermissionExample example = new SysPermissionExample();        Criteria criteria = example.createCriteria();        criteria.andParentidEqualTo(parentId);        List
      
        permissions = sysPermissionMapper.selectByExample(example);                // 如果为空，说明没有根权限，需要创建一个        if (permissions.isEmpty()) {            return null;        }                 // 获得根权限返回出去        List
       
         rootNodeList = new ArrayList
        
         ();        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
     
       getTreeSubNode(TreeNode node) throws Exception{                List
      
        rootNodeList = systemAuthService.queryNode(node.getId());        return rootNodeList;    }

好了，调用后就直接可以使用了，非常简单，还有一些简单配置请参考官网吧~