使用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;
    }

好了，調用后就直接可以使用了，非常簡單，還有一些簡單配置請參考官網吧~