一套开源的 Web UI 组件库。采用自身极简的模块化规范,并遵循原生 HTML/CSS/JS 的开发模式,极易上手,开箱即用。非常适合网页界面的快速构建。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

4.1 KiB

属性名 描述 类型 默认值
elem

绑定元素选择器

string/DOM -
data

tree 的数据源。其格式详见:#data 格式

array -
id

设置实例唯一索引,用于其他方法传参使用。

string -
showCheckbox

是否显示复选框

boolean

false

edit

是否开启节点的右侧操作图标。支持以下可选值:

  • 若为 true,则默认显示「改删」图标
  • 若为 数组,则可自由配置操作图标,如:edit:['add', 'update', 'del'] ,且图标将按照数组的顺序显示。
boolean
array

false

accordion

是否开启手风琴模式

boolean

false

onlyIconControl

是否仅允许节点左侧图标控制展开伸缩。

  • 默认为 false,即点击节点本身也可控制伸缩
  • 若值为 true,则只能通过节点左侧图标来展开收缩
boolean

false

isJump

是否允许点击节点时弹出新窗口跳转。若为 true,则需在对应的 data 中设定 href 属性(url 格式)

boolean

false

showLine

是否开启节点连接线。若设为 false,则节点左侧出现三角图标。

boolean

true

customName 2.8.14+

自定义 data 数据源中常用的字段名称。

object -
text

自定义默认文本,object 类型。支持以下属性:

text: {
  defaultNodeName: '未命名', // 节点默认名称
  none: '无数据' // 数据为空时的提示文本
}  
click
节点被点击的回调函数。返回的参数如下:
click: function(obj){
  console.log(obj.data); // 得到当前点击的节点数据
  console.log(obj.state); // 得到当前节点的展开状态:open、close、normal
  console.log(obj.elem); // 得到当前节点元素
  
  console.log(obj.data.children); // 当前节点下是否有子节点
}
oncheck
点击复选框时的回调函数,返回的参数如下:
oncheck: function(obj){
  console.log(obj.data); // 得到当前点击的节点数据
  console.log(obj.checked); // 节点是否被选中
  console.log(obj.elem); // 得到当前节点元素
}
operate
点击节点的右侧操作图标的回调函数,返回的参数如下:
operate: function(obj){
  var type = obj.type; // 得到操作类型:add、edit、del
  var data = obj.data; // 得到当前节点的数据
  var elem = obj.elem; // 得到当前节点元素
  
  // Ajax 操作
  var id = data.id; // 得到节点索引
  if(type === 'add'){ // 增加节点
    //返回 key 值
    return 123;
  } else if(type === 'update'){ // 修改节点
    console.log(elem.find('.layui-tree-txt').html()); // 得到修改后的内容
  } else if(type === 'del'){ // 删除节点
    // …
  };
}