其中htm代码如下:
<form action="" >
<div class="roleCheckbox">
<span>角色:</span>
<label for="checkBox"><input type="checkbox" class="checkAll" (click)="checkAll()">全选</label>
<label for="checkBox"><input type="checkbox" class="discheckAll" (click)="discheckAll()"> 全否</label>
</div>
<div class="roleAssignment_parts">
<div class="role_parts">角色分配:</div>
<select name="" id="sel1" multiple="multiple" >
<option value={{item.id}} *ngFor="let item of notMaRoleData" status="item.id">{{item.roleName}}</option>
</select>
<div class="ctr-Btn">
<input type="button" value=">>>" class="fl contrl_btn1">
<input type="button" value=">" class="fl contrl_btn2" (click)="Toright()">
<input type="button" value="<<<" class="fl contrl_btn3">
<input type="button" value="<" class="fl contrl_btn4" (click)="Toleft()">
</div>
<select name="item" id="sel2" multiple="multiple">
<option value={{item.id}} *ngFor="let item of maRoleData" status="item.id">{{item.roleName}}</option>
</select>
</div>
<div class="setUserOperate">
<button class="pressBtn btn-save" (click)="save()" >保存</button>
<button class="pressBtn btn-back" (click)="cancel()">取消</button>
</div>
</form>
ts代码,其中引用了jquery
// 单个>点击右移
Toright(){
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
var optArr = sel1.children;
for(var i=optArr.length-1;i>=0;i--){
if(optArr[i]["selected"]==true){
optArr[i]["selected"]=false;
sel2.appendChild(optArr[i]);
}
}
}
// 单个< 左移
Toleft(){
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
var optArr = sel2.children;
for(var i=optArr.length-1;i>=0;i--){
if(optArr[i]["selected"]==true){
optArr[i]["selected"]=false;
sel1.appendChild(optArr[i]);
}
}
}
建立一个新的数组,把所有需要提交的数据放到一个数组中,再转化成后台需要的数据格式。
在两个option之间有<和<<是一个或者多个向左移动,>和>>是一个或者多个向右移动,代码如下:
// 角色分配
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
// 全部向右转移
$(".ctr-Btn .contrl_btn1").click(function () {
var optArr = sel1.children;
for(var i=0;i<optArr.length;){
sel2.appendChild(optArr[i]);
}
})
// 全部向左转移
$(".ctr-Btn .contrl_btn3").click(function () {
var optArr = sel2.children;
for(var i=0;i<optArr.length;){
sel1.appendChild(optArr[i]);
}
})
上方可以设置两个按钮,进行全选全否设置,代码如下:
// 全选
checkAll(){
$(".checkAll").prop("checked",'checked');
$('#sel1 option').prop("selected",'selected');
$(".discheckAll").prop("checked",'');
}
// 全否选
discheckAll(){
$(".discheckAll").prop("checked",'checked');
$('#sel1 option').prop("selected",'');
$(".checkAll").prop("checked",'');
}