类似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>