文档章节

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

风间影月
 风间影月
发布于 2017/04/20 11:17
字数 870
阅读 68
收藏 0

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

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

 

本文转载自:http://www.cnblogs.com/leechenxiang/p/5952959.html

风间影月
粉丝 4
博文 126
码字总数 252
作品 0
无锡
技术主管
私信 提问
Vue递归组件+Vuex开发树形组件Tree--递归组件

本文章写于一年前,修改其中的一些图片代码,转载至此,略作订正 写在前面 首先,本篇文章所开发的组件并非一个已经开源的上线组件,所以如果你急于需要一个插件来只做你的项目,那么并不能带给...

fengyangyang
03/31
0
0
windows phone 开发 读取XML文件(目录导入)生成三级列表(树形结构)

因为是三个不同平台同时开发,所以把目录采用XMl文件存储,现需要加载SD卡中的XML文件,生成List列表,共三级目录,树形结构的。 查资料说sliverlight for wp 没有提供treeview 有人说要生成...

autherz
2013/05/25
249
0
在NLP中深度学习模型何时需要树形结构?

作者:robert_ai 链接:http://www.cnblogs.com/robert-dlut/p/5004514.html 前段时间阅读了Jiwei Li等人[1]在EMNLP2015上发表的论文《When Are Tree Structures Necessary for Deep Learnin......

机器学习算法与自然语言处理
2018/04/17
0
0
基于.NET架构的树形动态报表设计与应用

在一些统计报表中,利用树形结构报表来实现维度钻取功能是十分常见的。通过逐级钻取,可以快速查看更细粒度的指标数据,如项目施工进度报告等。 使用葡萄城报表控件——ActiveReports ,即可...

葡萄城技术团队
10/12
25
0
100 行 C 代码终端打印树形结构

原文出处:我的上铺叫路遥 讲究套路之前,先来回答三个问题。 为什么要打印树形结构 树形结构是算法里很常见的一种数据结构,从二叉树到多叉树,还有很多变种。很多涉及到算法的工作,就需要...

我的上铺叫路遥
2017/02/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

js如何控制table中的某一行动态置顶

两行代码搞定: $('#'+item.roadCode).fadeOut().fadeIn();//获取到需要置顶的行 $(".table").prepend($('#'+item.roadCode)); 其中,fadeOut()方法 作用 --- 从可见到隐藏 如下: prepend(......

码妞
52分钟前
3
0
四种解决Nginx出现403 forbidden 报错的方法

我是在在本地用虚拟机中通过yum安装nginx的,安装一切正常,但是访问时报403, 于是查看nginx日志,路径为/var/log/nginx/error.log。打开日志发现报错Permission denied,详细报错如下: 1....

dragon_tech
59分钟前
3
0
获取RestResultResponse返回的值

Springboot项目,需要调其他服务的接口,返回值类型是RestResultResponse 打断点的结果集是这个 打印出来的getData(): [{id=3336b624-8474-4dd9-bd5b-c7358687c877, paraNo=104, para=Postpo...

栾小糖
今天
4
0
【小学】 生成10以内的加减法

#!/usr/bin/env python# coding: utf-8from random import randrange# 题目的最大数值R_MAX = 10# 生成的题目的数量R_PAGE = 70# 生成减法列表def get_sub_list():...

Tensor丨思悟
今天
11
0
JavaScript设计模式——适配器模式

  适配器模式是设计模式行为型模式中的一种模式;   定义:   适配器用来解决两个已有接口之间不匹配的问题,它并不需要考虑接口是如何实现,也不用考虑将来该如何修改;适配器不需要修...

有梦想的咸鱼前端
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部