【JS】【列表移动】【基于JQuery】

思路:

• 通过两个列表(已有权限列表+未有权限列表)来操作员工的权限
• <select multiple="true">
• noList表示尚未拥有的权限,通过方法得到
• myList表示员工已经拥有的权限. 从数据库中得到

• allList表示全部权限.从数据库中得到

  Action代码

  访问对应url,请求转发到修改页面.传递参数noList,myList

//跳转到更改权限页面
public String changePermission() {
        //allList,myList是从数据库提取的全部权限和某员工的权限
        List<Permission> noList = this.noPermission(allList, myList);
        ActionContext cxt = ActionContext.getContext();
        cxt.put("noList", noList);
        cxt.put("myList", myList);
        return "TODO";
    }




//返回某员工没有的权限
    public List<Permission> noPermission(List<Permission> allList,List<Permission> myList){
        List<Permission> list=new ArrayList<>();
        for (Permission permission : allList) {
            if(!myList.contains(permission)) {
                list.add(permission);
            }
        }
        return list;
    }

html代码

使用struts2的标签
list=”列表对象” //直接写list对象
listKey=”option的id值” //直接写对象的属性
listValue=”option的文本值” //直接写对象的属性

<s:select size="10" id="noList" name="noList" list="#noList" listKey="id" listValue="name" multiple="true"/>
<s:select size="10" id="myList" name="myList" list="#myList" listKey="id" listValue="name" multiple="true"/>
<br/>
<button id="add" onclick="add();">右移</button>
<button id="del" onclick="del();">左移</button>
<button id="addAll" onclick="addAll();">全部右移</button>
<button id="delAll" onclick="delAll();">全部左移</button>

JS代码

//右移
var add=function(){
    //查询noList节点中被选中的option
    var selected=$("#noList option:selected");
    //将其变成myList节点的子类
    $("#myList").append(selected);
}
//左移
var del=function(){
    var selected=$("#myList option:selected");
    $("#noList").append(selected);
}
//全部左移
var delAll=function(){
    var selected=$("#myList option");
    $("#noList").append(selected);
}
//全部右移
var addAll=function(){
    var selected=$("#noList option");
    $("#myList").append(selected);
}