28、尚硅谷_SSM高级整合_修改_创建员工修改模态框.avi原创

好，那么之前呢，我们把这个新增功能就做完了，接下来我们来做员工的修改功能，哎，我们来看之前的这个项目修改呢，也非常简单。当我们点击编辑按钮以后，首先呢，我们要编辑哪个员工，应该把这个员工的信息显示在我们这个模态框中，然后点击更新，我们这个员工就修改成功了，所以说哎，这是我们要修改的咱们这个页面效果。更新，接下来呢是修改修改，修改的样子呢就是这样，而我们修改的逻辑呢。哎，就是第一步，当我们点击编辑，点击编辑应该呢，弹出咱们这个用户修改的模态框。然后呢，在这个模特框中显示咱们这个用户信息，然后呢，我当我们再来点击咱们这个更新以后，咱们就要完成用户修改，所以说呢，我们接下来就把这个工作做完。

先来到啊，我们这个页面，这个页面上呢，我们来看我们自己的页面，好在这儿。来启动我们的服务器。好，我们这个页面上呢，每一个员工记录都有对应一个编辑按钮，点击编辑应该弹出员工修改的模态框，所以说呢，我们先把这个模态框在我们这个页面定义出来，我们来看啊，因为这个模态框跟我们之前是一模一样的，跟员工添加是一样的，但是这个用户名不让改，哎，只是这样子，那么呢，我们就来把这个模态框，之前的模态框我就直接拿过来再复制一遍。这是员工添加的。好，接下来我CTRLC来复制一个，上边这个模态框呢，就是咱们这个员工修改的。

员工修改的模态框，我们就不叫EP了，我们叫EP up model，好，然后呢，我们把这个就叫员工修改来。咱们把这个员工修改的这这个标题好把它删掉没啥用，好那么接下来呢，我们来看啊，把下边的东西，那么下边的这些ID，我们每一个元素的ID我们也变一下，这是修改的input框。包括下面这个，这是修改的咱们这个email框。包括呢，我们下边这两个针的啊，这两个针的的ID，这是我们这个修改的。那这个ID我们基本好像都没用过，所以说大家可以把这个大可删除，那包括呢，我们这个啊部门信息，咱们这个啊，部门信息它没有ID啊，那就放在这儿，包括我们这个员工啊，这个按钮就是修改按钮，诶我们叫更新，好点击更新我们就叫e update。

好，我们这个模态框就定义好了，模态框定义好以后，我们要做的工作呢，就是点击这个编辑按钮，弹出模态框，那么呢，这个编辑按钮我们要绑定点击事件，所以说呢，我给每一个这个按钮，我来添加一个咱们这个标识，我们来看啊，这个编辑按钮我们在创建，哎，我们之前显示员工列表的时候会进行创建。好，这是edit button，好，我们来添加了一个class，叫这些，我们来每一个编辑按钮呢，我们也就叫edit，咱们这个好，我们来添加一个标识，包括每一个删除按钮，我们后边也会用到，那我们就直接填上，就叫delete。第一，哎，Delete，好，这delete button，我们来看啊，我们把这些按钮呢，我们都添加上了一个class标识，相当于我们点击这些按钮，我们来绑定事件来刷新。好现在每一个按钮，每一个编辑按钮都有他们的标识信息，Edit button，我们来为他们绑定单机时间，好，这个绑定单机时间有点询问，我们来想想啊，如果我们在这一块，好整个加载完了以后呢，我们来绑定单击事件，好，我们给他们点click，这个能绑上吗？我们来思考一下啊，我function，好，我来alert一下。

啊，咱们这个我就来一个edit，好，我来点刷新，刷新我点编辑，诶我们来看能绑上吗？哎，我点了多次编辑，并没有弹框不能绑上，不能绑上的原因是什么呢？因为我们想想啊，这个页面一加载，哎，就会执行我们这些JS代码为我们这些绑事件，而这个绑事件呢，我们来想啊，页面加载完成以后，这些数据啊，是我们页面加载完成以后发的as请求，哎拿到的包括这个编辑按钮都是，其实相当于在你这个绑事件的这个方法之后才创建出了这个编辑按钮，所以说我们这样绑是绑不成的，那么呢，有两种办法啊，因为我们我们是咱们这个。

咱们这个。按钮按钮创建之前就绑定了这个时间，咱们这个可立啊，我们这个方法是这个逻辑，所以呢是绑不上的。绑定不上，那我们呢，就有两种解决办法，第一种解决办法呢，我们可以在创建按钮的时候，可以在创建按钮的时候。

放天时间啊，这个办法呢，也非常简单，大家去写就行了，当然这个呢，我们又给咱们这个按钮创建啊，创建我们这个编辑按钮的时候，我们又写一大堆，比如我们我们来之前啊，这个编辑按钮创建出来了，我们又绑事件写一大堆，诶挺耦合的，代码也挺多的，那么接下来呢，就是在这儿。哎，我们应该绑定单机时间，这个绑定单机呢，我们想到了一个方法叫六，诶在解壳瑞文档中呢，有一个六方法，这个live方法呢，也就说可以为我们后来的元素，即使你后来添加上的新元素，哎，就是它可以啊为咱们这个绑定一个方法，但是呢，即使这个元素是以后添加进来的也能绑上，但是不幸的是我们如果在这里边写六，我们来看效果二刷新，你看直接呢页面这报了一个错，说live is not方式，这原因呢，是因为在我们杰克瑞，哎新版本，我们把这个live方法给删除掉，杰克瑞新版啊没有这个类务方法，那么呢，与这个类务啊，我们替代的呢，是咱们这个使用。

咱们这个啊方法进行替代。好，也就是说呢，我们这一块有一个on，我们绑事件，还有一个on拿它来进行替代，而这个on的用法呢，我们来看一下啊，它呢比较奇怪，不是像我们看的，如果我写一个二，我们要绑的事件呢，写在这，哎，我要绑可Li可事件好我们来看行不行，点刷新啊，感觉应该行点点点啊，但是并没反应，所以说呢，我们要啊，要为后来能添加的元素绑上时间，我们要这么来用，这里边呢，还可以传一个select select的意思就是找到我们前面选择器，哎，里边给定的这些后代元素，如果这些后代元素有元素，我们给这些后代绑上这个时间，所以说呢，我们想给哎艾，咱们这个button要绑时间，那你就这么来写。

我们来在document整个文档中，我们可以在整个文档中来绑事件的时候呢，我们是选择edit button。哎，也就是说呢，这里边写我们要给绑定的这个元素，我们要绑定的元素好，我们再来刷新，我们来看刷新点边机，哎，这才绑上了，所以说呢，这一块呢，稍微有点处理，那么这个呢，我们写完了以后，我们继续这个事件呢，我们就绑上了，绑上以后呢，我们要做的事情也非常简单。首先第一件事情，我们点编辑，我们要弹出咱们这个模态框，弹出模态框之前也要查询出我们这个部门信息，并把我们这个查出部门信息并。咱们这个显示咱们这个部门列表。

部门列表，所以说呢，这一块也是一样的，包括呢，我们也应该去查出员工信息。员工信息。员工信息，咱们这个啊，显示咱们这个员工信息，所以说呢，我们要做的是这么多。等咱们这些都显示完了以后，哎，我们都准备正确以后，我们才去弹出模态框，而模态框的弹出呢，我们来看啊，也非常简单，就是调用这个方法CTRLC。来，复制过来。复制过来弹出模态框，模态框的ID我们叫employee update啊到这个模态框，好，我们来看啊，先确保这个弹出正确点走来模特框弹出来了，我们只是员工啊信息以及部门信息，我们没查出来部门信息呢，哎，我们以前已经写好了查询方法了，所以说我先把这个部门信息的显示来定一下好，当时呢，有一个部门信息的查询方法在我们这儿，只不过呢，这个方法查出来的部门信息放在了添加表单的这个下拉列表中，呃，这个很烦，我们呢，放在哪个表单哪个元素中，我们传入这个元素，也就是说呢，调用这个方法的时候，比如呢，来，我们来要给哪里边放，我们把这个选择器传进来。

传进来好选择器传进来，传进来以后呢，来end to啊放到我们这个指定的元素中，那么接下来我们来调用这个方法。来调用这个方法好查出部门信息，我们要放在哪个元素呢？啊，我们现在是员工修改的，哎，这是员工修改的这表单中的，咱们这个下拉列表select里边，好我们来看啊，这一块先看正确刷新，好先看新增的下拉列表啊，没问题啊，编辑下拉列表也没问题，好我们来看啊，我再来点编辑也没问题，诶我们来看这个编辑，哎，我再来点编辑的时候，这个开发部，哎又出来了，又出来了，诶你看每次都这样，包括呢，我们的新增，我们来看有问题没？诶他这好像是不是。

多出来几次啊，哎，所以说呢，我们在这一块新增的时候，我们记得我们之前要写过一个逻辑，要先呢，把咱们这个下拉列表里边的数据清空，哎，查询所有部门信息，在这块的话，先要清空我们这个之前下拉。列表的值。哎，我记得我们之前是听过的，好，我们把它清空吧，直接点empty，要不然这个下拉列表S请求每次给里边openend内容，好我来刷新，来新增这一块呢，第一遍第二遍，好没问题啊，编辑应该也没问题，好没问题，走好我们这个呢，我们员工新增的对话框就弹出来了，那下一节课呢，把这个员工信息的显示我们做出来。