You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
layui/docs/table/detail/options.md

10 KiB

属性名 描述 类型 默认值
elem 绑定原始 table 元素,方法渲染方式必填。 string/DOM -

url

发送异步请求的 URL。更多异步相关属性见 : #异步属性

- -

cols

表头属性集,通过二维数组定义多级表头。方法渲染时必填。 更多表头属性见 : #表头属性

array -
data

直接赋值数据。既适用于只展示一页数据,也能对一段已知数据进行多页展示。该属性与 url 属性只能二选一。


:当设置 data 模式时,count 的值取 data.length,即对一段已知数据进行分页展示。 此时在 page 属性中设置 count 无效。 若要在同一页显示所有数据,可将 limit 设置成 data.length,即与 count 等同即可,那么默认的分页栏只会显示 1 页,若要自定义分页结构,可通过 pagebar 属性结合 laypage 组件来重新自定义分页排版。

array -
id

设定实例唯一索引,以便用于其他方法对 table 实例进行相关操作。若该属性未设置,则默认从 elem 属性绑定的原始 table 元素中的 id 属性值中获取。

string -
toolbar

开启表格头部工具栏。支持以下几种值写法:

  • toolbar: '#template-id' 自定义工具栏模板选择器
  • toolbar: '<div>xxx</div>' 直接传入模板字符
  • toolbar: true 仅开启工具栏右侧,不显示左侧模板
  • toolbar: 'default' 开启工具栏并显示默认模板
string
boolean

false

defaultToolbar

设置头部工具栏右侧图标。值是一个数组,可选成员有: filter,exports,print (分别代表:筛选图标、导出图标、打印图标)。图标可根据数组值的顺序排列,如:defaultToolbar: ['filter','print','exports']
支持自定义图标及事件,用法详见示例: #综合演示

array -
width 设置容器宽度,默认自适应。 number -

height

设置表格容器高度,默认自适应。其他可选值的规则如下:
  • height: 315 设置固定高度
  • height: 'full-30' 设置相对可视屏幕的高度铺满。这是一个特定的语法格式:full 表示铺满;后面的数字表示当前 table 之外的元素占用的高度,如:表格头部到页面最顶部表格底部距离页面最底部的“距离和”
  • height: '#id-30' 设置相对父元素的高度铺满,其中 #id 即父元素的 ID 选择器,其计算原理和上述 full 相同。

函数写法 2.9.1+

当需要动态改变表格高度时建议使用,如下以等效 full-xx 的写法为例:

height: function(){
  var otherHeight = $('#search-content').outerHeight(); // 自定义其他区域的高度
  return $(window).height() - otherHeight; // 返回 number 类型
}
number
string
-
maxHeight 2.8+

设置表格容器的最大高度,设置该属性后,height 属性将被认定为默认的自适应值。

number -
cellMinWidth

设置所有普通单元格的最小宽度,一般用于列宽自动分配的情况。其优先级低于表头属性中的 minWidth

number

60

cellMaxWidth 2.8+

设置所有普通单元格的最大宽度。其优先级低于表头属性中的 maxWidth

number -
lineStyle 2.7+

用于定义表格的多行样式,如每行的高度等。该参数一旦设置,单元格将会开启多行模式,且鼠标 hover 时会通过显示滚动条的方式查看到更多内容。 请按实际场景使用。
示例:lineStyle: 'height: 95px;'

string -
className 2.7+ 用于给表格主容器追加 css 类名,以便更好地扩展表格样式 string -
css 2.7+

用于给当前表格主容器直接设定 css 样式,样式值只会对所在容器有效,不会影响其他表格实例。如:css: '.layui-table-page{text-align: right;}'

string -
cellExpandedMode 2.8.17+

用于设置所有单元格默认展开方式,可选值有:

  • tips 悬浮展开方式
  • default 多行展开方式(默认)
string -
cellExpandedWidth 2.8.17+

用于设置所有单元格默认展开后的宽度。当 cellExpandedMode 属性为默认值时有效。

number

60

escape 2.6+ 是否开启对内容的编码(转义 html boolean

true

totalRow 是否开启合计行区域 string

false

page

用于开启分页。
支持传入 laypage 组件的基础属性jump,elem 除外)

boolean
object

false

pagebar 2.7+

用于开启分页区域的自定义模板,用法同 toolbar 属性。

string -
limit

每页显示的条数。值需对应 limits 参数的选项。优先级低于 page 属性中的 limit 属性。

number

10

limits 每页条数的选择项。 array

[10,…,90]

loading

是否显示加载条。若为 false,则在切换分页时,不会出现加载条。必须设置了 url 属性才生效。

boolean

true

scrollPos 2.7+

用于设置重载数据或切换分页时的滚动条位置状态。可选值:

  • fixed 重载数据时,保持滚动条位置不变
  • reset 重载数据时,滚动条位置恢复置顶
  • default 默认方式,无需设置。即重载数据或切换分页时,纵向滚动条置顶,横向滚动条位置不变。
string -
editTrigger 2.7+

是用于设定单元格编辑的事件触发方式。如双击: dblclick

string

click

title 定义 table 的大标题(在文件导出等地方会用到) string -
text 自定义文本,如空数据时的异常提示等。 object 查看默认值
`text: {none: '无数据'}`
autoSort

是否由组件自动进行前端排序。若为 false,则需自主排序,即由后端直接返回排序好的数据。#详细用法

boolean

true

initSort

初始排序状态。用于在数据表格渲染完毕时,按某个字段排序显示。它接受一个 object 类型的值,包含属性有:

  • field 排序字段。对应 cols 设定的各字段名
  • type 排序方式。可选值 : 'asc','desc',null,即:升序、降序、默认
initSort: {
  field: 'id', // 按 id 字段排序
  type: 'desc' // 降序排序
}
object -
skin

设置表格边框风格。可选值:grid|line|row|nob

string

grid

size

设置表格其他尺寸。可选值:sm|md|lg

string

md

even

是否开启隔行背景。

string

false

before 2.7+

数据渲染之前的回调函数。
table.render({
  before: function(options){
    console.log(options); // 当前实例属性配置项
    options.where.abc = 123; // 修改或额外追加 where 属性
  },
  // …  // 其它属性
});

done

数据渲染完毕的回调函数。返回的参数如下:
table.render({
  done: function(res, curr, count, origin){
    console.log(res); // 得到当前渲染的数据
    console.log(curr);  // 得到当前页码
    console.log(count); // 得到数据总量
    console.log(origin); // 回调函数所执行的来源 --- 2.8.7+
  },
  // …  // 其它属性
});
error 2.6+

数据请求失败的回调函数。返回两个参数:错误对象、内容。

error: function(e, msg) {
  console.log(e, msg)
}
complete 2.8.18+

数据接口请求完成后执行,无论成功还是失败均会触发

complete: function(xhr, ts) {
  console.log(xhr, ts)
}