layui中table的简单用法

482 阅读1分钟

body中加入代码

<table id="demo" lay-filter="table"></table>

script中

layui.use('table', function () {
            var table = layui.table;
            //直接赋值数据
            table.render({
                elem: '#demo',
                height: 'full-80', //整体高度减去80
                ,title: '用户数据表'
                ,url: 'json/table/demo1.json'  //接口地址
                cols: [[]], //表头,二维数组
                data: [], //数据
                skin: 'row', //表格风格
                even: true, //,size: 'lg' //尺寸
                page: true, //是否显示分页
                limits: [3, 5, 10],
                limit: 3 //每页默认显示的数量
                //,loading: false //请求数据时,是否显示loading
            });

            table.on('row(table)', function (obj) { //注:lay-filter="对应的值",点击行显示行数据,是个对象
                console.log(obj)
                var data = obj.data; //获得当前行数据
                //var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                console.log(data, tr)
            });

        });

刚接触只体验到这个,里面操作慢慢加进去