---

插件使用要求
1、瀏覽器（極速模式、ie11或以上、google瀏覽器）

---

代碼以及例子
使用本插件，請務(wù)必以碼云中的代碼為準，例子文件為index.html
在線(xiàn) demo
碼云地址： 代碼

---

常見(jiàn)問(wèn)題及注意：
1、例子不支持本地C://test/inde.html形式運行
2、根節點(diǎn)在第一個(gè)
3、確保url請求到數據（多數人員在此環(huán)節存在問(wèn)題）

---

如何提問(wèn)：
在 treeGrid第二版 中提問(wèn)或建議。

---

更新日志：

20180904
1、json數據源順序不再需要根節點(diǎn)在第一位，可以是無(wú)序（從數據庫中只需要查詢(xún)，不需要排序）
2、增加icon控制，默認開(kāi)啟圖標，提供默認圖標，可自定義圖標
3、多選：默認選中，禁止選中等功能。
4、提供展開(kāi)折疊全部節點(diǎn)功能，提供默認值控制展開(kāi)或折疊節點(diǎn)

在layui2.3的table組件基礎上獨立擴展出來(lái)針對普通表格和樹(shù)狀表格的插件，主要增加如下功能。
1、【增加】支持樹(shù)狀表格
2、【增加】支持折疊記憶功能（折疊的節點(diǎn)不受父節點(diǎn)折疊狀態(tài)影響）
3、【增加】動(dòng)態(tài)新增行（一行或多行）
4、【優(yōu)化】動(dòng)態(tài)刪除行（一行或多行）
5、【增加】行內過(guò)濾（每次提交會(huì )自動(dòng)提交此區域的參數，需要結合后臺使用）
6、【增加】方法式打開(kāi)或折疊任意節點(diǎn)（table.treeNodeOpen(o,isOpen)）
7、【增加】數據刷新query方法（與reload方法區別在于，只刷新數據區域，而不是重新渲染整個(gè)table）
8、內部對原來(lái)table的渲染方法進(jìn)行了拆分，以便更精準控制table的行為（分別是生成單元格、生成tr、渲染分頁(yè)、渲染行內過(guò)濾區域、渲染全部、渲染節點(diǎn)內容等等）

效果圖：
整體效果：


折疊記憶：


新增節點(diǎn)：


刪除節點(diǎn)：


刪除多個(gè)節點(diǎn)：


節點(diǎn)初始化隱藏、顯示控制
1、數據源設置is_open
{"id":"111", "pId":"1", "name":"蘋(píng)果","lay_is_open":false}
效果


多選操作（選中父節點(diǎn)，子節點(diǎn)被選中；全部子節點(diǎn)被選中，父節點(diǎn)也被選中；自己看效果）

<script>
    var editObj=null,ptable=null,treeGrid=null,tableId='treeTable',layer=null;
    layui.config({
        base: 'design/extend/'
    }).extend({
        treeGrid:'treeGrid'
    }).use(['jquery','treeGrid','layer'], function(){
        var $=layui.jquery;
        treeGrid = layui.treeGrid;//很重要
        layer=layui.layer;
        ptable=treeGrid.render({
            id:tableId
            ,elem: '#'+tableId
            ,idField:'id'
            ,url:'/data2.json'
            ,cellMinWidth: 100
            ,treeId:'id'//樹(shù)形id字段名稱(chēng)
            ,treeUpId:'pId'//樹(shù)形父id字段名稱(chēng)
            ,treeShowName:'name'//以樹(shù)形式顯示的字段
            ,cols: [[
                {width:100,title: '操作', align:'center'/*toolbar: '#barDemo'*/
                    ,templet: function(d){
                    var html='';
                    var addBtn='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加</a>';
                    var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>';
                    return addBtn+delBtn;
                }
                }
                ,{field:'name', edit:'text',width:300, title: '水果名稱(chēng)'}
                ,{field:'id',width:100, title: 'id'}
                ,{field:'pId', title: 'pid'}
            ]]
            ,page:false
        });

        treeGrid.on('tool('+tableId+')',function (obj) {
            if(obj.event === 'del'){//刪除行
                del(obj);
            }else if(obj.event==="add"){//添加行
                add(obj.data);
            }
        });
    });

    function del(obj) {
        layer.confirm("你確定刪除數據嗎？如果存在下級節點(diǎn)則一并刪除，此操作不能撤銷(xiāo)！", {icon: 3, title:'提示'},
            function(index){//確定回調
                obj.del();
                layer.close(index);
            },function (index) {//取消回調
               layer.close(index);
            }
        );
    }


    var i=1000;
    //添加
    function add(pObj) {
        var param={};
        param.name='水果'+Math.random();
        param.id=++i;
        param.pId=pObj?pObj.id:0;
        treeGrid.addRow(tableId,pObj?pObj.LAY_TABLE_INDEX+1:0,param);
    }

    function print() {
        console.log(treeGrid.cache[tableId]);
        var loadIndex=layer.msg("對象已打印，按F12，在控制臺查看！", {
            time:3000
            ,offset: 'auto'//頂部
            ,shade: 0
        });
    }
</script>