---

插件使用要求
1、浏览器（极速模式、ie11或以上、google浏览器）

---

代码以及例子
使用本插件，请务必以码云中的代码为准，例子文件为index.html
在线 demo
码云地址： 代码

---

常见问题及注意：
1、例子不支持本地C://test/inde.html形式运行
2、根节点在第一个
3、确保url请求到数据（多数人员在此环节存在问题）

---

如何提问：
在 treeGrid第二版 中提问或建议。

---

更新日志：

20180904
1、json数据源顺序不再需要根节点在第一位，可以是无序（从数据库中只需要查询，不需要排序）
2、增加icon控制，默认开启图标，提供默认图标，可自定义图标
3、多选：默认选中，禁止选中等功能。
4、提供展开折叠全部节点功能，提供默认值控制展开或折叠节点

在layui2.3的table组件基础上独立扩展出来针对普通表格和树状表格的插件，主要增加如下功能。
1、【增加】支持树状表格
2、【增加】支持折叠记忆功能（折叠的节点不受父节点折叠状态影响）
3、【增加】动态新增行（一行或多行）
4、【优化】动态删除行（一行或多行）
5、【增加】行内过滤（每次提交会自动提交此区域的参数，需要结合后台使用）
6、【增加】方法式打开或折叠任意节点（table.treeNodeOpen(o,isOpen)）
7、【增加】数据刷新query方法（与reload方法区别在于，只刷新数据区域，而不是重新渲染整个table）
8、内部对原来table的渲染方法进行了拆分，以便更精准控制table的行为（分别是生成单元格、生成tr、渲染分页、渲染行内过滤区域、渲染全部、渲染节点内容等等）

效果图：
整体效果：


折叠记忆：


新增节点：


删除节点：


删除多个节点：


节点初始化隐藏、显示控制
1、数据源设置is_open
{"id":"111", "pId":"1", "name":"苹果","lay_is_open":false}
效果


多选操作（选中父节点，子节点被选中；全部子节点被选中，父节点也被选中；自己看效果）

<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("你确定删除数据吗？如果存在下级节点则一并删除，此操作不能撤销！", {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>