layui树形组键

4212人阅读 2021/4/27 17:10 总访问:652164 评论: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));
                      }
                    });
            
            })


评价
脚踏实地,一步一个脚印
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术