当前博客:36-快码FOF中文编程layui教学-组件:数据表格-参数

548 次浏览【转载需注明来源】

博客作者:【qiang】

个性签名:请输入个性签名___________

上一篇博客太长了,在这一篇介绍一下数据表格的参数:

新建对象 lay_表格({
	[lay_表格.配置.绑定元素]: "#用户表格", // 表格元素id *(*号必须设置)
	[lay_表格.配置.地址]: "@文件_用户数据.json", //数据请求接口 *
	[lay_表格.配置.工具栏]: "默认", //表格上面的工具栏,可以像工具自定义,也可以设置为真不显示左侧工具,或者使用默认
	[lay_表格.配置.id]: "用户数据", // 表格的id *
	[lay_表格.配置.宽度]: 1000, // 表格的宽度(不用设置)
	[lay_表格.配置.高度]: 800, // 表格的高度(不用设置)
	[lay_表格.配置.单元格最小宽度]: 100, // 表格单元格最小宽度
	[lay_表格.配置.分页]: 真, //设置是否显示分页,也可以直接设置分页的参数,可以查看分页博客 *
	[lay_表格.配置.条数]: 10, //每一页的条数
	[lay_表格.配置.条数选择]: [5, 10, 15, 20, 25, 30], // 条数选中,不用设置,参考分页博客
	[lay_表格.配置.加载条]: 真, //设置切换分页的时候是否显示加载动画
	[lay_表格.配置.标题]: "用户数据表格", // 导出数据的时候,表格的标题
	[lay_表格.配置.数据]: [
		{
			//直接赋值数据,不过一般都是接口请求
			"id": "123456",
			"用户名": "张三",
		},
	],
	[lay_表格.配置.表头]: [
		//设置表格头部,这里要注意了,这有两个方括号 [[ *
		[
			{
				[lay_表格.表头配置.字段]: "账号", // 字段名称,接口数据的字段 *
				[lay_表格.表头配置.标题]: "账号", //表头的标题名称 *
				[lay_表格.表头配置.固定]:"左侧",//设置当前列在表格的左侧还是右侧
				[lay_表格.表头配置.对齐]: lay_表格.对齐.居中对齐, // 设置当前列的对齐方式
				[lay_表格.表头配置.更改]: 真, // 设置当前列的单元格是否可以更改
				[lay_表格.表头配置.宽度]: 200, //设置当前列的宽度,单位px,或者设置百分比 "10%"
				[lay_表格.表头配置.类型]: lay_表格.类型., // 设置当前列的类型,是复选框、单选框还是什么,普通的列不用设置此项
				[lay_表格.表头配置.模板]: 定义函数 (数据) {
					//设置当前列的元素
					返回 `<区块>${数据[账号]}</区块>`;
				},
				[lay_表格.表头配置.排序]: 真, // 设置当前列是否可以排序
				[lay_表格.表头配置.事件]: "点击账号", // 设置当前列单元格点击事件名称
				[lay_表格.表头配置.样式]: "@转换_css>背景-颜色: #5FB878; 颜色: #fff;", //设置当前列的样式
				[lay_表格.表头配置.隐藏]: 假, //设置是否隐藏当前列,可以在工具栏右侧的筛选器显示
				[lay_表格.表头配置.最小宽度]: 120, //设置当前列的最小宽度
				[lay_表格.表头配置.功能条]: "#工具", // 设置工具条,可以参考上篇博客案例
				[lay_表格.表头配置.是否全选]: 假, // 如果是复选框,可以设置是否全部选中
				[lay_表格.表头配置.禁止调整列宽]: 真, //设置为真,就不能拖动当前列的宽度
			},
		],
	],
});
JavaScript

特殊参数:

1、表头:表头是个二位数组,也就是说有两个方括号[[]],可以设置更加复杂的表头,注意了;

2、工具栏:工具栏有4中写法,我们这里只选中3中写法,

    1)像工具一样绑定一个脚本包裹的html;

    2)"默认":默认显示工具栏,表格上面左右两侧都有功能按钮;

    3)真 : 设置为真,会隐藏左侧的功能按钮;

3、分页:设置为真,是默认分页;或者设置分页的参数配置,参考分页博客;

4、表头参数-类型:类型有复选框、单选框、常规列、序号、空;

5、表头参数-固定:如果设置列在左侧,那么表头配置的时候,当前数据要写在所有数据前面,如果是右侧,就要写在后面,它会固定在表格的左右侧,不会跟随滚动条滚动。

 

36-快码FOF中文编程layui教学-组件:数据表格-参数