Layui - Xtree 3.0 http://acmeworker.com/BlogContent?type=1038

2018年1月11日升級

Layui - Xtree 3.0

此版本包含了前兩個版本所有的功能，同時修復了一些問題，增加了一些功能，之前的版本可以直接拋棄啦！
本次升級改動較多，參數也有所更改，儘量別直接覆蓋之前版本，而是當成一個全新的tree插件來對待吧！

 

Demo地址： http://www.acmeworker.com/layuiXtree/XtreeDemo

碼雲地址： https://gitee.com/xianglikai1/layui-tree2.0 

博客地址： http://www.acmeworker.com/BlogContent?type=1038

效果圖：

 

---

功能說明：（詳細使用方式在下面的文檔中）
1、常規tree，無層級限制；
2、增加checkbox複選框；
3、兩種數據綁定方式，json數組/異步數據接口，優化了數據格式；
4、節點默認選中狀態；
5、節點是否可用；
6、父級節點擁有其子級節點全選功能；
7、父級節點監聽子級節點選中狀態，並更改自身狀態；
8、加載等待提示；
9、加載完畢後的初始展開狀態；
10、三種節點圖標樣式自定義設置，取自layui圖標；
11、三種節點圖標顏色自定義配色；
12、全選框；
13、全選框狀態更改觸發的監聽事件自定義；
14、節點狀態更改的監聽事件自定義（節點點擊事件，不包含全選框）；
15、可自動撐起容器高度，容器最小高度100px；
16、解決單頁面多個xtree衝突的問題；
17、如layui一樣簡單的使用方式；

提供四種方法：
1、獲取全部[選中的][末級節點]原checkbox DOM對象，返回Array
2、獲取全部原checkbox DOM對象，返回Array
3、通過value值找父級DOM對象，頂級節點與錯誤值均返回null
4、更新數據，重新渲染，無返回值

---

使用文檔：

一、引用
頁面中引用了 layui 的 css 和 js 後，添加引用 layui-xtree.js 一個文件即可，原生js，不依賴jquery。
所有xtree的js代碼均要寫在 layui.use(['form'], function () { **這裏** });

二、容器
html中只需要一個準備好的div即可，寬度需要你來指定，高度可自動撐起，也可固定配合 overflow: auto;
注意，容器必須放在這樣的一個form表單中:<form class="layui-form"></form>

<form class="layui-form">
      <div id="xtree1" style="width:400px;border:1px solid black;padding: 10px 0 25px 5px;"></div>
</form>

三、最簡單的用法，三個必須的參數
elem：放置xtree的容器id，不要帶#號
form：layui的form對象
data：數據，可直接寫json數組，也可寫一個異步接口
數據格式在下面

var xtree1 = new layuiXtree({
      elem: 'xtree1'   //(必填) 放置xtree的容器id，不要帶#號
      , form: form     //(必填) layui 的 from
      , data: json     //(必填) json數組（數據格式在下面）
});

或

var xtree2 = new layuiXtree({
      elem: 'xtree2'  //(必填) 放置xtree的容器id，不要帶#號
      , form: form    //(必填) layui 的 from
      , data: 'server/xtreedata.ashx'  //(必填) 數據接口，需要返回以上結構的json字符串（數據格式在下面）
});

四、帶全部參數的完整用法：
直接看代碼吧

var xtree3 = new layuiXtree({
       elem: 'xtree3'                  //必填
       , form: form                    //必填
       , data: 'server/xtreedata2.ashx' //必填
       , isopen: false  //加載完畢後的展開狀態，默認值：true
       , ckall: true    //啓用全選功能，默認值：false
       , ckallback: function () { } //全選框狀態改變後執行的回調函數
       , icon: {        //三種圖標樣式，更改幾個都可以，用的是layui的圖標
           open: "圖標代號"       //節點打開的圖標
           , close: "圖標代號"    //節點關閉的圖標
           , end: "圖標代號"      //末尾節點的圖標
       }
       , color: {       //三種圖標顏色，獨立配色，更改幾個都可以
           open: "#EE9A00"        //節點圖標打開的顏色
           , close: "#EEC591"     //節點圖標關閉的顏色
           , end: "#828282"       //末級節點圖標的顏色
       }
       , click: function (data) {  //節點選中狀態改變事件監聽，全選框有自己的監聽事件
           console.log(data.elem); //得到checkbox原始DOM對象
           console.log(data.elem.checked); //開關是否開啓，true或者false
           console.log(data.value); //開關value值，也可以通過data.elem.value得到
           console.log(data.othis); //得到美化後的DOM對象
       }
});

五、json數據格式，需要的爲json數組
title：string 顯示的值 （必填）
value：string 隱藏的值 （必填）
checked：bool 默認是否選中，true爲選中，false與不填都爲不選中 （選填）
disabled：bool 是否可用，true爲不可用，false與不填都爲可用 （選填）
data： json數組 節點的子節點數組，結構與此節點一致，（必填）如果無子節點則必須爲 data:[]

補充說明：
checked只作用於末級節點，有子級的節點不起作用；
disabled作用於非末級節點，你會感覺很奇怪；

結構舉例：

[
     {
         title: "節點1", value: "jd1", data: [
         { title: "節點1.1", checked: true, disabled: true, value: "jd1.1", data: [] }
        , { title: "節點1.2", value: "jd1.2", checked: true, data: [] }
        , { title: "節點1.3", value: "jd1.3", disabled: true, data: [] }
        , { title: "節點1.4", value: "jd1.4", data: [] }
        ]
    }
  , {
        title: "節點2", value: "jd2", data: [
        { title: "節點2.1", value: "jd2.1", data: [] }
        , { title: "節點2.2", value: "jd2.2", data: [] }
        , { title: "節點2.3", value: "jd2.3", data: [] }
        , { title: "節點2.4", value: "jd2.4", data: [] }
        ]
    }
    , { title: "節點3", value: "jd3", data: [] }
    , { title: "節點4", value: "jd4", data: [] }
]

六、提供的方法
1、獲取全部[選中的][末級節點]原checkbox DOM對象，返回Array

xtree1.GetChecked();

2、獲取全部原checkbox DOM對象，返回Array

xtree1.GetAllCheckBox();

3、通過value值找父級原 checkbox DOM對象，頂級節點與錯誤值均返回null

xtree1.GetParent(‘節點的value值’);

4、更新數據，重新渲染，無返回值

xtree1.render();

---

結束語：
很抱歉，依然不兼容IE 
如果你看代碼會發現我真的是努力過了，水平有限，並未成功兼容，接下來我會繼續嘗試去兼容IE。

最後，祝 layui 越來越好！