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==t rue ? '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>
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/framework/layui/15588.html