05_表格

一、页面元素

1、常规用法
  • class="layui-table"
<table class="layui-table">
  <colgroup>
    <col width="150" />
    <col width="200" />
    <col />
  </colgroup>
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>技能</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>灭绝师太</td>
      <td>HTML、CSS、PHP</td>
    </tr>
    <tr>
      <td>2</td>
      <td>西门大官人</td>
      <td>PHP、ThinkPHP、Laravel</td>
    </tr>
    <tr>
      <td>3</td>
      <td>天蓬</td>
      <td>HTML、CSS、JavaScript</td>
    </tr>
    <tr>
      <td>4</td>
      <td>欧阳克</td>
      <td>PHP、ThinkPHP、小程序</td>
    </tr>
  </tbody>
</table>
2、其他风格
  • 行边框风格
<table class="layui-table" lay-skin="line"></table>
  • 列边框风格
<table class="layui-table" lay-skin="row"></table>
  • 无边框风格
<table class="layui-table" lay-skin="nob"></table>
3、尺寸
  • 小尺寸
<table class="layui-table" lay-size="sm"></table>
  • 大尺寸
<table class="layui-table" lay-size="lg"></table>
4、隔行背景
<table class="layui-table" lay-even></table>
属性名 说明
lay-even 用于开启 隔行 背景,可与其它属性一起使用
lay-skin="属性值" 边框风格,若使用默认风格不设置该属性即可
lay-size="属性值" 尺寸,若使用默认尺寸不设置该属性即可

二、表格渲染

方式 机制 适用场景
方法渲染 JS 方法的配置完成渲染 (推荐)无需写过多的 HTML,在 JS 中指定原始元素,再设定各项参数即可。
自动渲染 HTML 配置,自动渲染 无需写过多 JS,可专注于 HTML 表头部分
转换静态表格 转化一段已有的表格元素 无需配置数据接口,在 JS 中指定表格元素,并简单地给表头加上自定义属性即可
1、方法渲染
<table id="demo"></table>
<script>
  layui.use("table", function () {
    var table = layui.table;
    table.render({
      elem: "#demo",
      cols: [
        [
          //表头
          { field: "area_id", title: "ID" },
          { field: "area_name", title: "城市名" },
          { field: "area_ip_desc", title: "归属" },
          { field: "first_pinyin", title: "拼音" },
          { field: "pinyin", title: "首字母" },
          { field: "status", title: "状态" },
        ],
      ],
      data: [
        {
          area_id: 110000,
          area_name: "北京",
          area_ip_desc: "中国,北京",
          first_pinyin: "Beijing",
          pinyin: "B",
          status: 1,
        },
        {
          area_id: 120000,
          area_name: "天津",
          area_ip_desc: "中国,天津",
          first_pinyin: "Tianjin",
          pinyin: "T",
          status: 1,
        },
        {
          area_id: 130000,
          area_name: "河北省",
          area_ip_desc: "中国,河北省",
          first_pinyin: "Hebei",
          pinyin: "H",
          status: 1,
        },
        {
          area_id: 140000,
          area_name: "山西省",
          area_ip_desc: "中国,山西省",
          first_pinyin: "Shanxi",
          pinyin: "S",
          status: 1,
        },
        {
          area_id: 150000,
          area_name: "内蒙古自治区",
          area_ip_desc: "中国,内蒙古自治区",
          first_pinyin: "Inner Mongolia",
          pinyin: "I",
          status: 1,
        },
        {
          area_id: 210000,
          area_name: "辽宁省",
          area_ip_desc: "中国,辽宁省",
          first_pinyin: "Liaoning",
          pinyin: "L",
          status: 1,
        },
        {
          area_id: 220000,
          area_name: "吉林省",
          area_ip_desc: "中国,吉林省",
          first_pinyin: "Jilin",
          pinyin: "J",
          status: 1,
        },
        {
          area_id: 230000,
          area_name: "黑龙江省",
          area_ip_desc: "中国,黑龙江省",
          first_pinyin: "Heilongjiang",
          pinyin: "H",
          status: 1,
        },
        {
          area_id: 310000,
          area_name: "上海",
          area_ip_desc: "中国,上海",
          first_pinyin: "Shanghai",
          pinyin: "S",
          status: 1,
        },
        {
          area_id: 320000,
          area_name: "江苏省",
          area_ip_desc: "中国,江苏省",
          first_pinyin: "Jiangsu",
          pinyin: "J",
          status: 1,
        },
      ],
    });
  });
</script>
2、基础参数
参数 类型 说明
elem String/DOM 指定原始 table 容器的选择器或 DOM,方法渲染方式必填
width Number 设定容器宽度
height Number/String 设定容器高度:1、不填写 2、固定值 3、full-差值
cellMinWidth Number 常规单元格的最小宽度(默认:60)
skin Boolean/String 表格风格:line (行边框风格)、row (列边框风格)、nob (无边框风格)
even Boolean 隔行背景
size String 尺寸:sm (小尺寸)、lg (大尺寸)
<table id="demo"></table>
<script>
  layui.use("table", function () {
    var table = layui.table;
    table.render({
      elem: "#demo",
      cols: [
        [
          //表头
          { field: "area_id", title: "ID" },
          { field: "area_name", title: "城市名" },
          { field: "area_ip_desc", title: "归属" },
          { field: "first_pinyin", title: "拼音" },
          { field: "pinyin", title: "首字母" },
          { field: "status", title: "状态" },
        ],
      ],
      data: [
        {
          area_id: 110000,
          area_name: "北京",
          area_ip_desc: "中国,北京",
          first_pinyin: "Beijing",
          pinyin: "B",
          status: 1,
        },
        {
          area_id: 120000,
          area_name: "天津",
          area_ip_desc: "中国,天津",
          first_pinyin: "Tianjin",
          pinyin: "T",
          status: 1,
        }
      ],
      width: 500,
      height: 300,
      cellMinWidth: 120,
      skin: "nob",
      even: true,
      size: "lg",
    });
  });
</script>

三、表头参数

  • cols 设置表头。值是一个二维数组。方法渲染方式必填
参数 类型 说明
field String 设定字段名。非常重要,且是表格数据列的唯一标识
title String 设定标题名称
width Number/String 设定列宽,若不填写,则自动分配;若填写,则支持值为:数字、百分比
minWidth Number 局部定义当前常规单元格的最小宽度
type String 设定列类型:normal(常规列)、checkbox(复选框)、radio(单选框)、numbers(序号列)、space(空列)
LAY_CHECKED Boolean 是否全选状态(默认:false)。必须复选框列开启后才有效
fixed String 固定列。可选值有:left(固定在左)、right(固定在右)
hide Boolean 是否初始隐藏列,默认:false
sort Boolean 是否允许排序,默认:false
unresize Boolean 是否禁用拖拽列宽,默认:false。如复选框列,会自动禁用
style String 自定义单元格样式。即传入 CSS 样式
align String 单元格排列方式:left(默认)、center(居中)、right(居右)
<table id="demo"></table>
<script>
  layui.use("table", function () {
    var table = layui.table;
    table.render({
      elem: "#demo",
      cols: [
        [
          { type: "checkbox", LAY_CHECKED: true },
          { type: "radio" },
          { type: "numbers" },
          { type: "space", title: "空列", width: 120 },
          //表头
          { field: "area_id", title: "ID", width: 120, fixed: "left" },
          { field: "area_name", title: "城市名", unresize: true },
          { field: "area_ip_desc", title: "归属", align: "right" },
          { field: "first_pinyin", title: "拼音", hide: true },
          { field: "pinyin", title: "首字母", minWidth: 500, sort: true },
          { field: "status", title: "状态", fixed: "right", style: "color:red;" },
        ],
      ]
    });
  });
</script>

四、异步数据

参数 类型 说明
url String 接口地址。默认会自动传递两个参数:?page=1&limit=30
method String 接口 http 请求类型,默认:get
where Object 接口的其它参数。如:where: {token: 'sasasas', id: 123}
contentType Object 发送到服务端的内容编码类型。如果你要发送 json 内容,可以设置:contentType: 'application/json'
done Function 数据渲染完的回调
error Function 数据请求失败的回调,返回两个参数:错误对象、内容
page Boolean/Object 分页
limit Number 每页显示的条数(默认 10)
limits Array 每页条数的选择项
1、url 接口
<table id="demo"></table>
<script>
  layui.use("table", function () {
    var table = layui.table;
    table.render({
      elem: "#demo",
      url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
      cols: [
        [
          { type: "checkbox", LAY_CHECKED: true },
          { type: "radio" },
          { type: "numbers" },
          { type: "space", title: "空列", width: 120 },
          //表头
          { field: "area_id", title: "ID", width: 120, fixed: "left" },
          { field: "area_name", title: "城市名", unresize: true },
          { field: "area_ip_desc", title: "归属", align: "right" },
          { field: "first_pinyin", title: "拼音", hide: true },
          { field: "pinyin", title: "首字母", minWidth: 500, sort: true },
          { field: "status", title: "状态", fixed: "right", style: "color:red;" },
        ],
      ]
    });
  });
</script>
2、接口返回数据的格式
{
  "code": 0,
  "msg": "",
  "count": 1000,
  "data": [
    {

    },
    {

    }
  ]
}
3、where 传参数
<table id="demo"></table>
<script>
  layui.use("table", function () {
    var table = layui.table;
    table.render({
      elem: "#demo",
      url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
      where : {
        id : 0,
        status : 1
      },
      cols: [
        [
          { type: "checkbox", LAY_CHECKED: true },
          { type: "radio" },
          { type: "numbers" },
          { type: "space", title: "空列", width: 120 },
          { field: "area_id", title: "ID", width: 120, fixed: "left" },
          { field: "area_name", title: "城市名", unresize: true },
          { field: "area_ip_desc", title: "归属", align: "right" },
          { field: "first_pinyin", title: "拼音", hide: true },
          { field: "pinyin", title: "首字母", minWidth: 500, sort: true },
          { field: "status", title: "状态", fixed: "right", style: "color:red;" },
        ],
      ]
    });
  });
</script>
4、回调方法
table.render({
  elem: "#demo",
  url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
  where: {
    id: 0,
    status: 1,
  },
  cols: [
    [
      { type: "checkbox", LAY_CHECKED: true },
      { type: "radio" },
      { type: "numbers" },
      { type: "space", title: "空列", width: 120 },
      { field: "area_id", title: "ID", width: 120, fixed: "left" },
      { field: "area_name", title: "城市名", unresize: true },
      { field: "area_ip_desc", title: "归属", align: "right" },
      { field: "first_pinyin", title: "拼音", hide: true },
      { field: "pinyin", title: "首字母", minWidth: 500, sort: true },
      { field: "status", title: "状态", fixed: "right", style: "color:red;" },
    ],
  ],
  done(e) {
    console.log(e);
  },
});
5、翻页
table.render({
  elem: "#demo",
  url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
  where: {
    id: 0,
    status: 1,
  },
  cols: [
    [
      { type: "checkbox", LAY_CHECKED: true },
      { field: "area_id", title: "ID", width: 120, fixed: "left" },
      { field: "area_name", title: "城市名", unresize: true },
      { field: "area_ip_desc", title: "归属", align: "right" },
      { field: "first_pinyin", title: "拼音", hide: true },
      { field: "pinyin", title: "首字母", minWidth: 500, sort: true },
      { field: "status", title: "状态", fixed: "right", style: "color:red;" },
    ],
  ],
  page: true,
  limit: 30,
  limits: [30, 60, 90],
});

五、数据操作

1、绑定按钮
参数 类型 说明
toolbar String 开启表格头部工具栏区域
defaultToolbar Array 该参数可自由配置头部工具栏右侧的图标按钮
  • toolbar: #toolbarDemo 指向自定义工具栏模板选择器
  • toolbar: <div>xxx</div> 直接传入工具栏模板字符
  • toolbar: true 仅开启工具栏,不显示左侧模板
  • toolbar: default 让工具栏左侧显示默认的内置模板
<script type="text/html" id="toolbar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm">添加</button>
    <button class="layui-btn layui-btn-sm">编辑</button>
    <button class="layui-btn layui-btn-sm">删除</button>
  </div>
</script>
<table id="demo"></table>
<script>
  layui.use("table", function () {
    var table = layui.table;
    table.render({
      toolbar: "#toolbar",
      elem: "#demo",
      url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
      where: {
        id: 0,
        status: 1,
      },
      cols: [
        [
          { type: "checkbox" },
          { type: "radio" },
          { field: "area_id", title: "ID", width: 120 },
          { field: "area_name", title: "城市名", unresize: true },
          { field: "area_ip_desc", title: "归属", align: "right" },
          { field: "first_pinyin", title: "拼音" },
          { field: "pinyin", title: "首字母", minWidth: 500, sort: true },
          { field: "status", title: "状态", style: "color:red;" },
        ],
      ],
      page: true,
      limit: 30,
      limits: [30, 60, 90],
    });
  });
</script>
  • defaultToolbar:filter 显示筛选图标,exports 显示导出图标,print 显示打印图标
table.render({
  toolbar: "#toolbar",
  defaultToolbar: ["filter", "print", "exports"],
});
2、工具条事件
  • 语法:table.on('event(filter)', callback);
  • event 为内置事件名
  • filter 为容器 lay-filter 设定的值
<script type="text/html" id="toolbar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
  </div>
</script>
<table id="demo" lay-filter="test"></table>;
<script>
  table.on("toolbar(test)", function (obj) {
    switch (obj.event) {
      case "add":
        layer.msg("添加");
        break;
      case "update":
        layer.msg("编辑");
        break;
      case "delete":
        layer.msg("删除");
        break;
    }
  });
</script>
3、checkbox 复选框事件
  • checked 当前是否选中状态
  • data 选中行的相关数据
  • type 如果触发的是全选,则为:all,如果触发的是单选,则为:one
<table id="demo" lay-filter="test"></table>;
<script>
  table.on("checkbox(test)", function (obj) {
    console.log(obj); //当前行的一些常用操作集合
  });
</script>
4、radio 单选框事件
  • checked 当前是否选中状态
  • data 选中行的相关数据
<table id="demo" lay-filter="test"></table>;
<script>
  table.on("radio(test)", function (obj) {
    console.log(obj);
  });
</script>
5、row 单双击事件
  • tr 得到当前行元素对象
  • data 得到当前行数据
<table id="demo" lay-filter="test"></table>;
<script>
  table.on("row(test)", function (obj) {
    console.log(obj);
  });
</script>
  • 选中单行数据
<table id="demo" lay-filter="test"></table>;
<script>
  table.on("row(test)", function (obj) {
    obj.tr.find("div.layui-unselect.layui-form-radio")[0].click(); //单选
    obj.tr.find("div.layui-unselect.layui-form-checkbox")[0].click(); // 多选
  });
</script>
6、sort 排序切换
  • field 当前排序的字段名
  • type 当前排序类型:desc(降序)、asc(升序)、null(空对象,默认排序)
  • this 当前排序的 th 对象
table.on("sort(test)", function (obj) {
  console.log(obj);
});
  • 重新加载表格
table.on("sort(test)", function (obj) {
  table.reload("demo", {
    initSort: obj, //记录初始排序,如果不设的话,将无法标记表头的排序状态。
    toolbar: "#toolbar",
    elem: "#demo",
    url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
    where: {
      id: 0,
      status: 1,
      field: obj.field,
      order: obj.type,
    },
    cols: [
      [
        { type: "radio" },
        { field: "area_id", title: "ID", width: 120, sort: true },
        { field: "area_name", title: "城市名", unresize: true },
        { field: "area_ip_desc", title: "归属", align: "right" },
        { field: "first_pinyin", title: "拼音" },
        { field: "pinyin", title: "首字母", minWidth: 500, sort: true },
        { field: "status", title: "状态", style: "color:red;" },
      ],
    ],
    page: {
      curr: 1,
    },
    limit: 30,
    limits: [30, 60, 90],
  });
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,837评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,551评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,417评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,448评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,524评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,554评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,569评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,316评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,766评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,077评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,240评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,912评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,560评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,176评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,425评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,114评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,114评论 2 352

推荐阅读更多精彩内容