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

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

收藏内容 (3) (0)

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

现在的后端几乎都需要用表格来展示数据，layui框架就内置了这一功能，

通过请求数据，来渲染一个数据表格，还支持了很多功能，数据导出，排序，分页，按钮等，十分的实用。

它的代码也不是很复杂，首先设置一个表格元素：

<表格 id="用户表格" lay-过滤器="用户"></表格>

上面我写了一个属性, lay-过滤器，这个很重要，所有对表格的操作都需要它。

然后写表格的配置脚本：

新建对象 lay_表格({
	[lay_表格.配置.绑定元素]: "#用户表格",
// 我这是请求一个json文件，正常的写法是一个api接口 "请求地址"
	[lay_表格.配置.地址]: "@文件_用户数据.json", 
	[lay_表格.配置.id]: "用户数据",
	[lay_表格.配置.分页]: 真,
	[lay_表格.配置.表头]: [
		[
			{
				[lay_表格.表头配置.字段]: "账号",
				[lay_表格.表头配置.标题]: "账号",
			},
			{
				[lay_表格.表头配置.字段]: "姓名",
				[lay_表格.表头配置.标题]: "姓名",
			},
			{
				[lay_表格.表头配置.字段]: "电话",
				[lay_表格.表头配置.标题]: "电话",
			},
			{
				[lay_表格.表头配置.字段]: "注册",
				[lay_表格.表头配置.标题]: "注册",
			}
		],
	],
});

上面的脚本写了参数，地址，地址就是数据接口了，当我们打开页面的时候，数据表格组件就会请求接口地址，

并且带有两个参数：

后端接收到了请求信息，就会查询数据库，并且返回数据了，而表格组件有固定的返回格式，返回格式：

{
  "状态": 0,
  "数据": [{
      "账号":"100001",
      "姓名":"张三",
      "性别":1,
      "电话":"188-8888-8888",
      "启用":1,
      "登录":1,
      "注册":"2022-03-20 12:00"
  }],
  "提示文本": "",
  "数据总数": 1000
}

代码效果展示：

数据表格的分页组件，是按照每页数量（默认10）和返回的数据总数来分页的，所以后端一定要传数据总数，当切换分页，和上图每页条数的时候，请求参数就会更改并且重新请求渲染。

一个简单的数据表格就这样的实现了，但是只能做显示数据来用，感觉还是太单调了，下面给数据表格加上一点功能，让数据表格支持更改，删除，开关等操作。

首先还是一个表格元素：

<表格 id="用户表格" lay-过滤器="用户"></表格>

然后是表格的脚本配置：

新建对象 lay_表格({
	[lay_表格.配置.绑定元素]: "#用户表格",
// 我这是请求一个json文件，正常的写法是一个api接口 "请求地址"
	[lay_表格.配置.地址]: "@文件_用户数据.json",
	[lay_表格.配置.工具栏]: "默认",
	[lay_表格.配置.id]: "用户数据",
	[lay_表格.配置.分页]: 真,
	[lay_表格.配置.条数选择]: [5, 10, 15, 20, 25, 30],
	[lay_表格.配置.表头]: [
		[
			{
				[lay_表格.表头配置.类型]: lay_表格.类型.复选框,
				[lay_表格.表头配置.固定]: "左侧",
			},
			{
				[lay_表格.表头配置.字段]: "账号",
				[lay_表格.表头配置.标题]: "账号",
			},
			{
				[lay_表格.表头配置.字段]: "姓名",
				[lay_表格.表头配置.标题]: "姓名",
				[lay_表格.表头配置.更改]: 真,
			},
			{
				[lay_表格.表头配置.字段]: "性别",
				[lay_表格.表头配置.标题]: "性别",
				[lay_表格.表头配置.宽度]: 80,
				[lay_表格.表头配置.排序]: 真,
				[lay_表格.表头配置.对齐]: lay_表格.对齐.居中对齐,
				[lay_表格.表头配置.模板]: 定义函数 (数据) {
					如果 (数据.性别 === 1) {
						返回 `<行内元素>男</行内元素>`;
					} 否则 {
						返回 `<行内元素>女</行内元素>`;
					}
				},
			},
			{
				[lay_表格.表头配置.字段]: "电话",
				[lay_表格.表头配置.标题]: "电话",
				[lay_表格.表头配置.更改]: 真,
			},
			{
				[lay_表格.表头配置.字段]: "启用",
				[lay_表格.表头配置.标题]: "启用",
				[lay_表格.表头配置.模板]: 定义函数 (数据) {
					如果 (数据["启用"] === 1) {
						返回 `<数据框 数据类型="选择框" 当前id="${数据["账号"]}" 属性名称="${数据["账号"]}" 数据值="启用" 提示信息="启用" lay-过滤器="开关演示" 默认选中>`;
					} 否则 {
						返回 `<数据框 数据类型="选择框" 当前id="${数据["账号"]}" 属性名称="${数据["账号"]}" 数据值="启用" 提示信息="启用" lay-过滤器="开关演示">`;
					}
				},
			},
			{
				[lay_表格.表头配置.字段]: "登录",
				[lay_表格.表头配置.标题]: "登录",
				[lay_表格.表头配置.模板]: 定义函数 (数据) {
					如果 (数据["登录"] === 1) {
						返回 `<数据框 数据类型="选择框" 属性名称="${数据["账号"]}" 数据值="登录" lay-风格="开关风格" lay-文本="登录|退出" lay-过滤器="登录开关演示" 禁用数据框 默认选中>`;
					} 否则 {
						返回 `<数据框 数据类型="选择框" 属性名称="${数据["账号"]}" 数据值="登录" lay-风格="开关风格" lay-文本="登录|退出" lay-过滤器="登录开关演示" 禁用数据框>`;
					}
				},
			},
			{
				[lay_表格.表头配置.字段]: "注册",
				[lay_表格.表头配置.标题]: "注册",
				[lay_表格.表头配置.宽度]: 150,
			},
			{
				[lay_表格.表头配置.宽度]: 180,
				[lay_表格.表头配置.功能条]: "#工具栏演示",
				[lay_表格.表头配置.标题]: "工具栏",
			},
		],
	],
});

除了表格的配置，还需要加入对应的工具（查看，编辑，删除），来操作每一行的数据。

<脚本 因特网标准="text/网页标准" id="工具栏演示">
	<超链接 类名="lay-按钮 lay-按钮-迷你" lay-事件="查看">查看</超链接>
	<超链接 类名="lay-按钮 lay-按钮-迷你" lay-事件="编辑">编辑</超链接>
	<超链接 类名="lay-按钮 lay-按钮-警告 lay-按钮-迷你" lay-事件="删除">删除</超链接>
</脚本>

注意看上面的代码：它是脚本标签，属性因特网标准="text/网页标准"，并设置id包裹几个按钮，按钮有一个特别的属性 lay-事件，这里很重要，到时候工具事件会用到这个属性值。

代码效果展示：

一个有按钮操作的数据表格就完成了，但是点击没反应，因为这里的按钮事件还没写，我们先了解一下表格上方的工具栏，在配置自己做的工具栏。

表格上方的工具栏：

1、添加：事件属性值是添加，事件方法自定义；

2、编辑：事件属性值是编辑，事件方法自定义；

3、删除：事件属性值是删除，事件方法自定义；

4、筛选列：勾选要展示的列；

5、导出：到处当前页的数据，可以导出为csv,excel；

6、打印：唤醒浏览器打印功能，打印当前的表格。

自定义方法：

// 工具栏事件
lay_表格.工具栏事件("用户", 定义函数 (工具栏事件对象) {
	变量 选中 = lay_表格.选中行("用户数据");
	变量 事件 = 工具栏事件对象.事件;
	// 重载表格
	定义函数 重载表格() {
		lay_表格.重载("用户数据");
		//如果重载到第一页，可以这样设置
		lay_表格.重载("用户数据", {
    		[lay_表格.配置.分页]: {
        		[lay_分页.配置.起始页]: 1
   			}
		});
	}
	// 工具栏事件判断
	如果 (事件 === "添加") {
		// 弹出一个表单页面弹窗实现添加功能,然后重载表格
		// 代码......
		lay_弹出层.消息框("添加");
	} 否则 如果 (事件 === "编辑") {
		如果 (选中["data"].长度 === 1) {
			// 一个更改表单弹窗编辑后重载表格
			局部变量 数据 = 选中["data"][0];
			// 代码......
			lay_弹出层.消息框("编辑" + JSON类.到可读JSON文本(数据));
		} 否则 {
			lay_弹出层.消息框("只能选中一行数据进行编辑");
		}
	} 否则 如果 (事件 === "删除") {
		如果 (选中["data"].长度> 0) {
			lay_弹出层.消息框("删除" + JSON类.到可读JSON文本(选中["data"]));
			// 后台删除数据并重载表格
			// 代码......
			重载表格();
		} 否则 {
			lay_弹出层.消息框("没有选中数据!");
		}
	}
});

再设置一下自己写的按钮事件：

lay_表格.工具事件("用户", 定义函数 (工具事件对象) {
	变量 数据 = 工具事件对象.数据;
	变量 事件 = 工具事件对象.事件;
	变量 当前行 = 工具事件对象.表格行;
	如果 (事件 === "查看") {
		lay_弹出层.消息框(JSON类.到可读JSON文本(数据));
	} 否则 如果 (事件 === "编辑") {
		lay_弹出层.消息框("你点击了编辑");
		//同步更新缓存对应的值
		工具事件对象.更新({
			账号: "123123",
			姓名: "xxx",
		});
	} 否则 如果 (事件 === "删除") {
		lay_弹出层.询问框("真的删除行吗?", 定义函数 (序号) {
			工具事件对象.删除(); //删除对应行
			lay_弹出层.关闭(序号);
			//向服务端发送删除指令
		});
	}
});

还有一个表格里面的复选框点击事件。

lay_表单.表单复选框事件("开关演示", 定义函数 (元素对象) {
    局部变量 状态 = 元素对象.elem.checked;
    局部变量 id = $(元素对象.elem).属性值("当前id");
    局部变量 启用;
    如果 (状态) {
        启用 = 1;
    } 否则 {
        启用 = 0;
    }
    // 交互更改后台数据启用状态
    // 代码......
    lay_弹出层.消息框("当前行:" + id + "," + 元素对象.value + ":" + 启用);
});

这样可以快速的改变账户的启用状态。

这样一个可以添加，更改，删除，批量操作等数据表格就完成了。

这一篇博客暂时到这里（太长了，分开写），下一篇继续了解一下表格的参数配置。

点击此处跳转案例下载：点击下载数据表格实例

评论信息

默认排序 

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

测试账号

热门博客

最新博客

35-快码FOF中文编程layui教学-组件：数据表格组件