发布于2021-05-30 20:33 阅读(929) 评论(0) 点赞(8) 收藏(3)
前言:文档中有详细参数说明 :https://www.layui.com/doc/modules/tree.html
导入js和css文件,假如文件路径为404,查看文件是否路径上的错误,或者是否加上项目的根路径,例如:“${pageContext.request.contentPath}/../src/css/layui.xx”
初始化layuitree,文档中有。
Script写法:
- function generateTree() {
- $.ajax({
- url: "", //后台数据请求地址
- type: "post",
- "dataType": "json",
- "async": false,
- "success": function (result) {
- //开启节点操作图标
- tree.render({
- elem: '#test9',
- data: [result],
- edit: ['add', 'update', 'del'], //操作节点的图标
- accordion: true,
- onlyIconControl: true, //是否仅允许节点左侧图标控制展开收缩
- click: function (obj) {
-
-
- },
- operate: function (obj) {
- var type = obj.type; //得到操作类型:add、edit、del
- var data = obj.data; //得到当前节点的数据
- var elem = obj.elem; //得到当前节点元素
- //Ajax 操作
- var id = data.id; //得到节点索引
- window.id = id;
- if (type === 'add') { //增加节点
-
-
- }
- if (type === 'update') {
- var title = elem.find('.layui-tree-txt').html();//得到修改后的内容
-
-
- }
- },
- });
- },
- });
- }
-
基础参数
详细文档中有说明!
参数选项 | 说明 | 类型 | 示例值 |
elem | 指向容器选择器 |
|
|
data | 数据源 | Array |
|
id | 设定实例唯一索引,用于基础方法传参使用。 |
|
|
edit | 是否开启节点的操作图标。默认 false。 若为 true,则默认显示“改删”图标 若为 数组,则可自由配置操作图标的显示状态和顺序,目前支持的操作图标有:add、update、del,如:
| Boolean/Array |
|
showCheckbox | 是否显示复选框 | Boolean | false |
onlyIconControl | 是否仅允许节点左侧图标控制展开收缩。默认 false(即点击节点本身也可控制)。若为 true,则只能通过节点左侧图标来展开收缩 | Boolean | false |
数据源
详细文档中有说明!
属性选项 | 说明 | 类型 | 示例值 |
title | 节点标题 | String | 未命名 |
id | 节点唯一索引值,用于对指定节点进行各类操作 | String/Number | 未命名 |
field | 节点字段名 | String | 一般对应表字段名 |
Children | 子节点。支持设定选项同父节点 | Array | [{title: '子节点1', id: '111'}] |
Controller
- public Object List(){
- List<SYS_Typeof> List = typeService.findByTypeList();
- // 2.声明一个变量用来存储找到的根节点
- SYS_Typeof root = null;
- // 3.创建Map对象用来存储id和Menu对象的对应关系便于查找父节点
- Map<Object, SYS_Typeof> menuMap = new HashMap<>();
- // 4.遍历menuList填充menuMap
- for (SYS_Typeof menu:List) {
- Integer id = menu.getId();
- menuMap.put(id,menu);
- }
- // 5.再次遍历menuList查找根节点,组装父子节点
- for (SYS_Typeof menu: List) {
- // 6.获取当前的pid属性值
- Integer pid = menu.getPid();
- // 7.如果pid为null,就判断为根节点
- if (pid == null) {
- // 8.把当前正在遍历这个menu对象赋值为root
- root = menu;
- // 9.结束循环
- continue;
- }
- // 10.如果pid不为null,说明当前节点有父节点,那么可以根据pid到menuMap查找对应的Menu对象
- SYS_Typeof father = menuMap.get(pid);
- // 11.将当前节点存入节点的children
- father.getChildren().add(menu);
- }
- return JSON.toJSONString(root);
- }
在父节点上的pid要为null,或者是0,是null或者是0要看第7个步骤,没有对应上会有空空指针异常,
Pojo:提供set和get方法,
-
- private Integer id;
- private Integer pid;
- private String title;
- private Boolean spread = true; // 是否展开
-
- private List<SYS_Typeof> children = new ArrayList<>();
Service,mapper,Impl,都是查询所有数据
出来的效果
js所有代码:没有删除
- // 调用节点
- generateTree();
- // 树节点
- function generateTree() {
- $.ajax({
- url: "", //后台数据请求地址
- type: "post",
- "dataType": "json",
- "async": false,
- "success": function (result) {
- //开启节点操作图标
- tree.render({
- elem: '#test9',
- data: [result],
- edit: ['add', 'update', 'del'], //操作节点的图标
- accordion: true,
- onlyIconControl: true, //是否仅允许节点左侧图标控制展开收缩
- click: function (obj) {
- tableIns.reload({
- where:{
- "title":obj.data.title //得到当前点击的节点数据
- },
- })
- },
- operate: function (obj) {
- var type = obj.type; //得到操作类型:add、edit、del
- var data = obj.data; //得到当前节点的数据
- var elem = obj.elem; //得到当前节点元素
- //Ajax 操作
- var id = data.id; //得到节点索引
- window.id = id;
- if (type === 'add') { //增加节点
- addTree();
- }
- if (type === 'update') {
- var title = elem.find('.layui-tree-txt').html();//得到修改后的内容
- window.title = title;
- UpdateTree();
- }
- },
- });
- },
- });
- }
- // 新增节点
- function addTree() {
- $.ajax({
- "url": "",
- "type": "post",
- "data": {
- "pid": window.id,
- },
- "success": function () {
- layer.msg("新增成功")
- generateTree();
- },
- "error": function () {
-
- }
- })
- }
- // 修改节点
- function UpdateTree() {
- $.ajax({
- "url": "",
- "Type": "post",
- "data": {
- "id": window.id,
- "title": window.title,
- },
- "success": function (result) {
- var result = result.result;
- if (result == "SUCCESS") {
- layer.msg("修改成功");
- generateTree();
- } else {
- layer.msg("操作失败" + result.message)
- }
- }
-
- })
- }
-
原文链接:https://blog.csdn.net/qq_44484973/article/details/117387416
作者:你说php不行了
链接:http://www.phpheidong.com/blog/article/86822/251c53a6b25f4add1b64/
来源:php黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 php黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-4
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!