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],
  });
});

05_表格

05_表格

一、页面元素

1、常规用法

2、其他风格

3、尺寸

4、隔行背景

二、表格渲染

1、方法渲染

2、基础参数

三、表头参数

四、异步数据

1、url 接口

2、接口返回数据的格式

3、where 传参数

4、回调方法

5、翻页

五、数据操作

1、绑定按钮

2、工具条事件

3、checkbox 复选框事件

4、radio 单选框事件

5、row 单双击事件

6、sort 排序切换

相关阅读更多精彩内容

友情链接更多精彩内容