模态框的使用"/>
(四十二)模态框的使用
模态框使用
模态框使用流程
参考 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从而获取数据
注意:这里使用的是添加与编辑共用,如果不共用就可以分开处理
更多推荐
(四十二)模态框的使用
发布评论