模态框使用

模态框使用流程

参考 Bootstrap 官方文档拷贝模态框的元素,

点击JavaScript插件,选择模态框,里面有许多样式,以其中的样式为例

放在页面的body元素中,然后再加入input表单,修改添加或者编辑按钮,可以通过点击事件,给按钮绑定点击事件,点击后弹出模态框

也可以参考官方给出的代码,

$('#模态框的id').modal('show'); //官方文档中表示通过该方法即可弹出模态框

接下来以项目部门添加与编辑为例,因为添加按钮与编辑按钮,共用一个模态框与表单,所以需要思考的是如何做到部门编辑回显,新增为空

新增与编辑的class属性都有btn-input,可以通过绑定事件关联

1.新增按钮

2.编辑按钮

3.模态框

4.JS绑定事件

流程解读

1.在编辑中data-json=’${department.toJson()} 定义该属性起到什么作用?

首先看实体类

@Data
public class Department {private Long id;private String name;private String sn;public String toJson(){//将对象转成JSON字符串格式return JSON.toJSONString(this);}
}

JSON.toJSONString()是将java对象转换成JSON字符串格式的工具类方法,谁调用它,就将谁转换,这里是department对象调用,所以它可以获取department对象的属性信息

我们可以写测试方法,进行检验

@Testpublic void toJson() {Department department = new Department();department.setName("轩鸢无敌");department.setId(10L);department.setSn("干饭部");System.out.println(department);System.out.println(department.toJson());}

得出结果:

Department(id=10, name=轩鸢无敌, sn=干饭部)
{"id":10,"name":"轩鸢无敌","sn":"干饭部"}

得到了department的属性值,再通过name属性回显数据,其中用到了jQuery中的data方法,与过滤选择器

2.为什么需要点击前需要清除模态框之前的数据?

由于编辑与新增共用一个模态框,所以在点击编辑按钮后,模态框中部门数据回显,再点击添加按钮,数据也会回显.所以我们需要在重新点击时,清除之前的数据.我们在点击时,就会拿到部门对象的JSON字符串,再通过有无id从而获取数据

注意:这里使用的是添加与编辑共用,如果不共用就可以分开处理

(四十二)模态框的使用相关推荐

maya批量命名插件_教你玩转MAYA的四十二精华造诣（第一期）
最近在整理文档时发现我收藏了一篇关于MAYA应用技巧的文章,突然有兴趣看了看,结果发现老版本MAYA中的某些内容很多已经无法应用于新版本.我又上网查了一下,结果发现网上好多帖子和我收藏的这篇内容基本一 ...
第四十二章使用多个 IRIS 实例（二）
文章目录第四十二章使用多个 IRIS 实例(二) 控制 `IRIS` 实例 `Unix®`.`Linux` 和 `macOS` 上的 iris 命令第四十二章使用多个 IRIS 实例(二) 控 ...
OpenCV学习笔记（四十一）——再看基础数据结构core OpenCV学习笔记（四十二）——Mat数据操作之普通青年、文艺青年、暴力青年 OpenCV学习笔记（四十三）——存取像素值操作汇总co
OpenCV学习笔记(四十一)--再看基础数据结构core 记得我在OpenCV学习笔记(四)--新版本的数据结构core里面讲过新版本的数据结构了,可是我再看这部分的时候,我发现我当时实在是看得太马 ...
四十二、深入Java中的文件读取操作
@Author:Runsen @Date:2020/6/8 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排名 ...
JavaScript学习（四十二）—利用工厂模式创建对象以及工厂模式创建对象的不足
JavaScript学习(四十二)-利用工厂模式创建对象以及工厂模式创建对象的不足一.利用工厂模式创建对象工厂模式是JavaScript中的一种设计模式,它的作用是批量创建具有同种属性的对象. 格 ...
【Visual C++】游戏开发笔记四十二浅墨DirectX教程之十游戏输入控制利器 DirectInput专场
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 本系列文 ...
多麦克风做拾音的波束_乱侃外设篇四十二：一浪更比一浪强！HyperX Quadcast S 声浪加强版麦克风浅评...
原标题:乱侃外设篇四十二:一浪更比一浪强!HyperX Quadcast S 声浪加强版麦克风浅评乱侃外设篇四十二:一浪更比一浪强!HyperX Quadcast S 声浪加强版麦克风浅评 20 ...
如何选择适合你的兴趣爱好（四十二），风筝
围城网的摇摇今天给大家带来了"如何选择适合你的兴趣爱好"系列专辑的第四十二讲--风筝.风筝是在纸鸢背上系上一条弓弦,或在纸鸢头部按一个风笛,当纸升空以后,强风通过笛,或者引起弓弦的 ...
【Microsoft Azure 的1024种玩法】四十二. 通过Windows Admin Center快速创建Azure Virtual Machines
[简介] Windows Admin Center是微软开发的一套可以部署在本地基于浏览器的GUI的工具集平台,其平台可用于管理Windows相关服务器和PC机器,我们可以利用Windows Admi ...

(四十二)模态框的使用

模态框使用