两个取舍框，左右互选添加

两个选择框，左右互选添加
触发事件的方法：编辑用户组成员

function editGroupUser(id) {
	$
			.ajax( {
				type : "POST",
				url : "/group/groupUserquery.json",
				dataType : "json",
				data : "id=" + id,
				success : function(data) {


					/**
					 * 这个组已经存在的成员
					 */
					var gxHtml = "<select name='myGroupUser'  border='1'  multiple  style='width:200px;height:285px;' >";
					$.each(data.alreadylinkUser, function(i, noCo) {
						gxHtml += "<option value=" + noCo.userId + ">"
								+ noCo.userName + "</option>";
					});
					gxHtml += "</select>";
					$("#myGroupUsers").html(gxHtml);

					/**
					 * 还没有分组的成员
					 */
					var wgxHtml = "<select name='noGroupUser'  border='1'  multiple  style='width:200px;height:285px; ' >";
					$.each(data.noLinkUser, function(i, noCo) {
						wgxHtml += "<option value=" + noCo.userId + ">"
								+ noCo.userName + "</option>";
					});
					wgxHtml += "</select>";
					$("#noGroupUsers").html(wgxHtml);
					
					$("#myGroupName").text(data.group.groupName);
					$("#myGroupId").val(data.group.id);
										
					$("#dialog_form_editGroupUser").dialog("open");

				},
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					alert("错误状态：" + textStatus + "\n错误信息：" + errorThrown);
				}
			});

}

jsp代码：

<div id ="dialog_form_editGroupUser" style="display: none;">
<form>
<table>
        <tr>
			<td height="33" align="right" width="250"><b>用户组名称：</b></td>
			<td id="myGroupName"></td>
			<td  ><input id="myGroupId" type="hidden" value=""/></td>
		</tr>
</table>
<table border="0" width="100%">
	<thead border="1">
		<tr>
			<td  height="25" style="padding-left: 40px" align="left">没有分组成员：</td>
			<td width="70"></td>
			<td height="25" align="left" >此用户组已存在的成员：</td>
		</tr>
	</thead>
		
	<tbody border="1">
		<tr>
			<td id="noGroupUsers" style="padding-left: 40px"></td>
			<td width="100px" height="285px" align="center" valign="middle">
				<table>
				<tr>
					<td width="40" align="center"><input type="button" value=">>" onclick="addItem(this.form);"></td>
				</tr>
				<tr>
					<td width="40" align="center"><input type="button" value="<<" onclick="subItem(this.form)">
					</td>
				</tr>
				<tr>
					<td width="40" align="center"><input type="button" value="ALL>>"  onclick="addAllItem(this.form)">
					</td>
				</tr>
				<tr>
					<td width="40" align="center"><input type="button" value="<<ALL"  onclick="subAllItem(this.form)">
					</td>
				</tr>
				</table>
			</td>
		    <td id="myGroupUsers" width="40%"></td>
		</tr>
	</tbody>
   </table>	
   <table>
	<tr height="5"></tr>

	</table>
</form>
</div>

点击箭头触发事件，js代码：

/**
 * 添加到此用户组中
 * 
 * @param objForm
 */
function addItem(objForm) {
	var valueAry = new Array();
	var textAry = new Array();
	var groupElement = objForm.elements["myGroupId"];
	var leftElement = objForm.elements["noGroupUser"];
	var rightElement = objForm.elements["myGroupUser"];
	var count = 0;
	var i, j;
	for (i = leftElement.options.length-1; i >= 0 ; i--) {
		if (leftElement.options[i].selected) {
			valueAry[count] = leftElement.options[i].value;
			textAry[count] = leftElement.options[i].text;
			 addMyGroupUser(leftElement.options[i].value,
					 groupElement.value);
			 leftElement.options[i] = null;
			count++;
		}
	}
	var count1 = rightElement.options.length;
	count1 = count1 > 0 ? count1 : 0;
	for (j = 0; j < count; j++) {
		rightElement.options[count1] = new Option(textAry[j], valueAry[j]);
		count1++;
	}
}

/**
 * 添加操作
 * 
 * @param userId
 * @param companyId
 */
function addMyGroupUser(userId, groupId) {
	$.ajax({
		type : "POST",
		url : "/group/addGroupUser.json",
		dataType : "json",
		data : "userId=" + userId + "&groupId=" + groupId + "&roleId=2" ,
		success : function(data) {
		},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			alert("错误状态：" + textStatus + "\n错误信息：" + errorThrown);
		}
	});
}

/**
 * 删除此成员
 */
function subItem(objForm) {
	var valueAry = new Array();
	var textAry = new Array();
	var groupElement = objForm.elements["myGroupId"];
	var leftElement = objForm.elements["noGroupUser"];
	var rightElement = objForm.elements["myGroupUser"];
	var count = 0;
	var i, j;
	for (i = rightElement.options.length-1; i >=0 ; i--) {
		if (rightElement.options[i].selected) {
			valueAry[count] = rightElement.options[i].value;
			textAry[count] = rightElement.options[i].text;
			deleteMyGroupUser(rightElement.options[i].value,
					 groupElement.value);
			 rightElement.options[i] = null;
			 count++;
		}
	}
	var count1 = leftElement.options.length;
	count1 = count1 > 0 ? count1 : 0;
	for (j = 0; j < count; j++) {
		leftElement.options[count1] = new Option(textAry[j], valueAry[j]);
		count1++;
	}
}

/**
 * 删除所有
 * 
 * @param objForm
 */
function subAllItem(objForm) {
	var i;
	var rightElement = objForm.elements["myGroupUser"];
	for (i = 0; i < rightElement.options.length; i++) {
		rightElement.options[i].selected = true;
	}
	subItem(objForm);
}

/**
 * 添加所有
 * 
 * @param objForm
 */
function addAllItem(objForm) {
	var i;
	var leftElement = objForm.elements["noGroupUser"];
	for (i = 0; i < leftElement.options.length; i++) {
		leftElement.options[i].selected = true;
	}
	addItem(objForm);
}

两个取舍框，左右互选添加

相关推荐