最近要做一个有关权限的东西，原理和数据库都已经知道了，就是树状图困难。
原先是打算用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>