layui树形组键

5512人阅读 2021/4/27 17:10 总访问：960178 评论：1 收藏：1 手机

分类: Jquery

html部分

<div id="test12" class="demo-tree-more"></div>

js部分
首先引入layui的css和js（注意不要重复引用，注意布局页和子页面是否有相同的CSS或者JS）

数据源里的特性名称	描述
data	数据源
id	唯一标示符
checked	是否选中
spred	是否默认展开
children	子集，表示该节点的子节点，等于data里的小data，用于生成二级或更多级节点
href	节点链接
field	节点字段名
disabled	是否禁用

        //标识layui使用了那些特性
        layui.use(['tree', 'util'], function () {
            var tree = layui.tree
            , layer = layui.layer
            , util = layui.util
            
            //数据源是一个json对象集合
            //数据实例，一个一级树形
            data = [{
            title: '一级1'
            ,id: 1
            ,field: 'name1'
            ,checked: true
            ,spread: true
            }]
            //数据实例，一个二级树形
            data1 = [{
            title: '一级1'
            ,id: 1
            ,field: 'name1'
            ,checked: true
            ,spread: true
            ,children: [{
                   title: '二级节点'
                   ,id: 15
                   ,field: ''
                   ,href: 'https://www.layui.com/doc/'
                  }]
            }]
            
            //生成树节点
              tree.render({
                     elem: '#test12'    //div 的id
                     , data: data    //数据源 
                     , showCheckbox: true  //是否显示复选框
                     , id: 'demoId1'   
                      , isJump: true //是否允许点击节点时弹出新窗口跳转
                     , click: function (obj) {
                     var data = obj.data;  //获取当前点击的节点数据
                      layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
                      }
                    });
            
            })