zoukankan      html  css  js  c++  java
  • layui table 详细讲解

     layui.use('table', function () {
                var table = layui.table;
                /*第一种原始写法*/
                /*
                table.render({
                    id: 'laydictsList',
                    elem: '#test',
                    url: areasURL + "/base_dics/LayuigetPageList",
                    cellMinWidth: 80,//全局定义常规单元格的最小宽度,layui 2.2.1 新增
                    where: { txtFullName: null },
                    page: true,
                    //toolbar:'barDemo',
                    limit: 10,
                    limits: [2, 5, 10, 20, 30],
                    text: {
                        none: '暂无相关数据!'//默认无数据
                    },
                    cols: [[
                      { type: 'checkbox', LAY_CHECKED: false },
                      { field: 'dicsid', 80, title: 'ID', sort: true, hide: true },
                      { field: 'code', 80, title: '编号' },
                      { field: 'sortnum', 80, title: '序号', sort: true },
                      { field: 'fullname', 80, title: '名称' },
                      { field: 'diccategoryname', title: '所属类别', '30%', minWidth: 100 }, //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
                      { field: 'experience', title: '操作' }
                    ]]
                });
            });
            */
                /*第二种改进版*/
                table.render({
                    id: 'laydictsList',
                    elem: '#test',
                    url: areasURL + "/base_dics/getPageList",
                    method: "post",
                    request: {
                        pageName: 'PageNum', //页码的参数名称,默认:page
                        limitName: 'PageSize' //每页数据量的参数名,默认:limit
                    },
                    response: {
                        statusName: 'ReturnType', //数据状态的字段名称,默认:code
                        statusCode: true,//成功的状态码,默认:0
                        msgName: 'ReturnMsg', //状态信息的字段名称,默认:msg
                        countName: 'ReturnCount', //数据总数的字段名称,默认:count
                        dataName: 'ReturnData', //数据列表的字段名称,默认:data
                    },
                    cellMinWidth: 80,//全局定义常规单元格的最小宽度,layui 2.2.1 新增
                    where: { txtFullName: null },
                    page: true,
                    //toolbar:'barDemo',
                    limit: 10,
                    limits: [2, 5, 10, 20, 30],
                    text: {
                        none: '暂无相关数据!'//默认无数据
                    },
                    cols: [[
                      { type: 'checkbox', LAY_CHECKED: false },
                      { field: 'dicsid', 80, title: 'ID', sort: true, hide: true },
                      { field: 'code', 80, title: '编号' },
                      { field: 'sortnum', 80, title: '序号', sort: true },
                      { field: 'fullname', 80, title: '名称' },
                      { field: 'diccategoryname', title: '所属类别', '30%', minWidth: 100 }, //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
                      { field: 'experience', title: '操作' }
                    ]]
                });
            });
  • 相关阅读:
    [tp3.2.1]sql查询语句(一)
    [crunch bang]在Crunch Bang安装和设置fcitx(小企鹅输入法)
    [tp3.2.1]大D构建模型
    [tp3.2.1]数据模型
    [tp3.2.1]开启URL(重写模式),省略URL中的index.php
    [tp3.2.1]让默认页面: 加载Home模块的Index控制器;而让admin.php默认去加载Admin模块的Adminc控制器.
    [JAVA]在linux中设置JDK环境,ZendStudio,Eclipse
    [fedora21]给fedora21安装fcitx输入法
    Software--Architecture--Design DataAccess 数据访问
    leetcode--Algorithm--Array_Part 1 Easy- 566 Reshape the Matrix
  • 原文地址:https://www.cnblogs.com/dullbaby/p/9199144.html
Copyright © 2011-2022 走看看