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. CodeForces 589B-Layer Cake-暴力模拟

    刚看到这个题的想法是建图搜路,写出来了才发现这个做法不行,不能把每一个矩形看成不可分的点,因为最终的矩形可能两条边出现在不同矩形里. 后来看了题解才明白直接暴力就行.关键是明白最终的矩形两条边都在所给 ...

  2. ☆ [HDU2089] 不要62「数位DP」

    类型:数位DP 传送门:>Here< 题意:问区间$[n,m]$的数字中,不含4以及62的数字总数 解题思路 数位DP入门题 先考虑一般的暴力做法,整个区间扫一遍,判断每个数是否合法并累计 ...

  3. django 配置邮件发送 send_email

    导入 send_email 所用方法导入 from django.core.mail import send_mail 因为使用的需要指明 发送人 所以要把 setting.py 中的 EMAIL_F ...

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

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

  5. Qt Creator 中文编译失败 怎么办

    在Qt Creator 中c++源码有中文字符,结果不能编译成功. 代码 QMessageBox::warning(this, "警告","用户名密码错误",Q ...

  6. 数论细节梳理&模板

    初阶 扩展欧拉 \(k\ge\varphi(m)\)时,\(b^k\equiv b^{k\%\varphi(m)+\varphi(m)}(\bmod m\)) 扩展CRT 推式子合并同余方程. htt ...

  7. CS Academy Gcd on a Circle（dp + 线段树）

    题意 给你一个长为 \(n\) 的环,你可以把它断成任意 \(k\) 段 \((1 < k \le n)\) ,使得每一段的 \(\gcd\) 都 \(>1\) . 问总共有多少种方案,对 ...

  8. android 读取EXcel 文件 读取文件内存卡的权限

    android 采用Java的读取xls文件的方式实现. 需要导入第三方Jxl.jar 包.  代码改自 其他博主  : 这只摘录下 读取xls文件的部分代码,当然这个代码在安卓平台需要添加下面的权限 ...

  9. 【BZOJ5324】[JXOI2018]守卫（动态规划）

    [BZOJ5324][JXOI2018]守卫(动态规划) 题面 BZOJ 洛谷 题解 既然只能看到横坐标在左侧的点,那么对于任意一个区间\([l,r]\)而言,\(r\)必须被选. 假设\(r\)看不 ...

  10. FLAG区

    以下是一些flag(倒了我也不会怎么样): 更博客(对不起 您呼叫的flag是空号 请稍后再拨) CTS/APIO2019 Cu+ NOI2019 Ag+