详细介绍使用layui 的treeTable

    2018年11月21日 23:15   3898 人阅读  2 条评论   编辑

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

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

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://www.chenxm.cc/article/215.html
版权声明: 本文为原创文章,版权归  陈新明  所有,欢迎分享本文,转载请保留出处!
PREVIOUS: Django 原生Ajax详解
NEXT: python3 微信公众平台开发——获取accessToken
 相关文章  关键词:

 发表评论

  1. zrd
    zrd  @回复

    请问树形菜单应该怎么做?一直显示未命名,我的数据就是json格式的