最近要做一个有关权限的东西，原理和数据库都已经知道了，就是树状图困难。

原先是打算用layui的，因为我孤陋寡闻……吃了大亏，弄了3个小时，屁都没有。只能说是……

后来百度找到了zTree，进去学习了段时间，只能说不是一般的友好，非常好用。但还是学习了一早上，勉强有点收获。

为了明显一些，我特地设置了不和官方默认数据一样的结构。

CREATE TABLE uri(

  id BIGINT UNSIGNED PRIMARY KEY AUTO_INCREMENT COMMENT '编号',

  uri_name VARCHAR(10) NOT NULL COMMENT 'uri的概述',

  is_have_superiors TINYINT NOT NULL COMMENT '是否有上级',

  superiors_id BIGINT UNSIGNED NOT NULL COMMENT '上级uri的id',

  uri VARCHAR(100) NOT NULL COMMENT 'uri地址'

) COMMENT 'uri描述表';

实体类：

import lombok.Data;

import java.math.BigInteger;

@Data

public class UriEntity {

    private BigInteger id;

    private String uriName;

    private Integer haveSuperiors;

    private BigInteger superiorsId;

    private String uri;

}

controller方法：dao层和service以及mybatis文件我就不上了，看方法名应该就知道是什么了

　　
　　// 我设置了全局跨域的
　　@PostMapping("/uris")

    public ResponseDTO getUrisByPid(BigInteger superiorsId) {

        UriEntity uriById = uriService.getUriById(superiorsId);

        return new ResponseDTO("200", "success", uriById);

    }

html文件：其中要注意的一点，我看官方api上面写的dataFilter: ajaxDataFilter是在rollback这里面的，但是不知道为什么不行，后来百度看到了async里面

<!DOCTYPE HTML>

<HTML>

 <HEAD>

  <TITLE> ZTREE DEMO </TITLE>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>

  <!-- 分别导入jquery，zTree的两个js文件，其中excheck是显示复选框一定要有的 -->

  <script type="text/javascript" src="js/jquery-3.4.1.js"></script>

  <script type="text/javascript" src="js/jquery.ztree.core.js"></script>

  <script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>

 </head>

<BODY>

<div>

   <ul id="treeDemo" class="ztree"></ul>

   <input id="btn1" value="获取选中节点id" type="button"/>

</div>

<script>

    var zTreeObj;

    function ajaxDataFilter(treeId,parentNode,responseData) {

        return responseData.data;

    }

    var setting = {

        // 开启复选框,其他不写就都是默认

        check: {

            enable: true

        },

        // name:"uriName"和取别名差不多

        data: {

            key:{

                name:"uriName"

            },

            // 开启简单数据,其他默认

            // idKey:"id",pIdKey:"superiorsId"也差不多是取别名

            simpleData: {

                enable: true,

                idKey: "id",

                pIdKey: "superiorsId",

                rootPId: 0

            }

        },

        // 开启异步加载

        async: {

            enable: true,

            url: "http://127.0.0.1:8081/uris",

            type: "post",

            // 官方api说的用text可以满足大部分需求,但是json也行

            dataType: "text",

            // 请求参数,这里是通过superiorsId查询到其下的子uri

            autoParam: ["id=superiorsId"],

            // 过滤数据,因为返回的是ResponseDTO,其中除了要用到的data还有其他code,msg用不到的东西

            // ajaxDataFilter后面不用加()和参数,可能是因为里面的都是默认的东西吧

            dataFilter: ajaxDataFilter

        }

    };

    // 初始的节点,必须设置为父节点,因为 异步加载 只对 + 起作用,而要有 + 则必须是父节点

    var zNodes=[

        {"id":1,"superiorsId":0,"uriName":"删除操作",isParent:true}

    ];

    // 构造出树结构

    $(document).ready(function(){

        zTreeObj = $.fn.zTree.init($("#treeDemo"),setting,zNodes)

    });

    // 点击按钮后获取选中的数据

    $("#btn1").on("click", function(){

        var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),

        nodes=treeObj.getCheckedNodes(true),

        v="";

        for(var i=0;i<nodes.length;i++){

            v+=nodes[i].uriName+",";

            console.log("节点id:"+nodes[i].id+"节点名称"+v);

        }

    })

</script>

</BODY>

</HTML>

zTree的学习的更多相关文章

  1. DHTMLTree、Dtree和Ztree的学习使用

    一.DHTMLTree是树菜单,允许我们快速开发界面优美,基于Ajax的javascript库.她允许在线编辑,拖拽,三种状态(全选.不选.半选),复选框等模式.同时在加载大数据量的时候,仍然可以保持 ...

  2. ztree学习笔记（一）

    在项目当中,经常会用到ztree树形插件,之前做的几个项目当中都用到了这个插件,感觉功能还是很强大的,而且在网上还找到了中文的API,因为项目中的树形结构不是自己做的,所以现在从头学习一下,并且记录一 ...

  3. zTree学习实例

    今天做完一个zTree的实例,供有需要的学习! 效果图如下:

  4. JAVAEE——BOS物流项目02：学习计划、动态添加选项卡、ztree、项目底层代码构建

    1 学习计划 1.jQuery easyUI中动态添加选项卡 2.jquery ztree插件使用 n 下载ztree n 基于标准json数据构造ztree n 基于简单json数据构造ztree( ...

  5. zTree 学习笔记之(一)

    zTree 学习笔记之(一) 简介 zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 到底有哪些具体的优点,可以参见官网 ...

  6. [译]聊聊C＃中的泛型的使用（新手勿入） Seaching TreeVIew WPF 可编辑树Ztree的使用（包括对后台数据库的增删改查） 字段和属性的区别 C# 遍历Dictionary并修改其中的Value 学习笔记——异步 程序员常说的「哈希表」是个什么鬼？

    [译]聊聊C#中的泛型的使用(新手勿入)   写在前面 今天忙里偷闲在浏览外文的时候看到一篇讲C#中泛型的使用的文章,因此加上本人的理解以及四级没过的英语水平斗胆给大伙进行了翻译,当然在翻译的过程中发 ...

  7. zTree学习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. zTree学习文档和DEOM

    http://tool.oschina.net/apidocs/apidoc?api=ztree3.2%2Fapi%2FAPI_cn.html zTree的API http://www.ztree.m ...

  9. ztree学习之异步加载节点（一）

    ztreedemo.jsp: <%@ page language="java" import="java.util.*" pageEncoding=&qu ...

随机推荐

  1. 安装 primecoin 矿池

    壹.安装 boost_1_49_0. 一.官网下载:https://www.boost.org/users/download/ 前期准备:boost中,用到了别的函数库,所以为了使用boost中相应的 ...

  2. 「Luogu P2568 GCD」

    看到这是一道紫题还是和gcd有关的才点进来(毕竟数论只会gcd). 前置芝士 质数**(又称素数):因数只有1和本身,但是很特殊的1不是一个质数. gcd**:欧几里得算法,又称辗转相除法,可以在约为 ...

  3. 【Android】在程序中使用触力反馈

    触力反馈又名:hapticFeedbackEnabled 一般有两种实现方式 第一种是在XML布局文件里面设置 android:hapticFeedbackEnabled="true&quo ...

  4. hdfs的bug纪录， Unexpected block state

      今早遇到一个bug,提交 spark job 失败.说 hdfs 在 safe mode状态,不允许创建和删除文件. 然后发现 hdfs 的日志文件不断滚动,几乎每秒钟100M的速度打日志,当时没 ...

  5. 图的Prim,Kruskal,Dijkstra,Floyd算法

    代码部分有点问题,具体算法没问题, 最近期末考,要过段时间才会修改 //邻接矩阵,具体情况看上一篇的图的实现template<class T>class MGraph {public:   ...

  6. 转，docker学习笔记

    一.Docker 简介 Docker 两个主要部件: Docker: 开源的容器虚拟化平台 Docker Hub: 用于分享.管理 Docker 容器的 Docker SaaS 平台 -- Docke ...

  7. DotNet中的继承，剖析面向对象中继承的意义

    继承是面向对象程序设计不可缺少的机制,有了继承这个东西,可以提高代码的重用,提高代码的效率,减轻代码员的负担. 面向对象三大特性:封装.继承.多态是相辅相成的.封装为了继承,限制了父类的哪些成员被子类 ...

  8. linux终端出现＂-bash-2.05b$＂现象的解决方法

    参考:http://blog.chinaunix.net/uid-22823163-id-3295220.html

  9. arm linux 移植支持 HP打印机

    背景 由于业务需要,需要hi3531d主板上加入对于HP打印机的支持. 通过与产品经理,技术主管的沟通:通用支持是不现实的,只要求彩色打印,先不考虑打印机的价格,只要支持一款打印机即可. 注意: Li ...

  10. Timetable CodeForces - 946D （预处理+背包）

    题意:n天m节课,最多可以逃k节课,每天在学校待的时间为该天上的第一节课到最后一节课持续的时间.问怎样逃课可以使这n天在学校待的时间最短,输出最短的时间. 分析: 1.预处理出每天逃j节课时在学校待的 ...