00:00
好了,下边我们接着做这个。角色维护呢?看看下一步我们该做什么了哈。呃,在这个这其实有一个小小的这个这个去完善它一下哈。我们现在呢,其实已经登录已经超时了,我们这儿如果去点一下的话呢。这边会提示我们登录以后再访问。那么这个时候当然肯定是拿不到数据的。拿不到数据的时候呢,下下边儿这儿还是能够显示这个导航条。呃,那么我们觉得如果更合理一点的话,这应该不显示这个导航条。哎,那么如何让它不显示这个导航条。嗯,那么我们可以去干这个哈。这不配着的是吗?这是一个做一个小小的修正哈。呃,就在这个t body清空的时候,我们让他呢也跟着清空一下。
01:06
哎,我们把这个事儿做了就就好了。啊,这边得重新登录以后再访问。角色维护。啊,这边你看就没有搜索结果的时候,就没有这个导航条啊。如果是有这个速度,结果就有导航条。这个做一个小小的修正哈。我们把这个这这这个。这也注释一下啊。这里清空。啊,是为了让没有搜索结果时。也就是不显示。页码。导航条。这不是什么太大的问题啊,这个只是我们捎带着去说一下。
02:02
啊,这是这个,这是关键词搜索。再往前。在这。那么下一步呢,我们看一下啊。这个页面。我们等于说这个做了,这个做了,这个做了啊下边的话咱们看一下。比如说咱们看一下这个吧啊。其实这个时候先做哪个后做哪个吧。这个影响不大啊,先做哪个后做哪个影响不大。嗯,咱们先咱们做一下这个新增的这个。我们现在呢,是希望如果全部用Ajax来做的话,我们希望点这个新增的时候呢,不要跳转到一个另外一个页面,我们就在当前这个页面。这个浮浮动。一层啊,上面有一层覆盖这么一个好像是小的窗口似的,然后呢,来显示这个表单。
03:01
那么这个东西呢,就可以借助于bootstrap。我们用这个。模态框的形式来做,又坏了,没有网啊。我想啊。我自己开吧。哎。用你们的,多不好意思。因为这个我们还是看一下比较好。
04:12
然后,然后我们看一下这个boop。啊,我们重重新开一下啊。这个模态框在javascript的插件这里边。然后呢,看一下啊模态框。这个模态框它长什么样子呢?哎,大概是这个这个这个这样一个样子。大概是这样的。Model model。然后呢,上边这个它分这么几个部分,这是模态框的标题,这是它的主体内容啊,这个在下边呢,你可以再加几个按钮。啊,或者说这个这个你也可以灵活的去去,嗯,你自己灵活的去调整啊都可以。这有个叉叉,点叉可以关掉,点这个也可以关掉。
05:02
然后呢,他在这儿用的就是这一组HL的标签。这一组HR标签呢,这个当然这是一个,这是从这开始是一整个的模态框。然后呢?这是个海哈。哎,这是它的头部,然后呢,标题是写在这儿,这是它的主体,这是它的这个foot啊,哎,头。身体脚啊,分成这么几个部分。我们把这个拿过来,CTRLC到我们的页面里边。我们得看一下这个模态框它长得什么样子哈。呃,在这个web info下边,咱们创建一个JSP。啊,我们这个东西呢,也是让他去包含到我们这个页面上。
06:00
Model。哎,后边因为还会有很多模态框啊,所以这是一个角色的一个添加的模态框。我们复制的东西呢,放在这里边。把它这个注释呢,我觉得没有什么用哈,去掉。Title这改一下。这改成我们说这个,嗯,上筹网啊。系统CTRL。后边咱们就都可以都用这一个title title。在这个包里边呢,显示一个表单。这个表单呢,不是要提交这个表单,而是说我们就是去这个叫。以表单的形式呢,显示说看上去是个表单,但其实呢,并不是,将来并不会要提交这个表单,我们在这儿呢,显示一下这个input。这样我们为了好看一点呢,咱们把这个登录的表单给拿过来。
07:02
Control c。这样的话,这是符合它的样式的。这个action就不用了,Method也不用啊,只是就是要要一下他的class。呃,这个这个也不用了啊,这个这个标题也不用了,包括这个显示异常消息,这个也不用。呃,这些这些是会影响到它的样式的。这个name呢,我们给它改成叫做肉内。然后下边这个东西就不用了哈,因为这角色这儿我们就是有来一个就行了。角色就指定一下角色的名称就能创建了。呃,然后把这改一下,请输入角色的名称。嗯,后边这两个按钮哈。
08:01
因为这个模态框呢,点这个叉叉本来就能够把它给关掉。所以说呢,我们现在就没必要。没必要说另外整一个按钮哈,我们就留一个就行了啊,咱们就留这个save这个就行了。这这个字呢,我们去改一下,改成这个保存。呃,点它我们去把。把这个值给拿到。看后边这个是什么啊。啊,这是一个,这也是这是一个图标啊,这个这个我们这儿就不需要这个图标了。把这个去掉。我们这个模态框准备好了,那么我们这个时候需要说再点。点这个新增的时候,把这个模态框呢给打开。那么我们首先呢,需要把这个模态框的页面呢,把它加到我们肉配这。我们统一呢,这些模态框呢,都加到页面最后,因为模态框呢,默认是不显示的啊,刚加进来它是隐藏的。
09:08
所以说其实这个加哪儿都行啊,我们就都统一的放到这个最后。Include。呃,在外包下边。找到model a。然后呢,给这个新增按钮哈。给他绑定一个单机小函数。这个按钮呢,点它打开模态框,我们叫做受。Model。Butter。哎,说爱的猫啊。C。点击新增按钮。打开。呃,模特块。
10:00
什么声音?这是?手机的问题哈。手机有点手机它会对这个电池这信号有点干扰。嗯,哎,那么这个模态框怎么把它打开呢。哎,我们看一下这哈,看往下下边去找一下。嗯,找一下它有这个函,呃,方法这。嗯,说model,诶将页面中模块内容作为模态框激活。啊,这个这个不需要他这么复杂啊,就是手动打开模态框。先用这个找到模态框。解块选择器定位到模态框,调一个model,这个函数里边受一下显示。看一下我们这个。模态框的ID哈。我们给它设置一个ID,就最外边这个div啊,给他设一个ID。
11:07
哎,这个叫做爱的model。然后呢?Control c。然后点modal。行,咱们看一下这个效果哈。不对,不是这个哈。跑了。这个跑是咋回事呢?我们看一下这个按钮哈。这个新增的这个按钮。是个啊对,他这有个on click。把这玩意去掉哈,他这个有点干扰。嗯,把它那个自己自带的那个跳转给他去掉。
12:02
回来。再刷新一下哈。这就是这个模态框呢,就是这么一个效果。这怎么有字呢?这个字呢,是这么来的哈。嗯,是我们把这个复制过来,这有个Y6等于com把这个去掉。哎,这告诉你说,请输入角色的名称。这这儿本来其实已经有提示了啊,咱们前面其实就不用写这个字了。你这输完了以后,这点保存,就执行这个保存。我们想采取这样一种模式啊。嗯,有了这个的话,咱们这个思路这哈,咱们就可以方便咱们去画这个图了哈。角色。呃,保存操作。呃,这样的方式用模态框呢,代替我们要去的另外一个页面啊。
13:01
诶通呃,通过在打开的模态框中输入。哎,输入这个角色。执行对。新角色的保存。这是我们的目标。这个,然后这个思路是什么。哎,思路咱们一般通过画图的方式啊。这个新增,这点点新增。呃,点它,然后呢,弹出模态框。你看你弹出模态框以后呢,其他地方呢,就暗下来了。啊,那么这个地方还是就亮度比较高,就让你集中精力就看这啊,就是有一种这就有一种叫什么遮罩的一种效果,哎。
14:05
当然你点别的地方也能把它关掉。这是我们模态框的这样一个效果。点它呢,打开这个茅台泡。那当然得给这个新增呢绑定单机显函数。绑定单小数,在这个单机小函数里边呢,做了一个操作,就是我们刚写的。呃,这个代码哈。用这个把模态框打开。那完了,模态框的H毛的这个标签呢,是我们包含的形式引入进来的。嗯。这个最下边这include。
15:10
这是我们说包含的这个模态框的这个。
17:00
诶拿到这个数据,然后呢,我们去这个。拿到这个数据以后。发送Ajax请求。发送Ajax请求,然后我想想啊。执行保存,执行角色的保存。因为角色就就肉内这一个字段啊,把它保存了就行了。那么这个保存呢,这个保存操作这一步完事以后。呃,还有一些个后续的操作哈,还会有一些个后续的操作。嗯,这个后续的操作是什么呢。我们这个模态框呢,就没必要在这儿保存保留着了,这个模态框呢,就可以把模态,呃,可以把它给关掉。后续操作是这样的。
18:00
呃,关闭茅台框。然后呢,显示一下操作的结果是成功还是失败。啊,这个显示一下。还有呢,把这个模态框给它清理一下。那么说为什么要清理一下这个茅台框啊,这个也很好理解。因为你想这个上一个用户呢,他在这儿,他比如说呢,他要保存一个角色啊叫做。人力主管哈,假设。他把这个这个这个值填到这儿点保存,或者说把这个关掉哈。你下次再打开这个,上一次填的这个还在。对于下一次操作呢,有一点不太友好。啊,举个举个有点那什么的例子,你上卫生间呢,你进去那个以后,你发现有上一个人留下的痕迹是吧。
19:05
所以说。你肯定就很很不愉快是吧。你所以说每次走的时候呢,你给人清理掉对吧?哎,每次你给人清理掉啊,然后下一次打开以候呢,是这个初始的状态啊,需要做这么一个操作。哎,还有一个事儿,还有一个操作呢,就是你得把这个你得让人家操作完了,在页面上能够看出来。所以说要重新加载一下分页啊。重新加载一下分页。哎,行了啊,就是这些操作是我们要做的。为了大家看的清楚一点哈,我们把这些。去填充一个背景。哎哟,我去。这个字怎么变成啊,字变成白的了,我去。
20:01
不是是这个哈。啊,是这么样这么样这么样。这是我们的一个思路哈。哎,下边咱们一步一步咱们去考虑这个去实现一下。我要不要给他们再?加个边框会不会好一些?这样会好一些哈。
我来说两句