程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长

+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2022-03(76)

2022-04(82)

2022-06(16)

2022-08(27)

2022-09(2)

Layui的tree使用

发布于2021-05-30 20:33     阅读(806)     评论(0)     点赞(8)     收藏(3)


前言:文档中有详细参数说明 :https://www.layui.com/doc/modules/tree.html

导入js和css文件,假如文件路径为404,查看文件是否路径上的错误,或者是否加上项目的根路径,例如:“${pageContext.request.contentPath}/../src/css/layui.xx”

初始化layuitree,文档中有。

Script写法:

  1. function generateTree() {
  2.     $.ajax({
  3.         url: "",    //后台数据请求地址
  4.         type: "post",
  5.         "dataType": "json",
  6.         "async": false,
  7.         "success": function (result) {
  8.             //开启节点操作图标
  9.            tree.render({
  10.                 elem: '#test9',
  11.                 data: [result],
  12.                 edit: ['add', 'update', 'del'], //操作节点的图标
  13.                 accordion: true,
  14.                onlyIconControl: true//是否仅允许节点左侧图标控制展开收缩
  15.                 click: function (obj) {
  16.                    
  17.                 },
  18.                 operate: function (obj) {
  19.                     var type = obj.type; //得到操作类型:add、edit、del
  20.                     var data = obj.data; //得到当前节点的数据
  21.                     var elem = obj.elem; //得到当前节点元素
  22.                     //Ajax 操作
  23.                     var id = data.id; //得到节点索引
  24.                     window.id = id;
  25.                     if (type === 'add') { //增加节点
  26.                        
  27.                     }
  28.                     if (type === 'update') {
  29.                         var title = elem.find('.layui-tree-txt').html();//得到修改后的内容
  30.                       
  31.                     }
  32.                 },
  33.             });
  34.         },
  35.     });
  36. }

      基础参数

详细文档中有说明!

参数选项

说明

类型

示例值

elem

指向容器选择器


String/Object

 

 

data

数据源

Array

 

id

设定实例唯一索引,用于基础方法传参使用。


String

 

 

edit

是否开启节点的操作图标。默认 false。

若为 true,则默认显示“改删”图标

若为 数组,则可自由配置操作图标的显示状态和顺序,目前支持的操作图标有:add、update、del,如:
edit: ['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

  1. public Object List(){
  2.     List<SYS_Typeof> List = typeService.findByTypeList();
  3.    // 2.声明一个变量用来存储找到的根节点
  4.     SYS_Typeof root = null;
  5.     // 3.创建Map对象用来存储id和Menu对象的对应关系便于查找父节点
  6.     Map<Object, SYS_Typeof> menuMap = new HashMap<>();
  7.     // 4.遍历menuList填充menuMap
  8.     for (SYS_Typeof menu:List) {
  9.         Integer id = menu.getId();
  10.         menuMap.put(id,menu);
  11.     }
  12.     // 5.再次遍历menuList查找根节点,组装父子节点
  13.     for (SYS_Typeof menu: List) {
  14.         // 6.获取当前的pid属性值
  15.         Integer pid = menu.getPid();
  16.         // 7.如果pid为null,就判断为根节点
  17.         if (pid == null) {
  18.             // 8.把当前正在遍历这个menu对象赋值为root
  19.             root = menu;
  20.             // 9.结束循环
  21.             continue;
  22.         }
  23.         // 10.如果pid不为null,说明当前节点有父节点,那么可以根据pid到menuMap查找对应的Menu对象
  24.         SYS_Typeof father = menuMap.get(pid);
  25.         // 11.将当前节点存入节点的children
  26.         father.getChildren().add(menu);
  27.     }
  28.     return JSON.toJSONString(root);
  29. }

在父节点上的pid要为null,或者是0,是null或者是0要看第7个步骤,没有对应上会有空空指针异常,

Pojo:提供set和get方法,

  1. private Integer id;
  2. private Integer pid;
  3. private String title;
  4. private Boolean spread = true; // 是否展开
  5. private List<SYS_Typeof> children = new ArrayList<>();

Service,mapper,Impl,都是查询所有数据

出来的效果

js所有代码:没有删除

  1. // 调用节点
  2. generateTree();
  3. // 树节点
  4. function generateTree() {
  5.     $.ajax({
  6.         url: "",    //后台数据请求地址
  7.         type: "post",
  8.         "dataType": "json",
  9.         "async": false,
  10.         "success": function (result) {
  11.             //开启节点操作图标
  12.            tree.render({
  13.                 elem: '#test9',
  14.                 data: [result],
  15.                 edit: ['add', 'update', 'del'], //操作节点的图标
  16.                 accordion: true,
  17.                onlyIconControl: true//是否仅允许节点左侧图标控制展开收缩
  18.                 click: function (obj) {
  19.                     tableIns.reload({
  20.                         where:{
  21.                             "title":obj.data.title //得到当前点击的节点数据
  22.                         },
  23.                     })
  24.                 },
  25.                 operate: function (obj) {
  26.                     var type = obj.type; //得到操作类型:add、edit、del
  27.                     var data = obj.data; //得到当前节点的数据
  28.                     var elem = obj.elem; //得到当前节点元素
  29.                     //Ajax 操作
  30.                     var id = data.id; //得到节点索引
  31.                     window.id = id;
  32.                     if (type === 'add') { //增加节点
  33.                         addTree();
  34.                     }
  35.                     if (type === 'update') {
  36.                         var title = elem.find('.layui-tree-txt').html();//得到修改后的内容
  37.                         window.title = title;
  38.                         UpdateTree();
  39.                     }
  40.                 },
  41.             });
  42.         },
  43.     });
  44. }
  45. // 新增节点
  46. function addTree() {
  47.     $.ajax({
  48.         "url": "",
  49.         "type": "post",
  50.         "data": {
  51.             "pid": window.id,
  52.         },
  53.         "success": function () {
  54.             layer.msg("新增成功")
  55.             generateTree();
  56.         },
  57.         "error": function () {
  58.         }
  59.     })
  60. }
  61. // 修改节点
  62. function UpdateTree() {
  63.     $.ajax({
  64.         "url": "",
  65.         "Type": "post",
  66.         "data": {
  67.             "id": window.id,
  68.             "title": window.title,
  69.         },
  70.         "success": function (result) {
  71.             var result = result.result;
  72.             if (result == "SUCCESS") {
  73.                 layer.msg("修改成功");
  74.                 generateTree();
  75.             } else {
  76.                 layer.msg("操作失败" + result.message)
  77.             }
  78.         }
  79.     })
  80. }

 

原文链接:https://blog.csdn.net/qq_44484973/article/details/117387416



所属网站分类: 技术文章 > 博客

作者:你说php不行了

链接:http://www.phpheidong.com/blog/article/86822/251c53a6b25f4add1b64/

来源:php黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

8 0
收藏该文
已收藏

评论内容:(最多支持255个字符)