layui简单树形组件,layui tree

html:

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

js:

     layui.use(['tree', 'util'], function () {
            var tree = layui.tree
            , layer = layui.layer
            , util = layui.util

           //模拟数据
          , data = [{
              title: '一级1'
            , id: 1
            , field: 'name1'
            , checked: true
            , spread: true
            , children: [{
                title: '二级1-1 可允许跳转'
              , id: 3
              , field: 'name11'
              , href: 'https://www.layui.com/'
            }]
          }, {
              title: '一级2'
            , id: 2
            , field: ''
            , spread: true
            , children: [{
                title: '二级2-1'
              , id: 5
              , field: ''
              , spread: true
            }, {
                title: '二级2-2'
              , id: 6
              , field: ''
            }]
          }]

            //基本演示
            tree.render({
                elem: '#test12'
              , data: data
              , showCheckbox: true  //是否显示复选框
              , id: 'demoId1'
              , isJump: true //是否允许点击节点时弹出新窗口跳转
              , click: function (obj) {
                  var data = obj.data;  //获取当前点击的节点数据
                  layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
              }
            });

        });