LayUI:数据表格文档layui.table

chenvle 2021-11-19 AM 1591℃ 0条

1、 数据表格简单实用

<table id="demo" lay-filter="test"></table>
var table = layui.table;
 
//执行渲染
table.render({
  elem: '#demo' //指定原始表格元素选择器(推荐id选择器)
  ,height: 315 //容器高度
  ,cols: [{}] //设置表头
  //,…… //更多参数参考右侧目录:基本参数选项
});

2、静态表格

<table lay-filter="demo">
  <thead>
    <tr>
      <th lay-data="{field:'username', width:100}">昵称</th>
      <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
      <th lay-data="{field:'sign'}">签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心1</td>
      <td>66</td>
      <td>人生就像是一场修行a</td>
    </tr>
    <tr>
      <td>贤心2</td>
      <td>88</td>
      <td>人生就像是一场修行b</td>
    </tr>
    <tr>
      <td>贤心3</td>
      <td>33</td>
      <td>人生就像是一场修行c</td>
    </tr>
  </tbody>
</table>
//转换静态表格
table.init('demo', {
  height: 315 //设置高度
  ,limit: 10 //注意:请务必确保 limit 参数(默认:10)是与你服务端限定的数据条数一致
  //支持所有基础参数
}); 

3、基础参数

参数类型说明示例值
elemString/DOM指定原始 table 容器的选择器或 DOM,方法渲染方式必填"#demo"
colsArray设置表头。值是一个二维数组。方法渲染方式必填详见表头参数
url(等)-异步数据接口相关参数。其中 url 参数为必填项详见异步参数
toolbarString/DOM/Boolean开启表格头部工具栏区域,该参数支持四种类型值:
toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器
toolbar: '<div>xxx</div>' //直接传入工具栏模板字符
toolbar: true //仅开启工具栏,不显示左侧模板
toolbar: 'default' //让工具栏左侧显示默认的内置模板
注意:
1. 该参数为 layui 2.4.0 开始新增。
2. 若需要“列显示隐藏”、“导出”、“打印”等功能,则必须开启该参数
false
defaultToolbarArray该参数可自由配置头部工具栏右侧的图标按钮详见头工具栏图标
widthNumber设定容器宽度。table容器的默认宽度是跟随它的父元素铺满,你也可以设定一个固定值,当容器中的内容超出了该宽度时,会自动出现横向滚动条。1000
heightNumber/String设定容器高度详见height
cellMinWidthNumber(layui 2.2.1 新增)全局定义所有常规单元格的最小宽度(默认:60),一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth100
doneFunction数据渲染完的回调。你可以借此做一些其它的操作详见 done 回调
errorFunction数据请求失败的回调,返回两个参数:错误对象、内容layui 2.6.0 新增-
dataArray直接赋值数据。既适用于只展示一页数据,也非常适用于对一段已知数据进行多页展示。[{}, {}, {}, {}, …]
escapeBoolean是否开启 xss 字符过滤(默认 false)layui 2.6.8 新增true
totalRowBoolean/String是否开启合计行区域false
pageBoolean/Object开启分页(默认:false)。支持传入一个对象,里面可包含 laypage 组件所有支持的参数(jump、elem除外){theme: '#c00'}
limitNumber每页显示的条数(默认 10)。值需对应limits 参数的选项。注意:优先级低于 page 参数中的 limit 参数30
limitsArray每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。
注意:优先级低于 page 参数中的 limits 参数
[30,60,90]
loadingBoolean是否显示加载条(默认 true)。若为 false,则在切换分页时,不会出现加载条。该参数只适用于 url 参数开启的方式false
titleString定义 table 的大标题(在文件导出等地方会用到)"用户表"
textObject自定义文本,如空数据时的异常提示等。详见自定义文本
autoSortBoolean默认 true,即直接由 table 组件在前端自动处理排序。
若为 false,则需自主排序,即由服务端返回排序好的数据
详见事件排序
initSortObject初始排序状态。
用于在数据表格渲染完毕时,默认按某个字段排序。
详见初始排序
idString设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件,它是表格容器的索引,你在下文诸多地方都将会见识它的存在。

另外,若该参数未设置,则默认从 <table id="test"></table> 中的 id 属性值中获取。
test
skin(等)-设定表格各种外观、尺寸等详见表格风格

4、表头参数

field(String)设定字段名。

非常重要,且是表格数据列的唯一标识

title(String) 设定标题名称


width(Number/String) 设定列宽

若不填写,则自动分配;若填写,则支持值为:数字、百分比。请结合实际情况,对不同列做不同设定。

minWidth(Number)局部定义当前常规单元格的最小宽度(默认:60)

一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth

type(String)设定列类型。可选值有:

normal(常规列,无需设定)
checkbox(复选框列)
radio(单选框列,layui 2.4.0 新增)
numbers(序号列)
space(空列)

LAY_CHECKED (Boolean)是否全选状态(默认:false)

必须复选框列开启后才有效,如果设置 true,则表示复选框默认全部选中。

fixed(String) 固定列。可选值有:left(固定在左)、right(固定在右)

一旦设定,对应的列将会被固定在左或右,不随滚动条而滚动。
注意: 如果是固定在左,该列必须放在表头最前面;如果是固定在右,该列必须放在表头最后面。

hide(Boolean)是否初始隐藏列,默认:false。layui 2.4.0 新增

totalRow(Boolean/String)

是否开启该列的自动合计功能,默认:false。
当开启时,则默认由前端自动合计当前行数据。从 layui 2.5.6 开始: 若接口直接返回了合计行数据,则优先读取接口合计行数据,格式如下:
{
  "code": 0,
  "totalRow": {
    "score": "666"
    ,"experience": "999"
  },
  "data": [{}, {}],
  "msg": "",
  "count": 1000
}
如上,在 totalRow 中返回所需统计的列字段名和值即可。
另外,totalRow 字段同样可以通过 parseData 回调来解析成为 table 组件所规定的数据格式。
从 layui 2.6.3 开始,如果 totalRow 为一个 string 类型,则可解析为合计行的动态模板,如:
totalRow: '{{ d.TOTAL_NUMS }} 单位'
//还比如只取整:'{{ parseInt(d.TOTAL_NUMS) }}'

totalRowText(String)用于显示自定义的合计文本。layui 2.4.0 新增

sort(Boolean)是否允许排序(默认:false)

如果设置 true,则在对应的表头显示排序icon,从而对列开启排序功能。
注意:不推荐对值同时存在“数字和普通字符”的列开启排序,因为会进入字典序比对。比如:'贤心' > '2' > '100',这可能并不是你想要的结果,但字典序排列算法(ASCII码比对)就是如此

unresize(Boolean) 是否禁用拖拽列宽(默认:false)

默认情况下会根据列类型(type)来决定是否禁用,如复选框列,会自动禁用。而其它普通列,默认允许拖拽列宽,当然你也可以设置 true 来禁用该功能

edit(String) 单元格编辑类型(默认不开启)目前只支持:text(输入框)

event(String) 自定义单元格点击事件名,以便在 tool 事件中完成对该单元格的业务处理

style(String) 自定义单元格样式。即传入 CSS 样式

align(String) 单元格排列方式。可选值有:left(默认)、center(居中)、right(居右)

colspan(Number) 单元格所占列数(默认:1)。一般用于多级表头

rowspan(Number) 单元格所占行数(默认:1)。一般用于多级表头

templet(String) 自定义列模板,模板遵循 laytpl 语法。这是一个非常实用的功能,你可借助它实现逻辑处理,以及将原始数据转化成其它格式,如时间戳转化为日期字符等

toolbar(String) 绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮

以下是二级表头例子

JS:
table.render({
  cols:  [[ //标题栏
    {field: 'username', title: '联系人', width: 80, rowspan: 2} //rowspan即纵向跨越的单元格数
    ,{field: 'amount', title: '金额', width: 80, rowspan: 2}
    ,{align: 'center', title: '地址', colspan: 3} //colspan即横跨的单元格数,这种情况下不用设置field和width
  ], [
    {field: 'province', title: '省', width: 80}
    ,{field: 'city', title: '市', width: 120}
    ,{field: 'county', title: '详细', width: 300}
  ]]
});
 
它等价于:
<table class="layui-table" lay-data="{基础参数}">
  <thead>
    <tr>
      <th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
      <th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
      <th lay-data="{align:'center'}" colspan="3">地址</th>
    </tr>
    <tr>
      <th lay-data="{field:'province', width:80}">省</th>
      <th lay-data="{field:'city', width:120}">市</th>
      <th lay-data="{field:'county', width:300}">详细</th>
    </tr>
  </thead>
</table>
标签: layui, 表格, layui.table

非特殊说明,本博所有文章均为博主原创。

评论啦~