目标页面和功能:点击操作列的修改按钮-—-弹出修改模态框—-模态框里的数据自动回填上回填-—修改数据---保存修改后的数据---刷新表格
修改模态框如下图:(点击第一条数据然后把各框内的内容修改后) 13条
发现错误:(修改该条数据后 点击保存时又新增了一条刚刚修改后的数据?) 14条
初步排查错误:1.能够实现保存、修改和新增的功能;
2.表格初始化那方面的逻辑和代码没什么问题;
3.能保存新增的,但在修改模态框里修改数据后 保存修改变成了新增数据???
4.控制台没有报错。
根据下面两张图分析:我把新增和修改共用在了一个模态框里,并且把保存的方法也写在了一个方法里,
进一步分析:两个方法共用一个模态框,表单里的action属性又无法共享两个方法,一个模态框内又写不了两个action属性,所以上图红色下划线内容就是错误的源头,因此页面只就只提交了InsertEmploye的方法,而修改的方法就被默默的埋没了,所以看不到保存修改的功能。
解决方法:首先去掉form表单里的action属性,然后分别在弹出新增和修改的模态框里 设置表单的action 如下图所示:
prop(“Key”,”Value”); (属性名称,属性值) 概述:获取在匹配的元素集中的第一个元素的属性值。
开启调试来到网页测试一下刚刚解决的功能是否正确:再次选中一条数据,修改内容,
点击保存后:数据得到改变并没有另外新增一条,说明逻辑正确了。