表格渲染功能

页面的表格渲染,表格渲染顾名思义就是将数据库中的数据通过渲染分类将用户需要的数据显示到页面上,渲染包含看新增、修改、查询、删除的知识点而且也非常简单很轻松的就可以上手,页面的布局用主要还是使用layui进行搭建的。
1:表格的制作,首先声明好表格需要的全局变量先var layer,layTable这段用于加载layui中的弹出层模块和table表格在弹出层的时候就需要用到这段的声明操作,还有一个声明就是渲染表格要用到的var TabAirport;表格,表格渲染的方式是用着layui的方法进行渲染的
在这里插入图片描述

首先是elem这个方法的意思指定table的容器来进行渲染这张图里用着id的选择器来进行选择的,而url就是表格的数据来源也就是控制器里的查询方法,data的意思直接赋值数据即适用于只按时一页的数据也非常适用一段已知数据进行多页展示,在渲染里一般是用来加载本地的数据进行调试表格的时候用得到。
在这里插入图片描述

完成以上的操作就要开始填写表题了,title定义一列数据的类型名称,type的话就就是序号这个方法是根据你有多少条数据它就有多少条的序号来进行添加的temolet是用来设置方法的修改和删除的时间是一个按钮的操作。
在表格渲染的时候经常会出现的文件有两个,第一个返回的数据不规范,正确的成功码状态码(code)应为0,这个错误一般要到控制器里面去找首先找到表格使用的控制器方法在方法里面检查封装LayuiTableData的方法是否正确然后就是返回数据里有没有打错或者没有打因为这些问题都是会导致页面的数据不会出来的问题。

在这里插入图片描述
第二点就是数据接口请求异常,数据请求接口异常就要注意了首先要去到页面检查表格的请求的路径是否正确然后就是请求的控制器名称是否存在控制器不存在或者是请求的路径错了都会发生数据请求异常的报错。在这里插入图片描述
在这里插入图片描述

2:页面的数据请求,数据请求配合表格渲染的方法将数据显示到页面上显示到页面上不是就是请求路径就可以得需要在控制器里写查询数据的方法进行封装LayuiTableData的方法才会显示到页面上。
查询的方法有单表查询多表查询,单表查询的意思就是指定一张表里来查询数据多表查询就比较麻烦首先要在控制器建立一个虚拟的表然后进行表与表之间的连接将连接表的数据放在虚拟的表上来查询可以理解为将要查询的五张不同的表房子一张表上来进行查询的操作,回到主题页面使用的是单表查询的方法来查询数据这个方法查询的是机场的数据在数据库里的名称为S_Airport机场表查询完后就是计算数据的总条数了。
在这里插入图片描述

数据计算完成后就是封装的操作封装完成后然后就是设置数据对应的类型设置完成就可以去页面上进行调试看一下数据到底有没有查询并显示到页面上,查询数据的结果如下图。
在这里插入图片描述

查询的操作完成后还有三件功能分别是修改、删除、新增这三样,页面的数据不是自动生成的是用户自己进行添加的操作添加的,添加数据和查询数据的方法差不多区别就在于多了一条判断的操作,新增的操作需要用到页面上的弹出窗体这个窗体的作用就是用来添加数据的。

在这里插入图片描述

布局在页面上还有一个if的判断就是判断数据是否为空的操作防止数据为空占用数据库的空间,在控制器中也有判断它的判断的方式是根据上方图的的顺序来进行判断的首先是三字码的判断,

根据取反判断传递的数据长度(Length)是否等于三如果长度小于三位数或者是大于三位数的话就就执行else的方法必须要长度要等于三位数才会执行下一句的代码,机场名称的判断这个只是单纯的判断数据是否为空直接下一句判断城市名称和拼音码,首先是拼音的拼音码是依靠一句写好的样式直接引用到页面上监听城市名称的输入然后在拼音码里根据文字来生成拼音码,拼音码需要进和城市名称要首先判断是否有重复的数据才会进行添加首先单判断是否有重复的数据如果没有就开始执行新增的代码。
修改和新增的方法差不多一样唯一的不同就是多了一条代码EntityState,修改数据需要用到这一条。
在这里插入图片描述

最后一步删除操作,删除数据要比别的简单实现要完成页面的布局删除数据的判断当用户删除数据的时候跳出提示框提示用户是否删除在用户点击确认按钮的时候就发送post的请求到控制器上进行删除的操作。

在这里插入图片描述

删除数据的时候需要找到要删除数据的那张表查询出后就根据用户要删除的数据判断删除表中的数据

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值