cols - 表头参数一览表

一．如果采用的是方法渲染，那么cols 是一个二维数组，表头参数设定在数组内

参数1：field

类型：String

说明：设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识。

示例值：username

参数2：title

类型：String

说明：设定标题名称

示例值：用户名

参数3：width

类型：Number/String

说明：设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比请结合实际情况，对不同列做不同设定。

示例值：200、30%

参数4：minWidth

类型：Number

说明：局部定义当前常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth

示例值：100

参数5：type

类型：String

说明：设定列类型。可选值有：

normal（常规列，无需设定）

checkbox（复选框列）

radio（单选框列，layui 2.4.0 新增）

numbers（序号列）

space（空列）

示例值：任意一个可选值

参数6：LAY_CHECKED

类型：Boolean

说明：是否全选状态（默认：false）。必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。

示例值：true

参数7：fixed

类型：String

说明：固定列。可选值有：left（固定在左）、right（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。
注意：如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。

示例值：left（同 true）、right

参数8：hide

类型：Boolean

说明：是否初始隐藏列，默认：false。（layui 2.4.0 新增）

示例值：true

参数9：totalRow

类型：Boolean

说明：是否开启该列的自动合计功能，默认：false。layui 2.4.0 新增

示例值：true

参数10：totalRowText

类型：String

说明：用于显示自定义的合计文本。layui 2.4.0 新增

示例值："合计："

参数11：sort

类型：Boolean

说明：是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。

注意：不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序比对。比如：'贤心' > '2' > '100'，这可能并不是你想要的结果，但字典序排列算法（ASCII码比对）就是如此。

示例值：true

参数12：unresize

类型：Boolean

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

示例值：false

参数13：edit

类型：String

说明：单元格编辑类型（默认不开启）目前只支持：text（输入框）

示例值：text

参数14：event

类型：String

说明：自定义单元格点击事件名，以便在 tool 事件中完成对该单元格的业务处理

示例值：任意字符

参数15：style

类型：String

说明：自定义单元格样式。即传入 CSS 样式

示例值：background-color: #5FB878; color: #fff;

参数16：align

类型：String

说明：单元格排列方式。可选值有：left（默认）、center（居中）、right（居右）

示例值：center

参数17：colspan

类型：Number

说明：单元格所占列数（默认：1）。一般用于多级表头

示例值：3

参数18：rowspan

类型：Number

说明：单元格所占行数（默认：1）。一般用于多级表头

示例值：2

参数19：templet

类型：String

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

示例值：详见自定义模板

参数20：toolbar

类型：String

说明：绑定列工具条。设定后，可在每行列中出现一些自定义的操作性按钮

示例值：详见列工具条

例一：

cols: [[

1 { type: 'radio', fixed: 'left' },

2 { type: 'numbers', title: '序号' },

3 { field: 'academeName', title: '学院名称' },

4 { field: 'academeCode', title: '学院代号' },

5 { title: '操作',templet:setOperate,fixed:'right',width:165}

]]

结果如下图：

例二：

cols: [[

1 { title: "序号", type: "numbers", align: "center" },

2 { title: "学院名称", field: "academeName", align: "center" },

3 { title: "专业名称", field: "specialtyName", align: "center", width: 315 },

4 { title: "年级名称", field: "gradeName", align: "center" },

5 { title: "班级名称", field: "className", align: "center" },

6 { title: "操作", align: "center", templet: setOperate },

]]

结果如下图：

例三：

cols: [[

1 { type: "numbers", title: '序号' },

2 { title: '年级名称', field: 'gradeName', align: 'center' },

3 { title: '所属学院', field: 'academeName', align: 'center' },

4 { title: '操作', templet: setOperate }

]]

结果如下图：

例四：

cols: [

[

1 { title: '序号', type: "numbers", rowspan: 2 },

2 { title: "专业信息", colspan: 2, align: "center" },

3 { title: "所属学院", field: "academeName", rowspan: 2, align: "center" },

4 { title: "操作", rowspan: 2, templet: setOperate, align: "center" }

[

5 { title: "专业名称", field: "specialtyName", align: "center" },

6 { title: "专业编号", field: "specialtyCode", align: "center" }

]

结果如下图：

例四：

cols: [[

1 { title: '序号', type: 'numbers' }, //序号列，title设定标题名称

2 { title: '学院名称', field: 'academeName', align: 'center' },

3 { title: '专业名称', field: 'specialtyName', align: 'center' },

4 { title: '年级名称', field: 'gradeName', align: 'center' },

5 { title: '班级名称', field: 'className', align: 'center' },

6 { title: '姓名', field: 'studentName', align: 'center' },

7 { title: '性别', field: 'studentSex', align: 'center' },

8 { title: '身份证号', field: 'studentIDNum', align: 'center' },

9 { title: '学号', field: 'studentNumber', align: 'center' },

//{ title: '操作', templet: customOp, width: 130, align: 'center' }方法一

10 { title: '操作', toolbar: "#rowToolTpl", width: 130, align: 'center' }//toolbar 通过ID选择模板；方法二

]],

结果如下图：

这是我所学到的cols - 表头参数一览表，分享给你们，希望可以帮助到你们。

新手上道，请多多指教，大神勿喷。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔，谢谢！

cols - 表头参数一览表相关推荐

2022-04-13 工作记录--LayUI-动态渲染数据表格的表头参数
LayUI-动态渲染数据表格的表头参数最近在项目中遇到一个需求:根据后台数据动态渲染数据表格的数据. 分析:因为LayUI数据表格的数据渲染是通过给table.render({})中的cols传值来 ...
安川服务器显示fn001,安川伺服辅助功能参数一览表
辅助功能一览表,监视模式一览表,用户参数一览表,报警显示一览表辅助功能一览表 Fn000 显示警报追踪备份数据 Fn001 设定在线自动调谐时的刚性 Fn002 微动(JOD)模式运行 Fn003 ...
NVIDIA显卡（GPU）性能参数一览表
本贴列举了NVIDIA29款主流显卡(GPU)的性能参数及价格,供大家在选购时参考.(若有错误,也请指正) NVIDIA 显卡性能参数一览表英伟达官网原话: 建议消费者认准 NVIDIA 在中国大陆 ...
一b变频器说明书参数一览表_电工常见的23个变频器问题整理，附专业解答
1. 变频器电路板用热风机吹一下就能正常使用,请问是什么原因? 答:出现这种情况可能有以下几个原因: (1)线路板出现虚焊或是脱焊,用一段时间会有锡斑,这种情况下焊一下就好了 (2)电解电容出现漏电情 ...
JVM 常用参数一览表(转)
参数默认值或限制说明参数默认值功能 -XX:-AllowUserSignalHandlers 限于Linux和Solaris,默认不启用允许为java进程安装信号处理器,信号处理参见类:s ...
python把桢写入txt_ffmpeg 常用参数一览表及python 使用示例
FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.提供了录制.转换以及流化音视频的完整解决方案. 它包含了非常先进的音频/视频编解码库libavcodec,这里介绍 ...
相机视场角和焦距_相机参数一览表
" 最近改文章,涉及到参数选择的考量,查阅相关资料整理相机参数." 三维测量一般的光学实验几乎都涉及到投影仪和相机,每个器材的选择,参数的调节都对实验效果有很大的影响. 01 - ...
ATI移动显卡全系列型号及参数一览表
ATI Radeon系列和X系列无疑已经被本友们广为所知.前者ATI Radeon(俗称"镭")诞生于2000年4月,是ATI AGP接口时代的开山之作.应该说,也就是从" ...
NVIDIA和AMD各型号显卡超频参数一览表
网上收集了以下显卡的型号超频参数: 1065 1066 1660 1660Ti 1660s 1070 1070Ti 1080 1080Ti 2060 2060 2060S 2070 2070s 208 ...
Nvidia移动显卡型号及参数一览表
显卡的优劣是决定高端游戏是否可以引人入胜的关键.游戏中的所有特效如果都可以被开启并且运行流畅,那么这块所配的显卡即可称为"上品"!目前,业界制造生产移动显卡产品的厂商主要有Nvid ...

cols - 表头参数一览表

cols - 表头参数一览表相关推荐

最新文章

热门文章