Layui 18 layui 默认树组件

fangyinggui

已于 2025-04-11 10:26:30 修改

阅读量854

点赞数 15

CC 4.0 BY-SA版权

分类专栏： layui 文章标签： layui javascript 前端

于 2025-04-10 16:42:47 首次发布

本文链接：https://blog.csdn.net/monian187/article/details/147118777

layui 专栏收录该内容

23 篇文章

订阅专栏

在这里插入图片描述

1、概述

layui v2.5.0 重新创作了 tree 组件。

默认渲染：
在这里插入图片描述

v2.5 之前的 tree，需要用树形组件（依赖 jq 开发的 treeSelect.js，可以主页搜索这个组件查看）

2、快速使用

// <div id="test1"></div>
layui.use('tree', function () {
  var tree = layui.tree

  //渲染
  var inst1 = tree.render({
    elem: '#test1', //绑定元素
    data: [
      {
        title: '江西', //一级菜单
        children: [
          {
            title: '南昌', //二级菜单
            children: [
              {
                title: '高新区', //三级菜单
                //…… //以此类推，可无限层级
              },
            ],
          },
        ],
      },
      {
        title: '陕西', //一级菜单
        children: [
          {
            title: '西安', //二级菜单
          },
        ],
      },
    ],
  })
})

【示例】快速渲染一个 layui tree 组件

tree.render()

/**
 * @brief: 渲染一个 tree 组件
 * @param {Object} options 配置对象
 * @return {*}
 */
var ins = tree.render(options)

3、基础参数

elem

【键】指定组件渲染的容器选择器（常用 id选择器）。
【键值】{String|Object} 例如：‘#test’。
【示例】渲染容器

data ！！！

【键】树结构的数据源。
【键值】 {Array} 是一个集合。

【简单示例】

const data = [
  {
    title: '江西',
    children: [
      {
        title: '南昌市',
      }
    ]
  },
  {
    title: '安徽',
    children: [
      {
        title: '合肥',
      }
    ]
  },
]

【子项字段】

title {string} 节点标题，也是渲染到树中显示的文字。
id {string|number} 任意唯一的字符或数字。
field {string} 节点字段名，一般对应表字段名。
children {Array} 子节点（① 支持设定选项同父节点；② 以此类推，可无限层级）
href {string} 点击节点弹出新窗口对应的 url。（①是需要设置 data 同级的参数 isJump: true 才可在新窗口跳转；②否则即使有值，也不跳转；）
spread {boolean} 节点是否初始展开。默认 false 初始不展开。
checked {booelan} 节点是否初始为选中装填。默认 false 初始不选中。（注意：要设置 id 字段，否则会报错。）
disabled {boolean} 节点是否初始为禁用状态。默认 false 初始不禁用。

【示例】子项各字段使用

id

【键】设定实例唯一索引，用于基础方法传参使用。
【键值】{String}
【注意】和 data内子项的id 做区分（不同）。
【示例】设置当前渲染树实例的 id （其它 api 常将此处值作为参数）

showCheckbox

【键】是否显示复选框。
【键值】{Boolean}
false 默认，不显示
【示例】显示复选框
启用后：
在这里插入图片描述

edit

【键】是否开启节点的操作图标。
！开启后，鼠标悬浮到选项才会显示操作图标。
【键值】
{Boolean}
false 默认，不开启。
true

{array}
[‘update’, ‘del’] 2个值可选，可自定义。

【示例】设置节点图标
值为 true 时，鼠标悬浮时出现：
在这里插入图片描述

accordion

【键】是否开启手风琴模式（能且只能展开一个节点，其它会被关闭）。
【键值】{Booelan}
false 默认，不开启
【示例】手风琴模式

onlyIconControl

【键】是否只能通过点击节点图标展开节点。
【键值】{Booelan}
false （默认）点击节点本身也可展开。
true 只能通过点击图标展开节点。
【示例】仅图标控制节点展开

isJump

【键】是否允许点击节点时弹出新窗口跳转。
！需要在 data 子项的 href 节点设置超链接地址。
【键值】{boolean}
false （默认）点击节点不打开超链接。
true 若开启，会在新窗口打开超链接。
【示例】新窗口打开节点超链接

showLine

【键】是否显示树结构连接虚线。
【键值】{boolean}
true （默认）用虚线显示树结构。
false 渲染为三角图标。

默认是线：
【示例】默认树渲染
在这里插入图片描述

三角图标：
【示例】只显示三角图标
在这里插入图片描述

text

【键】自定义各类默认文本。
【场景】data 内，子项数据字段为空时，设置的默认内容。
【例如】

text: {
  defaultNodeName: '哎呀，节点内容为空。',
  none: '整个数据都是空！',
},

【示例】自定义默认文本
在这里插入图片描述

回调配置项

【经验】将回调函数参数对象解构到新变量中再使用更方便。

click

/**
* @brief: “节点”被点击的回调；
* @param {*} obj 事件处理函数返回的对象；
* obj.data 当前点击的节点数据；
* obj.state 当前节点的展开状态：open、close、normal；
* obj.elem 当前节点元素；
* obj.data.children 当前节点下是否有子节点；
* !tips: 子节点 点击也会触发此事件， obj返回的参数不一；
*/
click: function ({data, state, elem}) {
 console.log(obj)
 console.log(data)
 console.log(state)
 console.log(elem)
 console.log(data.children)
},

【示例】点击节点后触发

oncheck

/**
* @brief: “节点”被点击的回调；
* @param {*} obj 事件处理函数返回的对象；
* obj.data 当前点击的节点数据；
* obj.state 当前节点的展开状态：open、close、normal；
* obj.elem 当前节点元素；
* obj.data.children 当前节点下是否有子节点；
* !tips: 子节点 点击也会触发此事件， obj返回的参数不一；
*/
click: function ({data, state, elem}) {
 console.log(obj)
 console.log(data)
 console.log(state)
 console.log(elem)
 console.log(data.children)
},

【示例】复选框被点击的回调

tree.reload(id, idArr)

【语法】

/**
 * @brief: 树组件重载
 * @param {string} 树组件 render() 渲染时配置项 id 的值。
 * @param {Object} options 同渲染时的参数配置项。
 * @return {*}
 */
tree.reload(id, options)

// demo
var tree = layui.tree;
// 渲染
tree.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 重载
tree.reload('test', { // options
  data: []
});

【示例1】重载1
【示例2】重载2