樹形組件文檔 - 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 - 用心與你溝通

                    亚洲图色