table是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。

下边整理了一个栗子：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>layer学习</title>

    <link href="/Content/mycss.css" rel="stylesheet" />

    <link href="/Content/layui/css/layui.css" rel="stylesheet" />

    <script src="/Content/layui/layui.js"></script>

</head>

<body>

    <!--表格-->

    <div id="myTable" lay-filter="test"></div>

    <!--工具栏-->

    <script type="text/html" id="barDemo">

        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    </script>

    <script type="text/html" id="allow">

        <!-- 这里的 checked 的状态只是演示 -->

        <input type="checkbox" name="{{d.Id}}" value="{{d.Id}}" title="允许" lay-filter="allowSetFilter"  {{ d.IsAllow == true ? 'checked' : '' }}>

    </script>

    <script>

        layui.use(['table','form'], function () {

            var table = layui.table;

            form = layui.form;

            //*******************************渲染表格**********************************

            table.render({

                //------------------------核心参数

                elem: '#myTable'                         //渲染的dom元素

                , url: '/Home/GetUserList'               //异步请求接口

                , page: true                             //开启分页

                , id: 'elementID'                        //容器唯一ID

                , cols: [[                               //列设置

                    { field: 'Id', title: '编号', sort: true, fixed: 'left' }

                    , { field: 'Name', title: '姓名' }

                    , { field: 'Age', title: '年龄' }

                    , { field: 'Role', title: '角色' }

                    , { field: 'CreateTime', title: '创建时间' }

                    , {

                        title: '自定义模板', width: 200

                        , templet: function (d) {

                            return  '姓名：<span style="color: #c00;">' + d.Name + '</span>'

                        }

                    }

                    , { field: 'IsAllow', title: '是否使用', templet: '#allow', unresize: true, align: 'center' }

                    , { fixed: 'right', width: 150, align: 'center', toolbar: '#barDemo' }

                ]]

                //-----------------------------异步请求设置

                , method: 'post'                          //异步请求方式

                , headers: { hello: 'hengheng' }          //在request的header中添加数据

                , request: {                              //request设置，默认值如下

                    pageName: 'page',

                    limitName: 'limit'

                }

                , response: {                             //response设置，默认值如下

                    statusName: 'code'

                    , countName: 'count'

                    , dataName: 'data'

                    , msgName: 'msg'

                }

                , where: {                                //向后台添加的额外参数

                    nameParm: 'u',

                    roleParm: 'o'

                }

                //-----------------------加载的其他选项

                , done: function (res, curr, count) {

                    //res为接口返回的数据、count为数据总长度

                    console.log(res);

                    console.log(curr);

                    console.log(count);

                }

                , text: {

                    none: '暂无相关数据'                   //默认：无数据。

                }

                , initSort: {

                    field: 'Id'                           //排序字段为Id

                    , type: 'desc'                        //排序方式  asc: 升序、desc: 降序、null: 默认排序

                }

            })

            //*******************************监听表格**********************************

            table.on('tool(test)', function (obj) {        //test为lay-filter值

                var data = obj.data;                       //获得当前行数据

                var layEvent = obj.event;                  //获得 lay-event

                var tr = obj.tr;                           //获得当前行 tr 的DOM对象

                if (layEvent === 'edit') {

                    var id = data.Id;

                    layer.open({

                        type: 2

                        , title: '修改'                   //标题栏

                        , scrollbar: false

                        , area: ['400px', '300px']

                        , shade: 0.5

                        , id: 'layerId'                  //设定一个id，防止重复弹出

                        , moveType: 1                    //拖拽模式，0或者1

                        , content: '/Home/EditUserInfo?id=' + id

                    });

                } else if (layEvent === 'del') {

                    layer.confirm('真的删除吗？', function (index) {

                        obj.del();                            //删除对应行（tr）的DOM结构

                        layer.close(index);

                        var id = data.Id;                     //向服务端发送删除指令

                        $.post("/Home/DeleteUserInfo", { "id": id }, function (result) {

                            if (result.IsSuccess === 1) {

                                layer.msg(result.Msg);

                                table.reload('elementID');

                            } else {

                                layer.msg(result.Msg);

                                table.reload('elementID');

                            }

                        })

                    });

                }

            });

            //*******************************监听checkbox********************************

            //监听操作----置顶

            form.on('checkbox(allowSetFilter)', function (obj) {

                var pre = {

                    "Id": this.name,

                    "IsAllow": obj.elem.checked

                };

               //alert(this.name+'----'+obj.elem.checked);

                $.post('/Home/SetAllow', pre, function (result) {

                    if (result.IsSuccess === 1) {

                        layer.msg(result.msg)

                    } else {

                        layer.msg(result.msg)

                    }

                })

            });

        });

    </script>

</body>

</html>

注:这是为了个人查找方便整理的文档，并没有总结完全，查看更多可访问官网http://www.layui.com/doc

layui(四)——table组件常见用法总结的更多相关文章

  1. layui(七)——rate组件常见用法总结

    layui中提供了rate组件,用法很简单,直接上代码. <div id="test1"></div> <script> layui.use(' ...

  2. layui(二)——layer组件常见用法总结

    layer是layui的代表作,功能十分强大,为方便以后快速配置这里对其常见用法做了简单总结 一.常用调用方式 //1.普通消息:alert(content,[options],[yesCallBac ...

  3. layui(三)——laypage组件常见用法总结

    laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染.核心方法: laypage.render(options)  来设置基础参数. 一.laypag ...

  4. layui(六)——upload组件常见用法总结

    layui中提供了非常简单的文件上传组件,这里写了一个上传图片的栗子,上传成功后返回图片在服务器的路径,并设置为页面中img的src属性.因为上传十分简单,没什么可说的,就直接上代码了. html代码 ...

  5. layui(九)——flow组件常见用法总结

    该模块包含 信息流加载 和  图片懒加载  两大核心支持,无论是对服务端.还是前端体验,都有非常大的性能帮助.下边分别给出了这两种技术的使用方法 一.信息流加载 信息流加载的核心方法时  flow.l ...

  6. layui(五)——form组件常见用法总结

    form 是我们非常看重的一块.layui中的form实现全自动的初始渲染,和基于事件驱动的接口书写方式.我整理了layui中form的配置.下边直接给一个栗子,后台采用.net MVC,除了razo ...

  7. layui（一）——layDate组件常见用法

    和 layer 一样,我们可以在 layui 中使用 layDate,也可直接使用 layDate 独立版,可按照实际需求来选择.options整理如下: layui.use('laydate', f ...

  8. element-ui当中table组件的合并行和列的属性:span-method的用法

    背景 最近基本上都是以Vue来构建项目,而UI框架也基本上都是使用的element-ui,所以里面组件用的也是越来越多,今天想记录的是非常非常小的一个属性的用法. Table组件 Table组件用了真 ...

  9. Layui table 组件的使用：初始化加载数据、数据刷新表格、传参数

    背景 笔者之前一直使用 bootstrap table ,因为当前项目中主要使用 Layui 框架,于是也就随了 Layui table ,只是在使用的时候出现了一些问题,当然也是怪自己不熟悉的锅吧! ...

随机推荐

  1. springMVC整理05--数据校验、格式化 & 其他注解 & 数据绑定流程

    1.  数据校验.数据格式化 参考博客 http://www.importnew.com/19477.html 1.1  数据校验 使用 spring 数据校验,先要导入校验器的 jar: <! ...

  2. 手机Web 开发中图片img 如何等比例缩放

    如果图片本身没有设置 width.height属性的话,只需要修改 max-width:100%; 就可以了 如果图片本身设置了 width.height属性的话,需要同时修改width 和heigh ...

  3. MT【272】更大的视野，更好的思路.

    已知$f(x)=\sum\limits_{k=1}^{2017}\dfrac{\cos kx}{\cos^k x},$则$f(\dfrac{\pi}{2018})=$_____ 分析:设$g(x)=\ ...

  4. 【BZOJ3215/3216】[ZJOI2013]话旧/话旧2（组合数学，动态规划）

    [BZOJ3215/3216][ZJOI2013]话旧/话旧2(组合数学,动态规划) 题面 BZOJ3215 BZOJ3216 题解 先解决\(3216\),求的是最小值为\(0\). 因为起点就是\ ...

  5. python 去重

    List: listA = ['python','python','言','是','一','门','动','态','语','言'] print sorted(set(listA), key = lis ...

  6. 每天一个linux命令（02）：route命令

    route命令用来显示并设置Linux内核中的网络路由表,route命令设置的路由主要是静态路由.要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或者同时位于两个网络的网关来实现. 在L ...

  7. SElinux解决web网站无法访问

    SElinux解决web网站无法访问工具/原料centos 6.5系统httpd web服务器 SELinux 设置为enforcing:强制模式,代表 SELinux 运作中 方法/步骤1. 1se ...

  8. HDU 6319 Problem A. Ascending Rating（单调队列）

    要求一个区间内的最大值和每次数过去最大值更新的次数,然后求每次的这个值异或 i 的总和. 这个序列一共有n个数,前k个直接给出来,从k+1到n个数用公式计算出来. 因为要最大值,所以就要用到单调队列, ...

  9. BZOJ5262(容斥)

    题目描述 听着自己美妙的曲子,小Z进入了梦乡.在梦中,小Z仿佛又回到了自己纵横考场的年代.在梦中,小Z参加了一场 考试,这场考试一共有n道题,每道题的最终得分都是一个大于等于0的整数.然而醒来后,小Z ...

  10. css预编译语言sass——mixin的使用

    以根据不同屏幕吃寸动态应用背景图片为例 新建一个mixin如下: @mixin bg_img($path, $ext){ @media screen and (max-device-width: 76 ...