Layui 基础参数 表头参数 - 览表

基础参数并非所有都要出现,有必选也有可选,结合你的实际需求自由设定

例如:
在这里插入图片描述

基础参数-览表:
在图tabAcademe = layuiTable.render({})里面的elem,cols,page,data,id 这些都是属于layui里面的基础参数
基础参数每用完一个参数都是以逗号(,)隔开 截图里面的elem是用来绑定 table元素的指定原始 table 容器的选择器或 DOM,方法渲染方式必填
Cols用来设置表格头部的文字 设置表头。值是一个二维数组。方法渲染方式必填
Data 直接赋值数据。既适用于只展示一页数据,也非常适用于对一段已知数据进行多页展示。
Id设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件,它是表格容器的索引,你在下文诸多地方都将会见识它的存在。

值得注意的是:从 layui 2.2.0 开始,该参数也可以自动从

中的 id 参数中获取。

cols - 表头参数一览表:
Cols是一个二维表头 可以设置多行 需要用方括号[]里面
例如: 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}
]]

方括号中间用逗号(,)隔开

Field 设定字段名。字段名的设定非常重要,且是表格数据列的唯一标识
Title 设定标题名称
Type 设定列类型。可选值有:
normal(常规列,无需设定)
checkbox(复选框列)
radio(单选框列,layui 2.4.0 新增)
numbers(序号列)
space(空列)

Align:可以用来设置文字在表格中的位置 单元格排列方式。可选值有:left(默认)、center(居中)、right(居右)
Templet 自定义列模板,模板遵循 laytpl 语法。这是一个非常实用的功能,你可借助它实现逻辑处理,以及将原始数据转化成其它格式,如时间戳转化为日期字符等

templet - 自定义列模板:
类型:String,默认值:无
在默认情况下,单元格的内容是完全按照数据接口返回的content原样输出的,如果你想对某列的单元格添加链接等其它元素,你可以借助该参数来轻松实现。这是一个非常实用且强大的功能,你的表格内容会因此而丰富多样。

第一种使用方法
{field:‘title’, title: ‘文章标题’, width: 200,
templet: function(d){
return ‘ID:’+ d.id +’,标题:’+ d.title +’’}
}
第二种使用方法:
可以在templet后面写 函数,方法

然后直接在表格后面用function 变量(){} 创建一个新函数 判断完直接放 templet:后面直接使用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值