---

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

---

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

---

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

---

如何提問：
在 treeGrid第二版 中提問或建議。

---

更新日志：

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

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

效果圖：
整體效果：


折疊記憶：


新增節(jié)點(diǎn)：


刪除節(jié)點(diǎn)：


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


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


多選操作（選中父節(jié)點(diǎn)，子節(jié)點(diǎn)被選中；全部子節(jié)點(diǎn)被選中，父節(jié)點(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'//樹形id字段名稱
            ,treeUpId:'pId'//樹形父id字段名稱
            ,treeShowName:'name'//以樹形式顯示的字段
            ,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: '水果名稱'}
                ,{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("你確定刪除數(shù)據(jù)嗎？如果存在下級(jí)節(jié)點(diǎn)則一并刪除，此操作不能撤銷！", {icon: 3, title:'提示'},
            function(index){//確定回調(diào)
                obj.del();
                layer.close(index);
            },function (index) {//取消回調(diào)
               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("對(duì)象已打印，按F12，在控制臺(tái)查看！", {
            time:3000
            ,offset: 'auto'//頂部
            ,shade: 0
        });
    }
</script>