一个左右移动的juery插件 multimove.js
来源：互联网 发布：mybatis like sql注入 编辑：程序博客网 时间：2024/04/29 19:29
http://www.javaeye.com/topic/545971
http://hi.baidu.com/uniquejava/blog/item/d55a2e12140f6953f819b821.html
http://letitbe.javaeye.com/blog/238254
http://www.ihiro.org/plugins-garden/scrolltop-plugin
http://www.cnblogs.com/fromearth/archive/2009/07/08/1519054.html
http://www.javaeye.com/search?type=all&query=jQuery%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91&sort=
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="text/html; charset=UTF8;IE=8">
<title>Unication</title>
<script src="../libs/js/jquery-1.3.2.js"></script>
<script src="multimove.js"></script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" valign="top">
<table border="0" cellpadding="0" width="100%" valign="top" align="top" >
<tr >
<td >
<style>
TD {font-size:12px; font-weight:bold; color:#2184a5;text-decoration: none ;}
.removebt,.removebt:link,.addbt,.addbt:link {
float: left;
background-color:#7f9cb9;
padding: 6px; margin-top:2px;
border-top: #FF8585 1px solid;
border-right: #410000 1px solid;
border-bottom: #410000 1px solid;
border-left: #FF8585 1px solid;
color: #FFF;
text-decoration: none;
font-weight: bold;
font: bold 10px Verdana;
}
.addbt:hover,.removebt:hover {
border-top: #410000 2px solid;
border-right: #FF8585 1px solid;
border-bottom: #FF8585 2px solid;
border-left: #410000 1px solid;
font: bold 10px Verdana;
}
/* 多选移动对话框样式 */
.defaultRow{
font-size: 14px;
font-weight: bold;
font-family:??, arial, helvetica, sans-serif;ri
color: #4477bc;
CURSOR: hand;
padding-bottom:4px;
padding-top:4px;
background-color:#ffffff;
}
.selectRow{
font-size: 14px;
font-weight: bold;
font-family:??, arial, helvetica, sans-serif;ri
color: #4477bc;
CURSOR: hand;
padding-bottom:4px;
padding-top:4px;
background-color:#BfC8DD;
}
</style>
<div id="content">
<div class="center_div" >
<!-- star-->
<table width="680px" align="center" cellspacing="0" cellpadding="0" width="100%" >
<tr>
<td width= "300px" align="center">
<div style="padding: 20px 5px 5px 5px;overflow:auto">
<div style='position:auto;font-size: 14px;color:#;font-weight: bold; text-align:center;background-color: #7f9cb9;border:1px #7088AB solid;border-bottom:0px; height:20px;padding:3px'>Available Users</div>
<div style='position:auto;font-size: 12px;text-align:center;border:1px #7088AB solid;padding: 0px 5px 5px 5px;font_weight:bold;border-top:0px; height: 200px;overflow:auto'>
<table width="100%" height="52px" align="center" >
<tr>
<td>
<table width="97%" align='center' height="1px" >
<tr align="center" >
<td width="10%" nowrap=nowrap style="padding-left:20px;color:#2284b8"></td>
<td width="45%" nowrap=nowrap align="left"><span title='Extensions' > <a href="#" > Extension </a></span></td>
<td width="45%" nowrap=nowrap align="left"><span title='Extensions type' > <a href="#" > Extension Type</a></span></td>
</tr>
</table>
</td>
</tr>
<tr width="100%" valign="top">
<td width="100%">
<table width="97%" id="extTab" name="extTab" align='center' cellspacing="0" cellpadding="0">
<tr align='center' class='defaultRow' >
<td width="10%" nowrap=nowrap align="left"><div style="padding-right:20px;"><img src="usermark.png"></div></img></td>
<td width="45%" nowrap=nowrap align="left">1001</td>
<td width="45%" nowrap=nowrap align="left">sip</td>
<td width="45%" nowrap=nowrap align="left" style="display:none">140</td>
</tr>
<tr align='center' class='defaultRow' >
<td width="10%" nowrap=nowrap align="left"><div style="padding-right:20px;"><img src="usermark.png"></div></img></td>
<td width="45%" nowrap=nowrap align="left">1003</td>
<td width="45%" nowrap=nowrap align="left">sip</td>
<td width="45%" nowrap=nowrap align="left" style="display:none">494</td>
</tr>
<tr align='center' class='defaultRow' >
<td width="10%" nowrap=nowrap align="left"><div style="padding-right:20px;"><img src="usermark.png"></div></img></td>
<td width="45%" nowrap=nowrap align="left">6004</td>
<td width="45%" nowrap=nowrap align="left">dahdi</td>
<td width="45%" nowrap=nowrap align="left" style="display:none">147</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
<td>
<td width="60px" align="center">
<div style="">
<a href="#" class="addbt" id= "addbt" >>>增加 </a> <br><br>
<a href="#" class="removebt" id= "removebt" ><<移除 </a>
</div>
</td>
<td width= "300px" align="center">
<div style="padding: 20px 5px 5px 5px;overflow:auto">
<div style='position:auto;font-size: 14px;color:#;font-weight: bold; text-align:center;background-color: #7f9cb9;border:1px #7088AB solid;border-bottom:0px; height:20px;padding:3px'>RingAll Member</div>
<div style='position:auto;font-size: 12px;text-align:center;border:1px #7088AB solid;padding: 0px 5px 5px 5px;font_weight:bold;border-top:0px; height: 200px;overflow:auto'>
<table width="100%" height="52px" align="center" >
<tr>
<td>
<table width="97%" align='center' height="1px" >
<tr align="center" >
<td width="10%" nowrap=nowrap style="padding-left:20px;color:#2284b8"></td>
<td width="45%" nowrap=nowrap align="left"><span title='Extensions' > <a href="#" > Extension </a></span></td>
<td width="45%" nowrap=nowrap align="left"><span title='Extensions type' > <a href="#" > Extension Type</a></span></td>
</tr>
</table>
</td>
</tr>
<tr width="100%" valign="top">
<td width="100%">
<table width="97%" id="raTab" name="raTab" align='center' cellspacing="0" cellpadding="0">
<tr align='center' class='defaultRow' >
<td width="10%" nowrap=nowrap align="left"><div style="padding-right:20px;"><img src="usermark.png"></div></img></td>
<td width="45%" nowrap=nowrap align="left">1002</td>
<td width="45%" nowrap=nowrap align="left">sip</td>
<td width="45%" nowrap=nowrap align="left" style="display:none">141</td>
</tr>
<tr align='center' class='defaultRow' >
<td width="10%" nowrap=nowrap align="left"><div style="padding-right:20px;"><img src="usermark.png"></div></img></td>
<td width="45%" nowrap=nowrap align="left">6001</td>
<td width="45%" nowrap=nowrap align="left">dahdi</td>
<td width="45%" nowrap=nowrap align="left" style="display:none">143</td>
</tr>
<tr align='center' class='defaultRow' >
<td width="10%" nowrap=nowrap align="left"><div style="padding-right:20px;"><img src="usermark.png"></div></img></td>
<td width="45%" nowrap=nowrap align="left">6002</td>
<td width="45%" nowrap=nowrap align="left">dahdi</td>
<td width="45%" nowrap=nowrap align="left" style="display:none">146</td>
</tr>
<tr align='center' class='defaultRow' >
<td width="10%" nowrap=nowrap align="left"><div style="padding-right:20px;"><img src="usermark.png"></div></img></td>
<td width="45%" nowrap=nowrap align="left">6003</td>
<td width="45%" nowrap=nowrap align="left">dahdi</td>
<td width="45%" nowrap=nowrap align="left" style="display:none">142</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
<td>
</tr>
</table>
<!--end-->
</div>
</div>
</td>
</tr>
</table>
<script language="javascript">
<!--
$('#content').multimove('extTab','raTab','addbt','removebt');
-->
</script>
</body>
</html>
multimove.js
(function($) {
// Code goes here
// orgTable 左边的表格id desTable 右边的表格id addBtId右移的id removeBtId左移的id
$.fn.multimove = function(orgTable,desTable,addBtId,removeBtId){
$.fn.multimove.selectRowsArr = new Array();
$.fn.multimove.removeRowsArr = new Array();
flag = false;
$.fn.multimove.backgroudArr = new Array();
$.fn.multimove.backgroudLeftArr = new Array();
leftTb = $("#"+orgTable);
rightTb = $("#"+desTable);
addBtObj = $("#"+addBtId);
removeBt = $("#"+addBtId);
for(i=0;i< document.getElementById(desTable).rows.length;i++){
$.fn.multimove.backgroudArr.push(false);
}
for(i=0;i<document.getElementById(orgTable).rows.length;i++){
$.fn.multimove.backgroudLeftArr.push(false);
}
bandEvent(orgTable,desTable,addBtId,removeBtId);
};
//绑定表格选择事件
function bandEvent(leftTbId,rightTbId,addBtId,removeBtId){
$("#"+addBtId).unbind("click");
$("#"+removeBtId).unbind("click");
$("#"+leftTbId+' tr').unbind("click");
$("#"+rightTbId+' tr').unbind("click");
$("#"+leftTbId+' tr').unbind("dblclick");
$("#"+rightTbId+' tr').unbind("dblclick");
$("#"+addBtId).bind("click", function(){
addRtRow(leftTbId,rightTbId,addBtId,removeBtId);
});
$("#"+removeBtId).bind("click", function(){
addLfRow(leftTbId,rightTbId,addBtId,removeBtId);
});
$("#"+leftTbId+' tr').bind("click", function(){//'tr:not(/'#rowHeader/')'
selectLeftRec(this);
});
$("#"+rightTbId+' tr').bind("click", function(){
selectRtRec(this);
});
$("#"+leftTbId+' tr').bind("dblclick", function(){
addOneLtRow(this,leftTbId,rightTbId,addBtId,removeBtId);
});
$("#"+rightTbId+' tr').bind("dblclick", function(){
addOneRtRow(this,leftTbId,rightTbId,addBtId,removeBtId)
});
}
function addRtRow(leftTbId,rightTbId,addBtId,removeBtId){
$.fn.multimove.selectRowsArr = sortArr($.fn.multimove.selectRowsArr);
var tmpArr = new Array();
for(i=0;i<$.fn.multimove.selectRowsArr.length;i++){
tmpArr.push($.fn.multimove.selectRowsArr[i]);
//alert($.fn.multimove.selectRowsArr[i]);
}
for(i=0;i<tmpArr.length;i++){
rowIndex = tmpArr[i]+1;//-j;
$("#"+leftTbId+" tr:nth-child("+rowIndex+")").clone().appendTo("#"+rightTbId);
$("#"+rightTbId+" tr").css({backgroundColor:'#ffffff'});
}
olen = tmpArr.length;
j = 0;//每删除一行 表格记录减少一行
for(i=0;i<olen;i++){
rowIndex = parseInt(tmpArr[i])+1-j;
if(rowIndex == 1){
$("#"+leftTbId+" tr:first").remove();
}else{
$("#"+leftTbId+" tr:nth-child("+rowIndex+")").remove();
}
$.fn.multimove.selectRowsArr.shift();
j++;
}
for(i=0;i<document.getElementById(rightTbId).rows.length;i++){
$.fn.multimove.backgroudLeftArr.push(false);
}
//重新绑定新行的事件
bandEvent(leftTbId,rightTbId,addBtId,removeBtId);
}
function selectLeftRec(selfObj){
currRow = selfObj.rowIndex;
if($.fn.multimove.backgroudArr[currRow] == false){
selfObj.style.backgroundColor = '#BfC8DD';
//$.fn.multimove.selectRowsArr[currRow] = currRow;
$.fn.multimove.selectRowsArr.push(currRow);
$.fn.multimove.backgroudArr[currRow] = true;
}else{
selfObj.style.backgroundColor='#ffffff';
for(i=0;i<$.fn.multimove.selectRowsArr.length;i++){
if( currRow == $.fn.multimove.selectRowsArr[i])
$.fn.multimove.selectRowsArr.splice(i, 1);
}
$.fn.multimove.backgroudArr[currRow] = false;
}
}
function selectRtRec(selfObj){
currRow = selfObj.rowIndex;
if($.fn.multimove.backgroudLeftArr[currRow] == false){
selfObj.style.backgroundColor = '#BfC8DD';
$.fn.multimove.removeRowsArr.push(currRow);
$.fn.multimove.backgroudLeftArr[currRow] = true;
}else{
selfObj.style.backgroundColor='#ffffff';
for(i=0;i< $.fn.multimove.removeRowsArr.length;i++){
if( currRow == $.fn.multimove.removeRowsArr[i])
$.fn.multimove.removeRowsArr.splice(i, 1);
}
$.fn.multimove.backgroudLeftArr[currRow] = false;
}
$.fn.multimove.removeRowsArr = sortArr($.fn.multimove.removeRowsArr);
}
//选择的顺序可能是反向的，需要进行排序 冒泡排序而已
function sortArr(objArr){
var tmp;
//交换标志
var exchange;
var n = objArr.length;
for (j = 0; j < n-1; j++) {
exchange = false;
for(k = n-1;k > j; k--) {
if (objArr[k] <objArr[k - 1]) {
exchange = true;
tmp = objArr[k-1];
objArr[k-1] = objArr[k];
objArr[k] = tmp;
}
}
if (!exchange) {
break;
}
}
return objArr;
}
function addLfRow(leftTbId,rightTbId,addBtId,removeBtId){
$.fn.multimove.removeRowsArr = sortArr($.fn.multimove.removeRowsArr);
var tmpArr = new Array();
for(i=0;i<$.fn.multimove.removeRowsArr.length;i++){
tmpArr.push($.fn.multimove.removeRowsArr[i]);
//alert($.fn.multimove.removeRowsArr[i]);
}
for(i=0;i<tmpArr.length;i++){
rowIndex = tmpArr[i]+1;//-j;
$("#"+rightTbId+" tr:nth-child("+rowIndex+")").clone().appendTo("#"+leftTbId);
$("#"+leftTbId+" tr").css({backgroundColor:'#ffffff'});
}
olen = tmpArr.length;
j = 0;//每删除一行 表格记录减少一行
for(i=0;i<olen;i++){
rowIndex = parseInt(tmpArr[i])+1-j;
if(rowIndex == 1){
$("#"+rightTbId+" tr:first").remove();
}else{
$("#"+rightTbId+" tr:nth-child("+rowIndex+")").remove();
}
$.fn.multimove.removeRowsArr.shift();
j++;
}
//重新 设置 extTab表格 背景
for(i=0;i<document.getElementById(leftTbId).rows.length;i++){
$.fn.multimove.backgroudLeftArr.push(false);
}
//重新绑定新行的事件
bandEvent(leftTbId,rightTbId,addBtId,removeBtId);
}
function addOneLtRow(selfObj,leftTbId,rightTbId,addBtId,removeBtId){
selectLeftRec(selfObj);
addRtRow(leftTbId,rightTbId,addBtId,removeBtId);
}
function addOneRtRow(selfObj,leftTbId,rightTbId,addBtId,removeBtId){
selectRtRec(selfObj);
addLfRow(leftTbId,rightTbId,addBtId,removeBtId);
}
})(jQuery);
效果图
- 一个左右移动的juery插件 multimove.js
- 一个左右移动的控件
- juery插件
- js 两个select之间的左右移动
- 【JS】实现单选框的左右移动
- js 实现左右移动
- 【js】左右上下移动
- 基于bootstrap的jQuery左右移动多选框插件 multiselect
- js控制多选框左右移动
- js控制多选框左右移动
- js实现的下拉菜单的左右移动
- Iframe的简单应用,js实现图片左右移动
- 超级简单实现内容的左右移动js+jquery+html
- 运用js简单制作图片的左右移动
- HTML5的canvas实现一个球的左右移动
- juery插件文件上传
- 左右移动的图片
- 左右移动的表格
- Spring 让 LOB 数据操作变得简单易行
- x264 移植到 ARM的方法
- jquery新闻幻灯显示
- My97DatePicker 日历控件
- C#解决ie6下png图像透明问题
- 一个左右移动的juery插件 multimove.js
- FFMPEG设置 cbr讨论
- PreferenceActivity(一)
- 共模电感
- x264里的2pass指的是什么意思? x264源代码分析2.encode()
- 大公司的PHP面试题
- [转] 相对路径
- zjgsuoj1161——软件工程
- x264源代码分析1。fread()
