LayUi数据表格

最新推荐文章于 2025-03-28 11:22:56 发布

缘在有你

最新推荐文章于 2025-03-28 11:22:56 发布

阅读量932

点赞数 1

分类专栏： html-css Javascript 文章标签： layui 前端 javascript

本文链接：https://blog.youkuaiyun.com/chenxg1912/article/details/121142202

版权

html-css 同时被 2 个专栏收录

3 篇文章

订阅专栏

Javascript

3 篇文章

订阅专栏

数据表格

表格重载

很多时候，你需要对表格进行重载。比如数据全局搜索。以下方法可以帮你轻松实现这类需求（可任选一种）。

table.reload(ID, options, deep) 【所有渲染方式】
- 参数 ID 即为基础参数id对应的值，见：设定容器唯一ID
- 参数 options 即为各项基础参数
- 参数 deep：是否采用深度重载（即参数深度克隆，也就是重载时始终携带初始时及上一次重载时的参数），默认 false
- 注意：deep 参数为 layui 2.6.0 开始新增。
tableIns.reload(options, deep) 【仅限方法级渲染】
- tableIns 可通过 var tableIns = table.render() 得到

【HTML】
<table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>
 
【JS】
table.reload('idTest', {
  url: '/api/table/search'
  ,where: {} //设定异步数据接口的额外参数
  //,height: 300
});

//所获得的 tableIns 即为当前容器的实例
var tableIns = table.render({
  elem: '#id'
  ,cols: [] //设置表头
  ,url: '/api/data' //设置异步接口
  ,id: 'idTest'
}); 
 
//这里以搜索为例
tableIns.reload({
  where: { //设定异步数据接口的额外参数，任意设
    aaaaaa: 'xxx'
    ,bbb: 'yyy'
    //…
  }
  ,page: {
    curr: 1 //重新从第 1 页开始
  }
});
//上述方法等价于
table.reload('idTest', {
  where: { //设定异步数据接口的额外参数，任意设
    aaaaaa: 'xxx'
    ,bbb: 'yyy'
    //…
  }
  ,page: {
    curr: 1 //重新从第 1 页开始
  }
}); //只重载数据

TableHeader

toolbar

toolbar: #toolbarDemo //指向自定义工具栏模板选择器
toolbar: <div>xxx</div> //直接传入工具栏模板字符
toolbar: ‘true’ //仅开启工具栏，不显示左侧模板
toolbar: ‘default’ //让工具栏左侧显示默认的内置模板

defaultToolbar

类型：Array，默认值：[“filter”,“exports”,“print”]
该参数可自由配置头部工具栏右侧的图标按钮，值为一个数组，支持以下可选值：

filter: 显示筛选图标
exports: 显示导出图标
print: 显示打印图标

可根据值的顺序显示排版图标，如：
defaultToolbar: [‘filter’, ‘print’, ‘exports’]

另外你还可以无限扩展图标按钮

table.render({ //其它参数在此省略      
  defaultToolbar: ['filter', 'print', 'exports', {
    title: '提示' //标题
    ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
    ,icon: 'layui-icon-tips' //图标类名
  }]
});

扩展的图标可通过 toolbar 事件回调（详见行工具事件），其中 layEvent 的值会在事件的回调参数中返回，以便区分不同的触发动作。

触发事件

table.on('toolbar(#table.lay-filter#)', function(obj){
  var checkStatus = table.checkStatus(obj.config.id);
  switch(obj.event){
  	case 'button.lay-event'
  		layer.msg('对应处理方法')
  		break;
    case 'add':
      layer.msg('添加');
    	break;
    case 'delete':
      layer.msg('删除');
    	break;
    case 'update':
      layer.msg('编辑');
    	break;
  };
});

Table

TableHeader

触发排序切换
点击表头排序时触发，它通用在基础参数中设置 autoSort: false 时使用，以完成服务端的排序，而不是默认的前端排序。该事件的回调函数返回一个 object 参数，携带的成员如下：

//禁用前端自动排序，以便由服务端直接返回排序好的数据
table.render({
  elem: '#id'
  ,autoSort: false //禁用前端自动排序。注意：该参数为 layui 2.4.4 新增
  //,… //其它参数省略
});
 
//触发排序事件 
table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
  console.log(obj.field); //当前排序的字段名
  console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
  console.log(this); //当前排序的 th 对象
 
  //尽管我们的 table 自带排序功能，但并没有请求服务端。
  //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
  table.reload('idTest', {
    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
    ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
      field: obj.field //排序字段
      ,order: obj.type //排序方式
    }
  });
  
  layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
});

TableRow

触发行事件

点击或双击行时触发。

//触发行单击事件
table.on('row(test)', function(obj){
  console.log(obj.tr) //得到当前行元素对象
  console.log(obj.data) //得到当前行数据
  //obj.del(); //删除当前行
  //obj.update(fields) //修改当前行数据
});
 
//触发行双击事件
table.on('rowDouble(test)', function(obj){
  //obj 同上
});

获取选中行

该方法可获取到表格所有的选中行相关数据
语法：table.checkStatus(‘ID’)，其中 ID 为基础参数 id 对应的值（见：设定容器唯一ID），如：

【自动化渲染】
<table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>
 
【方法渲染】
table.render({ //其它参数省略
  id: 'idTest'
});

var checkStatus = table.checkStatus('idTest'); //idTest 即为基础参数 id 对应的值
 
console.log(checkStatus.data) //获取选中行的数据
console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
console.log(checkStatus.isAll ) //表格是否全选

TableCell

触发复选框选择

点击复选框时触发，回调函数返回一个 object 参数：

table.on('checkbox(test)', function(obj){
  console.log(obj); //当前行的一些常用操作集合
  console.log(obj.checked); //当前是否选中状态
  console.log(obj.data); //选中行的相关数据
  console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});

触发单选框选择

点击表格单选框时触发，回调函数返回一个 object 参数，携带的成员如下：

table.on('radio(test)', function(obj){ //test 是 table 标签对应的 lay-filter 属性
  console.log(obj); //当前行的一些常用操作集合
  console.log(obj.checked); //当前是否选中状态
  console.log(obj.data); //选中行的相关数据
});

触发单元格编辑

单元格被编辑，且值发生改变时触发，回调函数返回一个object参数，携带的成员如下：

table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
  console.log(obj.value); //得到修改后的值
  console.log(obj.field); //当前编辑的字段名
  console.log(obj.data); //所在行的所有相关数据  
});

TabletotalRow

page

使用分页模块文档 - layui.laypage

快速使用

laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layPage快速使用</title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
 
<div id="test1"></div>
 
<script src="/static/build/layui.js"></script>
<script>
layui.use('laypage', function(){
  var laypage = layui.laypage;
  
  //执行一个laypage实例
  laypage.render({
    elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
    ,count: 50 //数据总数，从服务端得到
  });
});
</script>
</body>
</html>

基础参数选项

通过核心方法：laypage.render(options) 来设置基础参数。由于使用非常简单，本篇直接罗列核心接口的参数选项

参数选项	说明	类型	默认值
elem	指向存放分页的容器，值可以是容器ID、DOM对象。如： 1. elem: ‘id’ 注意：这里不能加 # 号 2. elem: document.getElementById(‘id’)	String/Object	-
count	数据总数。一般通过服务端得到	Number	-
limit	每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。	Number	10
limits	每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框	Array	[10, 20, 30, 40, 50]
curr	起始页。一般用于刷新类型的跳页以及HASH跳页。如：//开启location.hash的记录 laypage.render({ elem: ‘test1’ ,count: 500 ,curr: location.hash.replace(’#!fenye=’, ‘’) //获取起始页 ,hash: ‘fenye’ //自定义hash值 });	Number	1
groups	连续出现的页码个数	Number	5
prev	自定义“上一页”的内容，支持传入普通文本和HTML	String	上一页
next	自定义“下一页”的内容，同上	String	下一页
first	自定义“首页”的内容，同上	String	1
last	自定义“尾页”的内容，同上	String	总页数值
layout	自定义排版。可选值有： count（总条目输区域） prev（上一页区域） page（分页区域） next（下一页区域） limit（条目选项区域） refresh（页面刷新区域。注意：layui 2.3.0 新增）、skip（快捷跳页区域）	Array	[‘prev’, ‘page’, ‘next’]
theme	自定义主题。支持传入：颜色值，或任意普通字符。如： 1. theme: '#c00’ 2. theme: ‘xxx’ //将会生成 class=“layui-laypage-xxx” 的 CSS类，以便自定义主题	String	-
hash	开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：#!hash值={curr} 利用这个，可以在页面载入时就定位到指定页	String/Boolean	false

导出任意数据

尽管 table 的工具栏内置了数据导出按钮，但有时你可能需要通过方法去导出任意数据，那么可以借助以下方法：
语法：table.exportFile(id, data, type)

var ins1 = table.render({
  elem: '#demo'
  ,id: 'test'
  //,…… //其它参数
})      
      
//将上述表格示例导出为 csv 文件
table.exportFile(ins1.config.id, data); //data 为该实例中的任意数量的数据

事实上，该方法也可以不用依赖 table 的实例，可直接导出任意数据：

table.exportFile(['名字','性别','年龄'], [
  ['张三','男','20'],
  ['李四','女','18'],
  ['王五','女','19']
], 'csv'); //默认导出 csv，也可以为：xls