layui-table的前后端交互

最新推荐文章于 2023-12-07 11:14:25 发布

tobe_100

最新推荐文章于 2023-12-07 11:14:25 发布

阅读量2.9k

点赞数 2

本文链接：https://blog.csdn.net/tobe_100/article/details/103713476

版权

本文介绍了layui-table在前端页面的显示方法，强调了导入layui包和使用table.render设置数据接口、表头字段的重要性。同时展示了如何通过layui的toolbar添加非后台传递的数据，并提供了删除按钮的事件处理示例。在后台处理部分，解释了layui期望的数据格式，并说明了后台如何将数据以JSONObject形式传送到前端。

摘要由CSDN通过智能技术生成

layui-table的前后端交互@TOC

layui-table的前端页面显示

用layui来显示table，注意一定要先导入layui包，在页面中引入layui.css（样式），layui.js（操作）

静态页面显示

<link href="/layuiBook/layui/css/layui.css" rel="stylesheet">
<script type="text/javascript" src="/layuiBook/layui/layui.js"></script>

先通过layui.use(‘table’, function() {var table = layui.table}）来加载table模块，其他模块初始化方式类似；table.render的作用：绑定容器（elem）、设置数据接口（url）、在表头设定对应的字段（采用json格式，）（cols:[[ field：字段（数据库），title：显示表头） ]]，

<script type="text/javascript">
	layui.use('table', function() {
   
		var table = layui.table
		//初始化,里面的数据采用json格式
		table.render({
   
			elem:"#book"//选择要用到的table的id
			,url:"/layuiBook/index/indexInit"//请求地址
			,page:true //分页
			 ,height: 315 //容器高度
			,cols:[[//表头 采用json格式，field：字段（数据库），title：显示表头
			        {
   type:'checkbox'} //加上复选框
				  ,