<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 樹形組件文檔 - layui.tree

      在一段漫長的雪藏后,我們在 layui 2.5.0 的版本中重新創作了 tree,以便它能夠更加適用于絕大多數業務場景,而風格依然遵循 layui 獨有的極簡和清爽。需要提醒的是,如果您的項目中仍然采用了 layui 2.5 版本之前的 tree,它將不被兼容,請盡快修改為以下新的調用方式。

      模塊加載名稱:tree

      快速使用

      通過 tree.render() 方法指定一個元素,便可快速創建一個 tree 實例。

      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8">
        <title>樹組件</title>
        <link rel="stylesheet" href="../src/css/layui.css">
      </head>
      <body>
        <div id="test1"></div>
        <script src="../src/layui.js"></script>
        <script>
        layui.use('tree', function(){
          var tree = layui.tree;
         
          //渲染
          var inst1 = tree.render({
            elem: '#test1'  //綁定元素
            ,data: [{
              title: '江西' //一級菜單
              ,children: [{
                title: '南昌' //二級菜單
                ,children: [{
                  title: '高新區' //三級菜單
                  //…… //以此類推,可無限層級
                }]
              }]
            },{
              title: '陜西' //一級菜單
              ,children: [{
                title: '西安' //二級菜單
              }]
            }]
          });
        });
        </script>
      </body>
      </html>
            
      基礎參數

      目前 tree 組件提供以下基礎參數,可根據需要進行相應的設置

      參數選項 說明 類型 示例值
      elem 指向容器選擇器 String/Object -
      data 數據源 Array 詳見數據選項
      id 設定實例唯一索引,用于基礎方法傳參使用。 String -
      showCheckbox 是否顯示復選框 Boolean false
      edit 是否開啟節點的操作圖標。默認 false。
      • 若為 true,則默認顯示“改刪”圖標
      • 若為 數組,則可自由配置操作圖標的顯示狀態和順序,目前支持的操作圖標有:addupdatedel,如:

        edit: ['add', 'update', 'del']
      Boolean/Array ['update', 'del']
      accordion 是否開啟手風琴模式,默認 false Boolean false
      onlyIconControl 是否僅允許節點左側圖標控制展開收縮。默認 false(即點擊節點本身也可控制)。若為 true,則只能通過節點左側圖標來展開收縮 Boolean false
      isJump 是否允許點擊節點時彈出新窗口跳轉。默認 false,若開啟,需在節點數據中設定 link 參數(值為 url 格式) Boolean false
      showLine 是否開啟連接線。默認 true,若設為 false,則節點左側出現三角圖標。 Boolean true
      text 自定義各類默認文本,目前支持以下設定:
      text: {
        defaultNodeName: '未命名' //節點默認名稱
        ,none: '無數據' //數據為空時的提示文本
      }             
                  
      Object -
      數據源屬性選項

      我們將 data 參數稱之為數據源,其內部支持設定以下選項

      屬性選項 說明 類型 示例值
      title 節點標題 String 未命名
      id 節點唯一索引值,用于對指定節點進行各類操作 String/Number 任意唯一的字符或數字
      field 節點字段名 String 一般對應表字段名
      children 子節點。支持設定選項同父節點 Array [{title: '子節點1', id: '111'}]
      href 點擊節點彈出新窗口對應的 url。需開啟 isJump 參數 String 任意 URL
      spread 節點是否初始展開,默認 false Boolean true
      checked 節點是否初始為選中狀態(如果開啟復選框的話),默認 false Boolean true
      disabled 節點是否為禁用狀態。默認 false Boolean false
      節點被點擊的回調

      在節點被點擊后觸發,返回的參數如下:

      tree.render({
        elem: '#test1'
        ,click: function(obj){
          console.log(obj.data); //得到當前點擊的節點數據
          console.log(obj.state); //得到當前節點的展開狀態:open、close、normal
          console.log(obj.elem); //得到當前節點元素
          
          console.log(obj.data.children); //當前節點下是否有子節點
        }
      });
            
      復選框被點擊的回調

      點擊復選框時觸發,返回的參數如下:

      tree.render({
        elem: '#test1'
        ,oncheck: function(obj){
          console.log(obj.data); //得到當前點擊的節點數據
          console.log(obj.checked); //得到當前節點的展開狀態:open、close、normal
          console.log(obj.elem); //得到當前節點元素
        }
      });
            
      操作節點的回調

      通過 operate 實現函數,對節點進行增刪改等操作時,返回操作類型及操作節點

      tree.render({
        elem: '#test1'
        ,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'){ //刪除節點
            
          };
        }
      });
            
      返回選中的節點數據

      很多時候 tree 可能不僅僅只是一個樹菜單,它還用于各種權限控制等場景,這個時候你需要獲得選中的節點。
      語法:tree.getChecked(id)

      tree.render({
        elem: '#test'
        ,data: [] //數據源
        ,id: 'demoId' //定義索引
      });
       
      //獲得選中的節點
      var checkData = tree.getChecked('demoId');
            
      設置節點勾選

      除了通過 checked 參數對節點進行初始勾選之外,你還可以通過方法動態對節點執行勾選
      語法: tree.setChecked(id, checkedId)
      參數 checkedId:代表的是數據源中的節點 id

      tree.render({
        elem: '#test'
        ,data: [] //數據源
        ,id: 'demoId' //定義索引
      });
       
      //執行節點勾選
      tree.setChecked('demoId', 1); //單個勾選 id 為 1 的節點
      tree.setChecked('demoId', [2, 3]); //批量勾選 id 為 2、3 的節點
            
      實例重載

      重載一個已經創建的組件實例,被覆蓋新的基礎屬性

      tree.render({
        elem: '#test'
        ,data: []
        ,id: 'demoId' //定義索引
      });
       
       //可以重載所有基礎參數
      tree.reload('demoId', {
        //新的參數
      });
            
      結語

      樹組件還在持續完善。

      layui - 用心與你溝通

      亚洲图色