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. CDQ题目套路总结 [未完成]

    CDQ学习资料 day1cdq分治相关 CDQ的IOI论文 1.优化斜率dp 左边对右边影响维护一个凸包解决 需要知识:①凸包②斜率dp 题目:√ HDU3842 Machine Works   HY ...

  2. Android Spinner 绑定键值对

    这里给大家提供下绑定 spinner键值对的方法. 首先创建绑定模型BaseItem public class BaseItem { public BaseItem(Integer id,String ...

  3. 洛谷p1091合唱队形题解

    题目 合唱队形首先要满足的是从1这个位置到中间任意的位置为单增的,从中间任意的位置到最后是单减的,且长度最长.这样才能满足出列的同学最少. 如果要满足这个条件那么我们可以先预处理出每个点的从前找的最长 ...

  4. windows查看进程占用并强制结束进程

    打开命令提示符(CMD) 查看8080端口被哪个进程占用了,命令:netstat   -ano|findstr 8080 上面的8080端口的PID是30160,可以根据PID可以杀死这个进程,用下面 ...

  5. FastDFS安装与使用

    1. FastDFS介绍 FastDFS是一个开源的轻量级分布式文件系统,由跟踪服务器(tracker server).存储服务器(storage server)和客户端(client)三个部分组成, ...

  6. Hdoj 2036.改革春风吹满地 题解

    Problem Description " 改革春风吹满地, 不会AC没关系; 实在不行回老家, 还有一亩三分地. 谢谢!(乐队奏乐)" 话说部分学生心态极好,每天就知道游戏,这次 ...

  7. 【arc073f】Many Moves（动态规划，线段树）

    [arc073f]Many Moves(动态规划,线段树) 题面 atcoder 洛谷 题解 设\(f[i][j]\)表示第一个棋子在\(i\),第二个棋子在\(j\)的最小移动代价. 发现在一次移动 ...

  8. 【docker】docker安装和使用

    一.docker简介: docker是容器技术的一个代表,而容器技术是将程序打包和隔离的一种技术,其实它并不是一个新技术,之前在linux内核中早已存在,真正被大众所用所了解是因为docker的出现. ...

  9. DNA Consensus String

    题目(中英对照): DNA (Deoxyribonucleic Acid) is the molecule which contains the genetic instructions. It co ...

  10. 用lemon测交互题

    题目类型:传统. 答案比较类型:逐行比较类型(忽略多余空格和制表符). 配置:交互. 编译器参数: -o %s %s.* ..\..\data\%s\judge.cpp -Wl,--stack= ju ...