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. Android 控件绑定封裝

    最近刚开始写android 随便记录一下,以后还会修改 绑定ListView,Spinner 先创建绑定项: BaseItem public class BaseItem { public BaseI ...

  2. Python中xlrd模块解析

    xlrd 导入模块 import xlrd 2.打开指定的excel文件,返回一个data对象 data = xlrd.open_workbook(file)                     ...

  3. bzoj 1103 : [POI2007]大都市meg (树链剖分+线段树）

    Description 在经济全球化浪潮的影响下,习惯于漫步在清晨的乡间小路的邮递员Blue Mary也开始骑着摩托车传递邮件了.不过,她经常回忆起以前在乡间漫步的情景.昔日,乡下有依次编号为1..n ...

  4. VS编译LESS插件

    1. LESS   用LESS写CSS可以用写程序代码的习惯写CSS.用了之后写CSS的效率会提高很多. 2.解释LESS 写出来的文件扩展名是.less,要运行的话,先解释成正常的CSS文件. 3. ...

  5. Python学习day1 初识python&环境安装

    day1 环境安装-计算机基础 环境安装参见 https://blog.csdn.net/ling_mochen/article/details/79314118 1.markdown基本语法 htt ...

  6. Nginx实践篇（2）- Nginx作为静态资源web服务 - 控制浏览器缓存、防盗链

    一.控制浏览器缓存 1. 浏览器缓存简介 浏览器缓存遵循HTTP协议定义的缓存机制(如:Expires;Cache-control等). 当浏览器无缓存时,请求响应流程 当浏览器有缓存时,请求响应流程 ...

  7. electron入门笔记（三）- 引入bootstrap

    源码:https://github.com/sueRimn/electron-bootstrap 当引入jQuery和bootstrap文件时,会报错,原因是:electron 的 Renderer ...

  8. [ZJOI2018]历史

    [ZJOI2018]历史 最大化access轻重链的切换次数 考虑一个点的贡献,即它交换重儿子的次数 发现这个次数只和它自己ai以及每个儿子的子树次数和有关. 一个关键的事实是: 我们可以自上而下进行 ...

  9. 洛谷P3185 分裂游戏

    解:这个毒瘤...... 我们首先发现每一堆的个数对操作不产生影响,每个操作都是针对单个石子的. 所以等价于每个石子都是一个独立的游戏.把它们异或起来作为sg函数值即可. 单个石子的sg值,直接暴力计 ...

  10. CF1140E Palindrome-less Arrays

    我觉得这道题非常有前途....... 题意:给定一个填了一半的数组,你要把它补完,使之不存在奇回文串,求方案数.字符集为k. n,k<=20w 解:不能有长为三的回文串.也就是不能有两个相隔1的 ...