20、尚硅谷_SSM高级整合_新增_创建员工新增的模态框.avi原创

好。我们刚才呢，把咱们这个员工的分页查询哎，做完了，我是做了一个AJS版的，那我们呢，以后就用AJS版来写完我们整个c rud，就呢，页面的跳转我们就不用了，那行，接下来呢，我们就来做一个新增，那么这个新增功能呢，就像我们之前写好的这个项目示例一样，首先点击新增会弹出我们这个员工新增的这个对话框，当我们把这些数据输好，包括我们这个部门信息，你看啊，我这儿没显示部门信息呢，应该是从数据库里边查出来有多少个就显示出来，然后呢，我们填写数据，点击保存就完成了咱们这新增要求。好，这是我们新增的，咱们这个逻辑，我把它出来图。那么接下来来做咱们这个新增。新增的效果呢，就是我们做成这个样子，那么呢，我们来说一下咱们这个新增的逻辑。

新增。新增呢，我们这个逻辑，哎，非常简单，还是在我们这个页面，首先在咱们这个index.jsp页面，点击咱们这个新增。点击新增按钮以后呢，我们接下来会弹出啊，弹出咱们这个新增对话框。咱们这个新增对话框弹出来以后呢，接下来我们来，哎，应该去咱们这个数据库。查询咱们这个部门列表。为什么要查这个部门列表呢？因为新增对话框里边这些部门信息啊，是数据库里来的，所以说呢，把这个部门列表查出来，显示在咱们这个对话框里。对话框。中，然后呢，我们，哎，最后我们来用户输入数据完成保存。

诶大致呢，就是这么一个逻辑，好，那我们呢，就先来把inex页面弹出的这个对话框做出来，那么这个对话框呢，其实就是我们script，哎，咱们这里边有一个好返回顶部javascript插件里边呢，有一个模态。这个模态框呢，我们来看它有一个示例，就是咱们这个弹出框，而这个示例呢，哎，它说点击下面的按钮可以启动一个模态框，点诶这个对话框就弹出来了，还有咱们这个关闭以及保存这些按钮，那我们分析这个对话框前面呢，定义了一个button，诶就是它这个button的内容，诶就在这儿，而这个button呢，我们在页面上已经有了，就是我们这个新增button，我点击它应该弹出对话框，那我们来看这是八痕按钮下边呢model，诶整个这个大div就是我们模态框，那么呢，这两个的关系就是哎，八痕按钮有一个data to model，诶这个属性，也就是说呢，啊，我们呢这个八层按钮，它会呢触发一个模态框的启动，启动哪个模态框呢？在data target里边来井号模态框的ID，诶跟这一块进行关联，那么点这个按钮就会打开这个模态框。

而我们呢，不让它这个自动打开，我们应该是调用GS，调用GS代码的方式，那么这一块呢，也提供了这个用法，诶，比如呢，我们可以通过巴特按钮的这两个属性让它自动打开，也可以通过调用咱们这个JS代码，也非常简单，传入咱们这个模特框的ID，调用点model方法啊，传入我们模态框打打开时的一些设置，而这些可用的设置都在下边，那么就能打开模态框，比如呢，我们来看这些设置啊，Bank drop，我们这个背景删除是可以传true false或者字符串的static。如果我们指定了static，它的意思呢，就是不会关闭我们这个模态框，当我们点击模态框背景以后，而我们现在呢，它是点击模态框背景啊，其他位置也都会关闭好，我把这个模态框呢，我就拿过来。

放在页面我们先做，点击新增按钮，打开模态框。好，来到我们这个，呃，应对此页面，我们把模态框的数据放在页面的首部。好，这个呢，我们就把它当做是员工添加的。添加添加。咱们这个模态框。而这个模特框呢，我们给一个ID，就叫EP model。好，我们这个模态框呢，我们希望的方式是我们点击咱们这个新增按钮，我们来看啊，在我们这个页面上有一个这个新增按钮。ID这个按钮呢，我们就叫EP，咱们这个model。

的咱们这个八层按钮。好，我们来点击这个按钮，我们应该打开我们这个新增的咱们这个模态框，好，员工添加的模态框，我们在这儿绑事件。帮事件。好。井号这个按钮的ID，我们给它绑一个单击事件，当事件触发以后，哎，我们给一个回调函数。当事件触发以后呢，我们手动的打开模态框，模态框呢打开代码，哎，调用model方法就行了，传一些参数。到了福好，我们这个模态框的ID是emp员工添加的模态框，我调用他的model方法来，我们也给他传一些能设置的属性。啊，比如呢，我们就把这个背景删除啊，这有一个背景删除，我们不让它删除，点击背景不删除。

好，那传入咱们这个static字符串。我们来看一下现在的页面启动。好，我们来到员工列表，我们来看现在页面点击新增，有没有咱们这个效果，我来刷新。好，让我们服务器启动完成，好，稍等我们来到页面点击新增，诶，模态框弹出了，点击背景也不会消失，那接下来我们就把这个模态框的这个样子定义出来，好把它关掉。对，现在的模态框呢，都是标题以及按钮以及内容，这些我们都需要自己定义好，来到我们这个模态框。来到模态框，员工添加模态框，首先这个标题，哎，Model title，我们把它呢改成哎，咱们这个员工。添加。好，员工添加接下来呢，咱们这个模特框里边的内容就是我们这个添加表单，我们可以来看一下，诶包里边现在是省略号，我们把这个表单写过来，而这个表单呢，我们这个样式也可以参照bootri中啊，我们来看它的这个全局CSS样式。

哎，它是如何定义表单。走。表单，哎，这种样子呢，哎，我们就不要了，我们要的是我们这个视力的啊，横排排列的这个表单，好我们来找一下。内联表单啊，水平排列的就是它，所以说呢，我们来看啊，写一个form表单，它的class，哎，就是这个都是人家指定的，所以说我把这个表单。拿过来。拿过来放在咱们这个玻璃体中。这个表单。好表单我们就拿过来了，拿过来了以后呢，我们把该改的一改。第一个我们要显示的它，这还是email，我们要显示员工的名字，EP。好，我们大致的来看一下这个表单啊，它这个什么level for，比如说呢，我们每一个input，好这有一个input，它的这个类型就是一个输入的文本框ID啊，比如呢，我们就叫ERP。

耐的咱们这个input。EP name，咱们这个添加的，咱们这个音的好，Plus hold EP name好。它填充的这个label for呢，就是指定我们这个label是为了我们哪个啊输入框的，把这个ID指定过来。当然其实不止这个也可以啊，就是为了呢，我们好看期见好我就不指定了，那么接下来呢，我们来看啊，这个form表单里边，诶，每一个div它的class都叫form group，哎，我们表单的一个组啊，组里边呢，有我们这个表单项的，咱们这个提示信息，加上咱们这个表单项的input都在这儿，提示信息占两列，Input占十列，其他的啊，效果都一样。我把这个CTRLC都拿过来。

那么呢，我们接下来第二项就是我们这个我们来看啊，员工添加的一。员工添加的email email呢，我们这还是输入框ID，我们就叫email。Email好。它是一个添加的and input，好，Plans hold，我觉得。啊，给一个示例，比如呢，Email at硅谷。点。com好，这是一个事例，好，接下来呢，我们再来看下边这还有按钮这些的我们就删掉了。啊，按钮这两个呢，都是按钮，还有一个提交按。这个按钮还有一个咱们这个表单上的这个提交按钮都删掉好，这里边呢有epm email，那么呢，自然还有我们这个真的这个性别。性别我们来写一个真的真的呢，它是一个咱们这个单选按钮，我们来看啊，咱们表单项里边输入框文本框，哎，这有单选的，哎，单选呢，咱们这一块是横排的，我就用这个div。

内联单选我们用这个啊，内联单选好radio。他是这么来写的。那么呢，我们来看啊，这个真的，那么这个单选框的内容好内容呢，我们就放在这里边。好，Label label呢，这是一个内。那么我们先放在这ID，就是我们这个真的。比如呢，我们这个真的它一个and input。哎，整点一整点二。两个蒸的。给每一个真的这个单选，我们来给一个ID。啊，Y6尺。比如呢，我们第一个是南Y6，我们提交的是MF，所以说呢，我这儿写一个。

啊，男就是M，而我们这个女就是F。好嗯，好，我们这个表单提交我看啊，我们这个好像都没定义内，我们把这个name定义一下。也就说呢，为了我们啊，咱们这个spring mvc封装方便我们知道提交的数据，它能自动的为我们封装employee对象，唯一的要求就是表单项的这些个内幕跟我们这个。跟我们的咱们这个招聘的咱们这个属性名一样，所以说呢，我们这个EP name，我们提交的员工姓名，我们的这个name也叫EP内提交的员工的email。好，我们呢，也叫email。跟咱们这个Java b属性来在这儿来看啊，跟Java b属性这些都对应起来，还有这个真的。来到这儿。好，还有他要提交的这个真的真的呢，它的name就是真的。

提交的值。啊，男就是M，女就是F，那么呢，我们真的定义完了，我们再定义一个form group，诶这个形式都不一样，每一个表单元素我们都定义在form group里边来宝石提示信息，那么这个DIV10列的这个div里边才是我们这个输入框这些内容。好，还有我们这个部门名，第1PT内部门名呢，我们是一个下拉列表，好，我把这个删掉，我们来看在我们这里边如何定义下拉列表，下拉列表诶就是它select form。Control。他拿过来就行了。而我们下拉列表里边的每一个下拉项，哎，这不是我们写死的，因为我们这个部门啊，可能每天都在变化，今天呢啊，这个开发部，测试部，明天又多了一个，比如运营部，所以说呢，我们这个部门信息应该都是从数据库查出来的。查出来，我们来构建这个，好，我把这些都删掉，那么他提交的这个name来。

我们来说啊，员工保存呢，我们这个提交哎部门ID就行了，因为我们这个数据库里边有一个部门ID保存它，所以说呢，我们提交的name还是did。那么每一项就应该我们查出来再构建。那么这个部门。部门。部门提交咱们这个部门ID。即可，好，那么呢，我们这个表单的，咱们这个模态框定义，我们来看一下。哎，定义完了以后，来我来刷新好点新增好这一块的东西也就有了，好我们这个男女呢，给他默认让男选中。啊，这个难呢。如果不选，那默认呢，就是一个选中状态。把这个加上，这个加上以后呢，好，我们这一块啊，可以再优化这个下拉列表有点长，我们让它显示短一点。

那么这个两列啊，十列，我们给它变成四列。啊，这个短一点能好看一点啊。那这404老呢？我们就只能再来重启服务器了，经常这样。啊。来重启服务器。好，我们来刷新。好，我点新增，诶这个对话框就弹出来了，那我们这个啊员工列表，诶不是员工列表，是部门列表，我们一会儿显示就行，那么接下来这两个按钮，一个close，一个save，我们把这两个按钮。他这叫close。我们来显示成中文的。要关闭。关闭这个呢，Save，我们就是保存。那么呢，我们这个这弹好了。

那么呢，接下来就是在对话框里边啊，输入我们啊该有的这些内容，然后我们点击保存去保存数据就行，我们下一节课来把这个数据保存做出来。