• Welcome to Journal web site.
首页 关于 博客 留言 联系
首页 关于 博客 留言 联系

我是 PHP 程序员

- 开发无止境 -

Next
Prev

Layui 表格

Data: 2022-07-09 08:47:53Form: JournalClick: 13

# 表格

# 一、页面元素

# 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、基础参数

参数类型说明
elemString/DOM指定原始 table 容器的选择器或 DOM，方法渲染方式必填
widthNumber设定容器宽度
heightNumber/String设定容器高度：1、不填写 2、固定值 3、full-差值
cellMinWidthNumber常规单元格的最小宽度（默认：60）
skinBoolean/String表格风格：line （行边框风格）、row （列边框风格）、nob （无边框风格）
evenBoolean隔行背景
sizeString尺寸：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 设置表头。值是一个二维数组。方法渲染方式必填
参数类型说明
fieldString设定字段名。非常重要，且是表格数据列的唯一标识
titleString设定标题名称
widthNumber/String设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比
minWidthNumber局部定义当前常规单元格的最小宽度
typeString设定列类型：normal（常规列）、checkbox（复选框）、radio（单选框）、numbers（序号列）、space（空列）
LAY_CHECKEDBoolean是否全选状态（默认：false）。必须复选框列开启后才有效
fixedString固定列。可选值有：left（固定在左）、right（固定在右）
hideBoolean是否初始隐藏列，默认：false
sortBoolean是否允许排序，默认：false
unresizeBoolean是否禁用拖拽列宽，默认：false。如复选框列，会自动禁用
styleString自定义单元格样式。即传入 CSS 样式
alignString单元格排列方式：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>

# 四、异步数据

参数类型说明
urlString接口地址。默认会自动传递两个参数：?page=1&limit=30
methodString接口 http 请求类型，默认：get
whereObject接口的其它参数。如：where: {token: 'sasasas', id: 123}
contentTypeObject发送到服务端的内容编码类型。如果你要发送 json 内容，可以设置：contentType: 'application/json'
doneFunction数据渲染完的回调
errorFunction数据请求失败的回调，返回两个参数：错误对象、内容
pageBoolean/Object分页
limitNumber每页显示的条数（默认 10）
limitsArray每页条数的选择项

# 1、url 接口open in new window

<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
journal I'm Developers.
Copyright © 2014-2024 Guojunjie.com.
All screenshots © 郭俊杰(Journal).
I have been in Xiamen,China.
Website Establishment by Journal.
闽ICP备12018326号-2
Name:
<提交>