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

看到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;
    }

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