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. BZOJ2212 [POI2011] Tree Rotations 【treap】

    题目分析: 写的无旋treap应该跑不过,但bzoj判断的总时限.把相关实现改成线段树合并就可以了. 代码: #include<bits/stdc++.h> using namespace ...

  2. ☆ [POJ2411] Mondriaan's Dream 「状压DP」

    传送门 >Here< 题意:用1*2的砖块铺满n*m的地板有几种方案 思路分析 状压经典题! 我们以$f[i][j]$作为状态,表示第i行之前全部填完并且第i行状态为j(状压)时的方案数. ...

  3. jenkins运行脚本生成HTML报告时遇到的问题

    1.jenkins生成HTML报告 1)安装插件:HTML Publisher plugin 2)系统管理->插件管理->安装HTMLHTML Publisher plugin 2.job ...

  4. python之各种装饰器的使用

    """ 装饰器,带参数的装饰器,类的装饰器 判断是否为可迭代的 from collections import Iterable print(isinstance([1, ...

  5. Hdoj 1905.Pseudoprime numbers 题解

    Problem Description Fermat's theorem states that for any prime number p and for any integer a > 1 ...

  6. DNA Evolution CodeForces - 828E（树状数组）

    题中有两种操作,第一种把某个位置的字母修改,第二种操作查询与[L, R]内与给出字符串循环起来以后对应位置的字母相同的个数.给出的字符串最大长度是10. 用一个四维树状数组表示 cnt[ATCG的编号 ...

  7. 【算法】php计算数字k在一段数字范围出现的次数

    计算数字k在0到n中的出现的次数,k可能是[0~9]内的一个值. 例如数字n=25,k=1,在1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  8. selenium 代理设置

    设置Firefox代理: from selenium import webdriver from selenium.webdriver.common.proxy import Proxy, Proxy ...

  9. PHP函数memory_get_usage获取PHP内存清耗量

    (PHP 4 >= 4.3.2, PHP 5, PHP 7) memory_get_usage — 返回分配给 PHP 的内存量 说明 int memory_get_usage ([ bool ...

  10. 绝对音乐No.1

    最近儿子在练天空之城钢琴曲.为了方便他听久石让的原版,绝对做张cd.另外加入了自己比较喜欢的几首乐曲.在家音响上聆听时发现,不管是中国乐曲,还是西洋乐,都很美,耳朵都出油了.放到网盘供喜爱之人欣赏,喜 ...