类似QQ的好友移动功能

最新推荐文章于 2022-02-11 06:19:21 发布

懒惰的萝卜丿

最新推荐文章于 2022-02-11 06:19:21 发布

阅读量1.1k

点赞数 2

分类专栏：类似QQ好友移动左右列表移动列表元素追加 div实现列表移动 div模拟select列表文章标签：类似QQ好友移动左右列表移动列表元素追加 div实现列表移动 div模拟select列表

本文链接：https://blog.csdn.net/Lazy_carrot/article/details/52806222

版权

类似QQ好友移动同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

左右列表移动

1 篇文章 0 订阅

订阅专栏

列表元素追加

1 篇文章 0 订阅

订阅专栏

类似QQ的好友移动，左侧有一个列表，右侧有一个列表，可以左右移动，单击选择，双击移动，全部移动，过滤条件过滤左侧列表，点击提交后把右侧列表中的数据验证然后保存到数据库中。可以使用select但是select与我用的一个框架的样式冲突，不能很好的展示出来，所以改用了div实现，下面是代码：

<%@ page language="java" pageEncoding="GBK"%>
<%@ page import="java.util.*" %>
<%@ page import="java.text.*" %>
<html>
<head>
<title>选择好友</title>
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<link rel="stylesheet" type="text/css"href="../fxyd/jquery-easyui-1.4.4/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css"href="../fxyd/jquery-easyui-1.4.4/themes/icon.css">
	<link href="../i/theme/blue/css/main.css" rel="stylesheet" type="text/css" />
	<link href="../i/theme/blue/css/dialog.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="../fxyd/jquery-easyui-1.4.4/jquery.min.js"></script>
	<script type="text/javascript"src="../fxyd/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
	<script type="text/javascript"src="../fxyd/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
var hasDetile=0;
$(function(){
	var hxdata = "<%=request.getAttribute("hxdata")%>";
	var hxarr = hxdata.split("_");
    $.ajax({     
        url: '../i/risklist.do?cmd=enterprise&flag=1&urlcache='+Math.random()+'&blocid='+'<%=request.getAttribute("blocStr")%>'+'&idStr='+'<%=request.getAttribute("idStr")%>',
        type: "POST",
        dataType: "json",
        success: function (jdata, stat) {
        	datastr = jdata;
        	hasDetile = jdata[jdata.length-1].hasDetile;
        	var flag = true;
            for(var i=0;i<jdata.length-1;i++){
            	for(var j=0;j<hxarr.length;j++){
            		if(jdata[i].id==hxarr[j]){
            			flag=false;
            			break;
            		}
            	}
            	//根据flag将一个div追加到左侧还是右侧（回显）
            	if(flag){
        				$("#ldiv").append("<div id='"+jdata[i].id+"' class='"+jdata[i].blocno+"' οndblclick='dbMove(this);'  οnclick='sel(this);' style='cursor:default;font-family:宋体; font-size:13px;'>"+jdata[i].text+'</div>');
            	}else{
    						$("#rdiv").append("<div id='"+jdata[i].id+"' class='"+jdata[i].blocno+"' οndblclick='dbMove(this);'  οnclick='sel(this);' style='cursor:default;font-family:宋体; font-size:13px;'>"+jdata[i].text+'</div>');
            	}
            	flag = true;
            }
        }
    });
});

var temp="";

/**
 * 单击某一行即为选择，选择后变色
 */
function sel(obj){
	var temparr = temp.split("_");
	if(temp.indexOf(obj.id)!=-1){
		for(var i=0;i<temparr.length;i++){
			if(temparr[i]==obj.id){
				temparr.splice(i,1);
			}
		}
		document.getElementById(""+obj.id).style.backgroundColor="#ffffff";
		temp = temparr.join("_");
		return;
	}
	document.getElementById(""+obj.id).style.backgroundColor="#FFD39B";
	temp+=obj.id+"_";
}

/**
 * 企业名称过滤
 */
function showValue(obj){
    $.ajax({     
        url: '../i/risklist.do?cmd=enterprise&urlcache='+Math.random(),
        data : 'flag=1&txtValue='+obj.replace(/(^\s*)|(\s*$)/g, "")+'_'+$('#filter1').val().replace(/(^\s*)|(\s*$)/g, "")+'&blocid='+'<%=request.getAttribute("blocStr")%>'+'&idStr='+'<%=request.getAttribute("idStr")%>',
        type: "POST",
        dataType: "json",
        success: function (jdata, stat) {
					var rstr = getAllItemValuesByString('rdiv');
					var rarr = rstr.split(",");
        	$("#ldiv").find("div").remove();
          for(var i=0;i<jdata.length-1;i++){
						$("#ldiv").append("<div id='"+jdata[i].id+"' class='"+jdata[i].blocno+"' οndblclick='dbMove(this);' οnclick='sel(this);' style='cursor:default;font-family:宋体; font-size:13px;'>"+jdata[i].text+'</div>');
						for(var j=0;j<rarr.length;j++){
							if(jdata[i].id==rarr[j]){
								$("#"+rarr[j]).remove();
							}
					}
        }
        }
    });
}

/*
 * 税务机关过滤
 */
function showValue1(obj){
    $.ajax({     
        url: '../i/risklist.do?cmd=enterprise&urlcache='+Math.random(),
        data : 'flag=1&txtValue='+$('#filter').val().replace(/(^\s*)|(\s*$)/g, "")+'_'+obj.replace(/(^\s*)|(\s*$)/g, "")+'&blocid='+'<%=request.getAttribute("blocStr")%>'+'&idStr='+'<%=request.getAttribute("idStr")%>',
        type: "POST",
        dataType: "json",
        success: function (jdata, stat) {
					var rstr = getAllItemValuesByString('rdiv');
					var rarr = rstr.split(",");
        	$("#ldiv").find("div").remove();
          for(var i=0;i<jdata.length-1;i++){
						$("#ldiv").append("<div id='"+jdata[i].id+"' class='"+jdata[i].blocno+"' οndblclick='dbMove(this);' οnclick='sel(this);' style='cursor:default;font-family:宋体; font-size:13px;'>"+jdata[i].text+'</div>');
						for(var j=0;j<rarr.length;j++){
							if(jdata[i].id==rarr[j]){
								$("#"+rarr[j]).remove();
							}
					}
        }
        }
    });
}

/**
 * 双击移动事件，双击某一行数据将该行数据移动到另一侧列表中
 */
function dbMove(obj){
	if("ldiv"==$("#"+obj.id).parent()[0].id){
		document.getElementById(""+obj.id).style.backgroundColor="#ffffff";
		var tl = $("#"+obj.id);
		$("#"+obj.id).remove();
		$("#rdiv").append(tl);
	}else if("rdiv"==$("#"+obj.id).parent()[0].id){
		document.getElementById(""+obj.id).style.backgroundColor="#ffffff";
		var tr = $("#"+obj.id);
		$("#"+obj.id).remove();
		$("#ldiv").append(tr);
	}
}


/**
 * 移动所有选中的行到另一个列表中
 */
	function moveAllSelectedToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { 
		var temparr = temp.split("_");
		for(var i=0;i<temparr.length;i++){
			if(i<=temparr.length-2){
				document.getElementById(temparr[i]).style.backgroundColor="#ffffff";
			}
			var l = $("#"+temparr[i]);
			$("#"+temparr[i]).remove();
			$("#"+toObjectSelectId).append(l);
		}
		temp="";
		} 
	
	/**
	 * 将当前列表的所有行全部移动到另一个列表中
	 */
	function moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { 
		$("#"+toObjectSelectId).append($("#"+fromObjSelectId).find("div")); 
		$("#"+fromObjSelectId).find("div").remove();
		} 
	
	/**
	 * 获取右侧列表中的成员企业id，用逗号分隔拼串
	 */
	function getAllItemValuesByString(objSelectId) { 
		var divarr = $("#rdiv").find("div");
		var selectItemsValuesStr = "";
		for(var i=0;i<divarr.length;i++){
			selectItemsValuesStr += divarr[i].id+",";
		}
		return selectItemsValuesStr.toString().substring(0,selectItemsValuesStr.length-1); 
		} 
	
	/**
	 * 任务明细存在的时候选择成员企业，弹出此对话框，如果确定，会删除已经生成的明细
	 */
	function confirm(){
		var datastr = getAllItemValuesByString('rdiv');
		Dialog.showConfirm("任务明细已存在，重新生成会覆盖掉原来的数据，是否要重新生成任务明细？", function(){
				if(datastr.length==0){
					confirm1();
				}else{
					baocun("");
				}
				hasDetile = 0;
		});
	}
	
	/**
	 * 选择成员企业为空时弹出框，确定后如果之前已经选择成员企业那么将其删除
	 */
	function confirm1(){
		Dialog.showConfirm("您没有选择成员企业！已选择的成员企业会被删除，确定删除？", function(){
				baocun("delete");
		});
	}
	
	/**
	 * 对选择的成员企业进行保存
	 */
	function baocun(str){
		var datastr = getAllItemValuesByString('rdiv');
		var idstr = "<%=request.getAttribute("idStr").toString() %>";
		var params = new Map();
		params.put("datastr",datastr);
		params.put("cmd","addenterprise");
		params.put("idstr",idstr);
		if(datastr.length==0){
				params.put("datastr",str);
		}
		try{
			new QueryObj("risklist.do", params, function(query, userdata){
			  try {
			    query.checkResult();//检查返回结果。如果有异常会抛出来
			    if (query.isResultOk()) {//检查状态是否OK
			     parent.Dialog.urlDialog.returnValue='OK';
					 parent.Dialog.urlDialog.close();
			    }
			  } catch(e) {//捕捉异常
			    hideWaitDialog();//隐藏等待框
			    showError(e);//显示异常信息(如果有)
			  }
			});//向服务器发送请求
		}catch(e){
			alert('出错了');
		}
	}
	
	/**
	 * 保存成员企业（事件调用）
	 */
	function save(){
		var datastr = getAllItemValuesByString('rdiv');
		if(hasDetile!=0){
			confirm();
		}else{
			if(datastr.length==0){
				confirm1();
			}else{
				baocun("");
			}
		}
	}
</script>
</head>
<body>
<div style="margin-top:10px;margin-left:5px">
				集团名称:<input type="text" id="filter" onPropertyChange="showValue(this.value)"/>
				税务机关:<input type="text" id="filter1" onPropertyChange="showValue1(this.value)"/>
</div>
<br/><br/>
<form>
	<table width="100%" >
		<tr>
		<td id="ltd" width="240">
		<div id="ldiv" style="overflow:scroll; width:240px;height:300px;border:solid 1px" >   
		</div>
		</td>
		<td width="40" align="center">
				<input id="selectall" type="button" οnclick="moveAllToAnotherSelectObject('ldiv','rdiv');" value=">>"/>
				<input id="removeall" type="button" οnclick="moveAllToAnotherSelectObject('rdiv','ldiv');" value="<<"/>
				<input id="select" type="button" οnclick="moveAllSelectedToAnotherSelectObject('ldiv', 'rdiv');" value=" >"/>
				<input id="remove" type="button" οnclick="moveAllSelectedToAnotherSelectObject('rdiv', 'ldiv');" value=" <"/>
		</td>
		<td width="220">
			<div id="rdiv" style="overflow:scroll; width:220px;height:300px;border:solid 1px" >   
			</div>
	    <div id="temp"></div>
		</td>
		</tr>
		<input id="length" type="hidden" value="<%=request.getAttribute("length") %>" />
		<input id="blocid" type="hidden" value="<%=request.getAttribute("blocid") %>" />
	</table>
	<br/><br/>
	<center>
	<span><a href="javascript:save()" class=boxLink><img
						src=../i/images/open.gif border=0>确定</a></span> <span
				style="margin-left:100"><a
					href="javascript:parent.Dialog.urlDialog.close();" class=boxLink><img
						src=../i/images/cancel.gif border=0>取 消</a></span>
	</center>
	</form>
</body>
</html>