42 - 尚硅谷-RBAC权限实战-用户维护 - 分配角色 - 左右列表数据移动.avi原创

用户功能我们做完了，角色功能要求同学们自己下来做，所以我们接下来准备把用户和角色之间的关系给他建立好。呃，事先呢，我在数据库当中，我们建立了两张表，一个是角色的表，我把数据也准备好了，它里面ID自增长。还有name属性啊，很简单，就是一个name字段，那么还有一张表呢，是关系表，这个关系表呢，是我们用户和角色之间的关系，形成一个多对多，里面是UID，还有ID。那我们如何来建立他们的关系呢？是这样，在我们用户页面当中有一个绿色按钮，我们之前没有提到过，那么这个绿色按钮当你点击之后，它会跳转到一个分配角色的页面，也就意味着它会给某一个用户来分配角色。而我们页面当中会有左右的两个列表，那么左边是未分配的角色列表，右边是已分配的角色列表。默认情况下，我们第一回分配的时候，左边全部的角色都会显示出来，因为你从来没有分配过，右边不可能有数据，那么左边是全部的角色。然后当我点击左边列表的元素时，我点击右键头，它会把左边元素移动到右边的列表中，同样当我点击右边列表的元素时，点击左箭头，它会移动到左边列表当中，形成了一个元素的左右。列表的移。

动，那么这种移动就会在我们的后台数据库当中来增加数据或删除数据，来形成用户和角色之间的关系。那接下来我们就一块儿把这个功能我们做一下，首先我们先把页面中的这种移动效果先把它做出来。呃，首先是这样啊，我们找到我们绿色的按钮，这个绿色的按钮呢，应该在我们的这个位置，当我点击它，我写上啊，On click，然后等于。

够啊，我们要跳转到一个分配的页面，然后你得告诉我是哪一个啊，所以我们写上嗯，有点ID，然后把这个方法咱们拷贝到下面来。我们要跳转页面了，嗯，就放到这吧，Function，好，然后ID，那么接下来把这个路径给它拷贝一下。这个就是我们的分配啊，然后给个DD呢，就是当前用户的D，好写完之后，那么在我的后台程序当中，我要跳转页面了啊，User controller，我要找到那个I啊，在这个位置拷贝他们很像啊，嗯。好，然后呢，我们写上啊来，然后这是我们的它，然后呢，ID我们去保存U，把当前的用户查询是没有错误的，然后接下来把这个改一下，到我们的分配页面啊好，那么到了分配页面以后，那接下来我们要做的事情呢，是把页面的。

元素咱们准备好，那我接下来我把这个页面呢，给它来点击new创建一下。咱们就叫分配啊，点GSP，然后间括号百分号page啊page in Co等于UTF杠八，嗯，好，写完之后把我们刚才的页面呢给它来准备一下我们的分配角色的页面来分配角色在我们这个位置，咱们打开。打开之后把里面的内容原封不动拷贝过来。好了，呃，接下来把一些必要的内容给它变一变，UTF，杠八，还有我们的路径。

呃，接下来把我们这边给他来写上APP pass，然后斜杠啊，然后呢，我们这边来拷贝，拷贝以后放到这边啊，然后呢，接下来放到这边啊，然后呢，我们再来往下走，往下走放到这个位置，把它放到这个位置好可以了，那么这样的话呢，我们页面就准备好了，只要跳过去就可以了，但是呢，我们刚才说过了，我们现在不仅仅跳过去，你第一回分配的时候，应该在左边的列表中把所有的元素，所有的角色给它显示出来，所以我们这里在跳转的时候啊，还应该把所有的角色给它拿到，那么角色呢，我们这边有啊，所以来我写上叫叫roll service啊，如果咱们同学没有把这个功能实现的话，你得自己把这些对象给它创建出来啊，好to，嗯。

好了，这个role service呢，我们在这个位置，我们就准备给它来写上一下了啊，然后点我们叫QUE2，咱们查询所有，那么查询所有的话，那我们就得到我们的Rose啊好，然后给它放到model当中点增加，然后写上啊，咱们叫Rose加个S，然后呢叫做Rose，嗯，好了，写完之后，那么我们现在这个角色就有了啊，只不过方法还不存在，给他增加上点击。呃，接下来我们再来把这个呢给它来实现一下，点一下增加，增加以后来我们的roll到点que，嗯，然后把这个呢，我们去掉，去掉以后点击一下，然后呢，Create，嗯，好，那这个是比较简单的一个数据库查询了，所以select，然后写上select from t下划线，把所有的角色给它拿到啊拿到以后，那这个时候我跳转页面的时候，我就应该把我查询到的数据给它展现出来，所以我要循环遍历。

好C，嗯，把C标签引入进来，引入进来以后，我们这边会有左边的一个列表，这个列表呢，我们应该给它动态的循环。啊for each，然后这里我们来写上，我们叫做嗯，A好，我们写上Rose，然后每一个元素我们就叫肉就可以了啊，然后把这个呢，我们给它拷贝进去，拷贝进去以后它的value其实就是它选择的那个元素啊，啊就是那个组键词了，肉点ID，那这个就是它的名称啊，我们叫roll点内，嗯，行了啊这么写完以后基本上就可以了，那但是呢，我们这边就暂时不需要了啊好行。

呃，写完了以后啊，接下来我们要做的就是把页面呢，给它展现一下，我们看一看实际的效果了，好给它停掉，然后重新启动。好了，启动完了，那我们现在呢，就可以来看一看了，我们来刷新。呃，接下来给我们的用户点击绿色按钮，点点完之后跳转到我们页面当中，那这是没有问题的啊啊，只不过这个效果感觉不是很好，因为感觉它有点太窄了，但是数据呢，确实都出来了，那这个呢，我们稍微的就改一改啊，因为它的宽度比较窄一些，所以给它来改200，那我们这边改成200的话，我们这边也要改成200啊好了，行，那我们现在啊，基本上就算是写完了，接下来我们刚才说过了，我们要点击我们的元素，然后点击右键头，把它移动到我们右边的列表中，然后如果右边有数据的话，我们点击之后，再点击左箭头移动到左边列表当中，要有一个左右移动的效果，那接下来我们把两个按钮给它增加我们的ID属性，增加点击事件。

这两个按钮呢，一个是right，一个是我们的left啊，所以呢，我们在这里写上ID，我们就叫做left to right button啊左边向右边的一个按钮，然后ID，它是我们的right，好，To，我们left button，那有这么一个按钮，好，Left to right button，在我们这里呢，给它来写上啊，嗯，当页面内容加载完成之后，来我们写上，嗯，好，第二我们的C，那么增加以后啊，这个回调方法，我点击之后我要干什么呢？首先我要判断一下我左边的列表，我到底选没选择元素，也就意味着我要把左边的列表得到，并且看看它有没有选中的元素，所以啊，在这个时候我们要给左边的列表增加一个ID的属性啊，咱们叫做left list，那同样道理，那我们右边的列。

表呢，我们ID那就写上叫right list啊，一个左边列表，一个右边列表，那么现在我们去写的话，我就得这么写了，Dollar符，然后井号叫left list，冒号selected，表述的是左边的列表有没有选中的，所以来我们这么写啊，好写完以后，那我这里的判断了叫if啊，咱们这里叫if，嗯，那么我写上opts，点它的长度，它的长度它如果等于零，等于零说明你根本就没有选择任何的元素，那你点按钮其实是没有意义的，那我们得提示一下了，所以打开把那个弹成的组件，我们给他来拷贝过来啊，嗯。

呃，在这个位置好拷贝，拷贝以后拿到我们这里好，然后拿完了以后，那我们说了有问题我得提示一下呀，所以拷贝。拷贝以后我放到这个位置就可以了啊，行，我们就写上啊，嗯，请选择吧，请选择需要需要分配的角色数据，就是那个角色数据啊，我们的选择一下是吧，你不选你那就没有意义了，然后呢，Else，那你不等于零，那你不等于零，那就说明啊，你要把这个元素呢，放到我右边去就很简单了，所以Dollar符，然后呢，我们的井号叫right list，然后把这个给它放进去，第二因为我们把它放到右边的时候，右边的元素是不清空的，那我们直接追加就可以了，所以直接opts啊，效果就有了，那同样道理啊，你能把这个左向右移动，咱们做好，那么其实我们右向左也没有问题，就是改改方向的问题了，所以right to left，嗯，好，那么。

肯定是我右边的元素，我们需要判断，判断以后写上，请选择需要取消分配啊，取消分配的角色数据，然后我们的left啊左边列表增加数据，诶我把页面效果呢就做完了，好，我们试一试刷新。刷新以后，我们现在就选择项目经理，然后点击向右的箭头，点大家可以看到没有问题，移动过来了，好我再点，诶也过来了，那如果我再点左箭头呢，点你会发现没问题，再点也回来了，这就说明啊，我们把这个左右移动的效果做完了。