table表格的增删查改、图片的处理、数据的导入导出

之前我们讲过一个数据库里面的增删查改和用jquer讲了一些简单的增删查改，没有做任何的判断，这次还是使用table的表格给它加一些条件的判断。

图表 1

图表 2

图表 3

图表1、图表2、图表3是html的部分

图表 4 是写完html在浏览器显示出来的效果

图表 5

图表 6

图表 7

图表 8

图表 9 模态窗体的效果

图表 10 导入的模态窗体

图表5~图表8是模态窗体的部分，这次新增和修改模态窗体和之前的不一样。之前新增、修改的模态窗体是分开的，这次新增、修改的模态窗体都是同一个，而且这次的模态窗体里面还有一个添加图片的事件，而且这次还有一个导入导出，把Excel里面的数据导入到进来，把数据导出到Excel里面

修改和删除之前是自定义列，这次是通过script添加一个删除和修改事件

图表 11 删除、修改

以上是html里面的代码，下面开始写js代码

第一步：定义弹出层和表格的全局变量，在定义一个变量用来接收表格渲染返回回来的类

第二步：加载模块

第三步：渲染表格

图表 12

表格的重置与模糊查询

先在控制器当中写一个表格重置的方法，在进行一个查询的语句、条件的拼接和求出总条数

图表 13 查询语句

图表 14 条件的拼接

图表 15 数据的总条数

控制器里面的方法写完了，转到视图去调用这个方法

图表 16 表格重置（视图）

表格重置写完在表格渲染后面添加表格重置，在模糊查询上面用一个onchange绑定表单重置事件

模块的加载写完了，现在要开始给页面上学院、专业、年级和班级绑定下拉框了，这个下拉框的绑定不是去控制器里面去写，而是给他添加一个区域，在区域里面添加一个新的控制器，在这个控制里面去写下拉框的数据，这次是把所有的下拉框全部写在这里面，要用的时候直接去调用即可

图表 17 下拉框

图表 18 下拉框

下拉框的方法全部定义好了，之前我们也写过一个下拉框的插件，把插件引入到视图里面

图表 19 我们自己封装的一个下拉框的插件

调用封装下拉框的这个方法然后在把相对应下拉框的路径引入，在获取是那个下拉框的ID

图表 20 页面上下拉框的获取，因为这里只有改变学院下拉框后面专业和年级下拉框在会查询对应的数据，班级也是一样的，只有专业和年级的下拉框改变才会查询班级的数据

弹出新增的模态窗体

图表 21

新增的模态窗体弹出来了，给新增模态窗体里面绑定下拉框

图表 22

新增的下拉框绑定成功之后，就开始给图片绑定点击事件

选择图片的id给图片绑定双击事件，双击的时候弹出一个文件的选择

图表 23

图表 24

图表 25 可以打开文件的选择之后，读取一下图片数据，用正则表达式验证一下我们选择的文件是否为图片文件，文件读取完之后把获取到的到img标签，就实习了图片的一个显示

打开修改模态窗体

图表 26

注意：这里的修改和删除和之前的修改和删除不一样了，之前是写的是一个自定义列，在自定义列中写点击事件，这次我们没有通过自定义列去完成修改和删除的操作，虽然也可以弹出模态窗体但是不能获取到id去实现一个数据的回填，数据的回填和修改数据则是通过id去获取的，所以我们要早加载模块中去添加表格工具事件，在这个事件里面去调用这个方法

图表 27 表格行工具事件

事件的语法：table.on('event(filter)', callback);

注：event为内置事件名，filter为容器lay-filter设定的值，也就是定义table表格lay-filter的值 callback:回调函数

【注】tool：layui内置的事件名称

toolbar：头工具事件

checkbox:复选框事件

edit：单元格编辑事件

row：行单击事件

rowDouble：行双击事件

sort：排序事件

使用“edit”和“del”来判断是修改还是删除。“edit”和“del”是通过修改和删除按钮中的lay-event=“”的来的，也可以在lay-event=””中填写修改和删除，在控制台输出的也是修改和删除，就不是“edit”和“del”，也就是说lay-event=””里面的名称是什么可以自己去定义，上面是什么这里的判断就对应什么，默认的是“edit”和“del”

转到控制器

去控制器里面定义一个方法通过id进行一个数据回填的操作

图表 28

转到视图

使用post进行对数据的请求，因为给模态窗体赋值的代码都是一样的就只有id不一样，所以我们在这里给它定一个方法，把这个方法放到我们自己封装的那个类里面，然后直接去调用这个方法就可以了

图表 29

图表 30

图表29和图表30是我们定义的一个方法，用于回填表单数据

调用这个方法的名称，选择id选择器，回调的数据

图表 31

修改模态窗体的数据全部回填完了，还有一个图片的数据没有回填上去，刚刚我们控制器写回调的方法的时候，给图片的值赋为null值，因为图片的赋值和之前的不一样，需要单独去处理它

转到控制器去处理图片的回填给图片赋值也是通过id去赋值

图表 32 图片的回填

转到视图

去请求图片数据，显示图片图片的显示还是写在post请求里面

图表 33

新增和修改的模态窗体全部弄好了之后，就开始保存新增和修改的操作

图表 34

图表 35

先定义一个保存的方法

获取元素，这里元素的获取不是一个个去获取元素，而是将表单序列化成一个数组

在定义一个文件上传的表单，用于下面把文件数据添加到文件上传的表单

把参数Array转换为obj

图表 36 手动获取input标签也就是文件选择控件的值，添加到upFormData里面

转到控制器去写新增和修改保存的方法

图表 37

图表 38

图表 39

图表37~图表39是新增保存的数据（控制器），注意：在做身份证验证时候一定要判断是否符合规范

修改保存操作和新增保存操作差不多

图表 40 在判断文件是否上传了之前将之前的数据查找出来

图表 41 修改上传的图片是将之前的就图片删除

图表 42

新增和修改保存的方法定义完了，转到视图

通过if。。。else判断是新增还是修改

图表 43

图表 44

新增和修改的操作全部完成，剩下的就是删除操作

转控制器定义删除的方法

图表 45

方法定义完之后，转视图先弹出询问框，询问是否删除数据

询问完之后关闭询问框

使用post请求数据，删除操作就完成了

图表 46

新增、修改、删除的操作全部完成，下面是导入和导出的操作

导入

先弹出导入的模态窗体

图表 47

下载上传的模板

定义一个方法，在这个方法里面去做资源的请求

这个资源的请求则转到控制器去定义一个临时路径，判断这个文件是否存在

图表 48 （控制器）

图表 49 （视图）

然后在是一个上传Excel文件的操作

定义一个方法

先获取input标签然后通过get(0)把它转换为js对象，然后在调用files属性

在创建一个formData，把我们需要上传的数据添加到formData里面

通过异步提交，把数据提交到指定的路径里面

图表 50

转控制器

Excel表格数据的上传是接收视图那边传递过来的Excel 文件，把数据进行读取，然后进行一个新增操作

注意：控制器这边的值和formData.append里面的值一样

图表 51 Excel 表格数据上传的方法（控制器）

表格上传的思路：

获取读取的文件
把文件转换为二进制数据
二进制数据装成内存流
利用NPOI把内存流中的数据读取成Excel

先获取文件的后缀，也就是上传文件的扩展名，判断我我上传的文件是否是一个exce文件

图表 52

图表 53

图表 54

图表 55

图表 56

图表 57

图表 58

图表 59

图表52~图表59为exec表单上传的数据（控制器）

转视图

通过异步把数据提交到指定的路径里面

图表 60

导出

转到控制器，把导出的方法写出来

图表 61 注意：这个方法里面的值和新增保存里面的方法一样查询语句和条件拼接也是一样的

图表 62

图表 63

图表 64

图表 65

图表 66

图表 67

图表61~图表67是数据导出的方法（控制器）

在这里要在解决方法里面添加两个引用，一个是NPOI和System.Transaction

转视图

添加一个方法，获取元素

图表 68

table表格的增删查改、图片的处理、数据的导入导出相关推荐

vue---数据增删查改，野狗存储数据
学习vue系列课程时,涉及到前端页面数据的存储与读取,原本想使google的firebase,可是网址访问不了o(╥﹏╥)o,还好,有野狗. 野狗的"实时通信引擎"功能有效地解决了 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
MySQL第二讲 - 数据表简单操作与 “增删查改的开头部分- 增”- 细节狂魔
文章目录前文知识点回顾 SQL语句 >>操作指令 (不区分大小写) 1.显示数据库:show databases; 2.创建数据库:create database 数据库名; [如果 ...
安卓后端mysql_后端Spring Boot+前端Android交互+MySQL增删查改（Java+Kotlin实现）
1 前言&概述这篇文章是基于这篇文章的更新,主要是更新了一些技术栈以及开发工具的版本,还有修复了一些Bug. 本文是SpringBoot+Android+MySQL的增删查改的简单实现,用到 ...
TP框架增删改查需要掉ajax么6,TP6框架--EasyAdmin学习笔记：实现数据库增删查改
这是我写的学习EasyAdmin的第三章,这一章我给大家分享下如何进行数据库的增删查改上一章链接:点击这里前往上一章我们说到,我仿照官方案例,定义了一条路由goodsone和创建了对应数据库,我们 ...
数据库的增删查改（全部重点知识一篇整合，包括数据库查询的进阶内容）
目录一.新增数据 (1)单行数据全列输入 (2)指定列插入 (3)多行插入二.简单查询数据 (1)全列查询 (2)指定列查询 (3)查询的字段是表达式 (4)去重操作distinct (5)排序操 ...
【TcaplusDB知识库】GO快速上手PB表的增删查改操作
PROTOBUF说明 PROTO表是基于PROTOBUF协议设计的TcaplusDB表,PROTOBUF协议是Google开源的通用RPC通信协议,用于TcaplusDB存储数据的序列化.反序列化等操 ...
Mybatis、SpringBoot入门实战（微型项目） -- Mysql增删查改、写接口、测试接口
Mybatis入门实战(微型项目) – Mysql增删查改.写接口.测试接口开发环境: 1.Window10 v1909 2.idea 2019 3.jdk 1.8 4.mybatis 3.5.5 ...
MERGE批量增删查改数据
MERGE优点: 在批量处理数据的时候,我可以用到merge一次完成数据处理. 示例代码一: MERGE INTO student AS t using (SELECT '丽水' AS NAME,20 ...

table表格的增删查改、图片的处理、数据的导入导出

table表格的增删查改、图片的处理、数据的导入导出相关推荐

最新文章

热门文章