美文网首页
使用ztree.js,受益一生,十分钟学会使用tree树形结构插

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

作者: 风间影月 | 来源:发表于2017-11-01 14:52 被阅读146次

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

    尚自习 | 程序员的进阶平台 itzixi.com

    微信公众号:BeJavaGod

    Java技术交流群

    相关文章

      网友评论

          本文标题:使用ztree.js,受益一生,十分钟学会使用tree树形结构插

          本文链接:https://www.haomeiwen.com/subject/btcgpxtx.html