(四十二)模态框的使用

模态框使用

模态框使用流程

参考 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对象的属性信息

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

@Test
    public 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从而获取数据

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