详细介绍使用layui 的treeTable

 Pala   2018-09-03 10:33   128 人阅读  0 条评论

1 到https://gitee.com/whvse/treetable-lay下载源码

2 把先运行demo,文件存放路径如下:

111.png

3. html代码主要修改两部分

<script>

    layui.config({
        base: '/static/plugins/treeGrid/module/'  // 这个是module访问的相对路径 需要修改
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['layer', 'table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var treetable = layui.treetable;
        var data_li = '';


        // 渲染表格
        var renderTable = function () {
            layer.load(2);
            treetable.render({
                treeColIndex: 1,
                treeSpid: -1,
                treeIdName: 'id',
                treePidName: 'parent',
                treeDefaultClose: true,
                treeLinkage: false,
                elem: '#table1',
                url: '/static/plugins/treeGrid/json/data.json',  // 这里是请求获取data.json文件路径,需要修改
                page: false,
                cols: [[
                    {type: 'numbers'},
                    {field: 'name', title: 'name'},
                    {field: 'id', title: 'id'},
                    {field: 'sex', title: 'sex'},
                    {field: 'parent', title: 'parent'},
                    {
                    width: 100, title: '操作', align: 'center',
                    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;
                        }
                    }
                ]],
                parseData: function (res) { //res 即为原始返回的数据
                    console.log('parseData---》');
                    console.log(res);
                },
                done: function (res, curr, count) {
                    // res 可以获取文件的数据,或者是ajax请求的数据
                    console.log(res);
                    //得到当前页码
                    console.log(curr);
                    //得到数据总量
                    console.log(count);

                    layer.closeAll('loading');
                }
            });

        };

        renderTable();

        $('#btn-expand').click(function () {
            treetable.expandAll('#table1');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#table1');
        });

        $('#btn-refresh').click(function () {
            renderTable();
        });

        //监听工具条
        table.on('tool(table1)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                layer.msg('删除' + data.id);
            } else if (layEvent === 'edit') {
                layer.msg('修改' + data.id);
            }
        });
    });
</script>

3.使用ajax获取数据,返回的数据格式,如果是初学者强烈建议按照以下格式数据返回

{'msg': 'ok', 'code': 0, 'count': 14, 'data':[{'id': 22, 'parent':-1, 'name': '注册公司'},{'id': 22, 'parent': 22, 'name': '公司注册'},]

4.如果使用ajax无法加载数据请参考:

使用layui 的treeTable插件无法加载ajax的数据解决办法

本文地址:http://chenxm.cc/post/688.html
版权声明:本文为原创文章,版权归 Pala 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?