zTree的学习

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

原先是打算用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>

posted on 2019-12-26 14:44  我欲皆真  阅读(294)  评论(0)  编辑  收藏  举报

导航