Layui动态表格

最新推荐文章于 2024-07-10 22:37:56 发布

ZX-10R

最新推荐文章于 2024-07-10 22:37:56 发布

阅读量2.7k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44538411/article/details/117690034

版权

本文介绍了如何使用Layui前端框架创建动态表格。首先，需要在HTML中设置table结构，并引入Layui的CSS和JS文件。接着，通过JavaScript初始化Layui并设置数据表格的表头和参数。动态表格的关键在于根据条件改变表头，这里使用下拉框的选择来调整表头内容。通过监听下拉框的onchange事件，调用方法进行查询。最后，控制器处理查询请求，返回数据更新表格。示例展示了动态改变表头和查询数据的完整流程。

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

开发工具与关键技术：Eclipse软件，layui动态表格 
作者：陈隆
撰写时间：2021年06月08日

在使用Layui的表格中，其实动态表格也是一个非常不错的一种表格，这动态表格的用法其实就是根据你选择的条件来进行同步的，首先想使用layui这个前端插件先需要把layui的需要用到的插件的css和js的文件，这些文件可以在layui官网中进行下载，把这些都部署好之后就是可以开始进行代码的编写了。首先就是先把HTML中的table准备好。

<table class="layui-hide" id="tabSalary" lay-filter="tabSalary"></table>

然后就是js中的代码了，先是要初始化layui中需要的东西，

var table, layer,form;
layui.use(['form', 'table', 'layer' ], function() {
   
			table = layui.table,
			layer = layui.layer,
			form = layui.form,
			$ = layui.jquery,
			)}

把layui初始化好之后就可以写数据表格的表头，和一些常用的参数了。那么下面就来写一下方法级渲染的数据表格。直接上代码。

tabPaySalary=table.render({
   
						elem : '#tabSalary',//指的是table标签的id		
						url :'' ,//后端接收的请求路径						
						method : 'post',
					    toolbar : '#toolbarDemo' ,//绑定的工具栏属性 		 
						totalRow : false ,//是否在表格最下边显示合计行属		
						id : 'map',
						title : '档案数据表',
						cols : [ [ //里面写具体的表格显示的内容				
						]],
						done:function(res,curr,count){
   
							var myData=new Array();
							$("#PayNumber").val(count);
							//获取页面内容
							var PasId=$("#Paydistribution").val();
							myData[0]={
   type:'nu