上一篇是表单新增,那么这一篇显然就是表单修改。以下是表单修改的步骤以及效果。
新增的时候我们用到了模态框,那么我们修改就也会用到模态框。这里直接将新增模态框进行复制,粘贴到修改的代码下面就行。对应的模态框名称和模态框的ID名城需要进行改动。
修改的方式与新增的方式是一样的没有什么差别,但是模态框出显得方式不同。我们在修改数据的时候应该是点击到我们需要修改的地方时弹出,并且带上那一行的数据。所以在这里我们需要给每一行的tr标签加上点击事件。分别设置变量从中查找td标签里第一个元素的文本值并赋给声明的变量。然后在获取对应id的名称,将变量的值赋值给输入框。
调试打开页面,选中我们要修改的那一行双击。就能够弹出提示框,弹出后我们可以看到我们设置的文本框中自动添加上了选中行的文本信息。我们可以在这里面进行修改内容,当然此时的我们并不能进行真正的修改。修改功能的时候我们需要先转到控制台。
下面是效果图,我随便选择了一个信息。
转到控制台后,我们需要写它的功能。修改的判断和新增功能的判断是没有什么区别的,有的话就是多了一个判断,一个员工id的判断。当员工id为空时,我们是找不到对应的员工信息的。修改的语句与新增的语句不同,修改的语句可以进行缩写。(新增不能)。
返回视图,我们需要获取文本框内的内容。(文本框的id是需要更改的,不改数据会报错)进行判断当前数据是否不为空。通过post提交返回数据,利用键值对保持数据库内的数据和我们页面上的内容保持一致,新增的功能中也用到了。
写完后在点击调试按钮进行运行,后面我们来看看没有进行修改的效果。(如果显示不出我们需要修改的那行数据。我们看看是否是在视图写代码时把它的路径写错了,或者时控制器的代码没写全。)
这个时候我们看到查询数据并投射到页面上是没有问题的,之后我们双击需要修改的内容。(没有弹出提示框的原因可能是你的点击事件没有进行绑定,更有可能你的方法名复制错了。)选中的那一行数据,出现在修改的弹窗上。
到这一步的时候我们随便选择一个文本框内的内容进行修改,然后在保存。我这里直接将第一个张飞的名字改为翠花。自己试一遍效果明显一点。(其他的内容也是可以进行更改的,这里不做示范。需要自己去调试.)
返回数据库刷新也能看到我们更改的内容。
(查询修改信息时用的是通过员工ID来进行查询,可以试试其他的方法来进行绑定。)