怎么在layui中使用tree組件

怎么在layui中使用tree組件？很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

layui是什么

layui是一款采用自身模塊規(guī)范編寫的前端UI框架，它遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，適合新手，并且它還提供了豐富的內(nèi)置模塊，他們皆可通過模塊化的方式按需加載，從核心代碼到API的每一處細(xì)節(jié)都經(jīng)過精心雕琢，非常適合界面的快速開發(fā)，能夠作為PC網(wǎng)頁端后臺系統(tǒng)與前臺界面的速成開發(fā)方案。

HTML：

<div class="layui-btn-container">
  <button class="layui-btn layui-btn-sm" type="button" lay-demo="getChecked">獲取選中節(jié)點(diǎn)數(shù)據(jù)</button>
  <button class="layui-btn layui-btn-sm" type="button" lay-demo="setChecked">勾選指定節(jié)點(diǎn)</button>
  <button class="layui-btn layui-btn-sm" type="button" lay-demo="reload">重載實(shí)例</button>
</div>
<div class="demoTable">
  <div class="layui-inline">
    <input type="text" class="layui-input" id="tree_name" autocomplete="off" />
  </div>
  <button class="layui-btn" id="btn_query">搜索</button>
</div>
<div id="test1" class="demo-tree demo-tree-box"></div>

JavaScript：

layui.use(['tree', 'util'], function(){
    var $ = layui.$;
    var tree = layui.tree
        ,layer = layui.layer
        ,util = layui.util
    //模擬數(shù)據(jù)
        ,data1 = [{
          title: '江西'
          ,id: 1
          ,children: [{
            title: '南昌'
            ,id: 1000
            ,children: [{
              title: '青山湖區(qū)'
              ,id: 10001
            },{
              title: '高新區(qū)'
              ,id: 10002
            }]
          },{
            title: '九江'
            ,id: 1001
          },{
            title: '贛州'
            ,id: 1002
          }]
        },{
          title: '廣西'
          ,id: 2
          ,children: [{
            title: '南寧'
            ,id: 2000
          },{
            title: '桂林'
            ,id: 2001
          }]
        },{
          title: '陜西'
          ,id: 3
          ,children: [{
            title: '西安'
            ,id: 3000
          },{
            title: '延安'
            ,id: 3001
          }]
        },{
          title: '四川（可跳轉(zhuǎn)）'
          ,id: 4
          ,href: 'https://www.layui.com/'
          ,children: [{
            title: '成都'
            ,id: 3000
            ,checked: true //默認(rèn)選中
          },{
            title: '雅安'
            ,id: 3001
          }]
        }];
 
    //常規(guī)用法
    tree.render({
      elem: '#test1' //默認(rèn)是點(diǎn)擊節(jié)點(diǎn)可進(jìn)行收縮
      ,data: data1
      ,id: 'demoId1'
      ,showCheckbox: true //是否顯示復(fù)選框
      ,isJump: true //是否允許點(diǎn)擊節(jié)點(diǎn)時(shí)彈出新窗口跳轉(zhuǎn)
      ,showLine: true //是否開啟連接線
      ,edit: ['add', 'update', 'del'] //開啟操作節(jié)點(diǎn)的圖標(biāo)
      ,click: function(obj){
        var data = obj.data; //獲取當(dāng)前點(diǎn)擊的節(jié)點(diǎn)數(shù)據(jù)
        layer.msg('狀態(tài)：'+ obj.state + '<br>節(jié)點(diǎn)數(shù)據(jù)：' + JSON.stringify(data));
      }
    });
 
    //按鈕事件
    util.event('lay-demo', {
      getChecked: function(othis){
        var checkedData = tree.getChecked('demoId1'); //獲取選中節(jié)點(diǎn)的數(shù)據(jù)
 
        layer.alert(JSON.stringify(checkedData), {shade:0});
        console.log(checkedData);
      }
      ,setChecked: function(){
        tree.setChecked('demoId1', [3, 4]); //勾選指定節(jié)點(diǎn)
      }
      ,reload: function(){
        //重載實(shí)例
        tree.reload('demoId1', {});
      }
    });
 
    //搜索節(jié)點(diǎn)值
    $('#btn_query').click(function () {
      var name = $("#tree_name").val(); //搜索值
      var elem = $("#test1").find('.layui-tree-txt').css('color', ''); //搜索文本與設(shè)置默認(rèn)顏色
      if (!name) {
        return; //無搜索值返回
      }
      elem.filter(':contains(' + name + ')').css('color', '#FFB800'); //搜索文本并設(shè)置標(biāo)志顏色
      elem.parents('.layui-tree-pack').prev().find('.layui-tree-iconClick').click(); //展開選項(xiàng)
      //console.log(elem);
    })
 
  });

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。