一个简单的支持排序的双栏列表（使用jquery）

最新推荐文章于 2023-08-09 21:15:55 发布

tcgbp

最新推荐文章于 2023-08-09 21:15:55 发布

阅读量472

点赞数

文章标签： jquery function button table null

本文链接：https://blog.csdn.net/tcgbp/article/details/7186696

版权

帮同事写的，貌似兼容性还行，没仔细测过。说起来这东西实现起来很简单，不过在网上找了半天也没找见现成的，所以只好加了个班。。。

listtolist.html

<html>
<head>
	<script src="jquery.js"></script>
	<script src="listtolist.js"></script>
</head>
<body>
	    <table>  
		<tr>  
			<td colspan="2" valign="top" width="47%">   
				<select multiple="multiple"  id="uncountryTable" name="uncountryTable" style="height:300px;width:245px;">
				</select>  
			</td>  
			<td align="center">  
				<button id="l2rBtn">> </button><br/>  <button id="r2lBtn">< </button>
			</td>  
			<td colspan="2" valign="top" width="47%">  
				<select multiple="multiple" id="countryTable" name="countryTable" style="height:300px;width:245px;">  
												  
				</select>  
			</td>  
		</tr>  
		</table>  
</body>
</html>

listtolist.js

jQuery(document).ready(function() {   
    var leftOptionArray = new Array();
    var rightOptionArray = new Array();
	for(var i=0;i<10;i++){
		leftOptionArray[i] = new Option("VALUE"+(2*i),"TEXT"+(2*i),2*i);
		rightOptionArray[i] = new Option("VALUE"+(2*i+1),"TEXT"+(2*i+1),(2*i+1));
	}

	setOptions("uncountryTable",leftOptionArray);
	setOptions("countryTable",rightOptionArray);
	
	var rightDoubleClick = function(){  
            jQuery("#countryTable option:selected").each(function(){  
					insertIntoArray(leftOptionArray, getOption(rightOptionArray,jQuery(this).val()));
					removeOption(rightOptionArray,jQuery(this).val());
					jQuery(this).remove();  
            });  
			setOptions("uncountryTable",leftOptionArray);
			jQuery("#uncountryTable").dblclick(leftDoubleClick);
    };	
	



	var leftDoubleClick = function(){  
            jQuery("#uncountryTable option:selected").each(function(){  
					insertIntoArray(rightOptionArray, getOption(leftOptionArray,jQuery(this).val()));
					removeOption(leftOptionArray,jQuery(this).val());
					jQuery(this).remove();  
            });  
			setOptions("countryTable",rightOptionArray);
			jQuery("#countryTable").dblclick(rightDoubleClick);
    }; 
	
	jQuery("#uncountryTable").dblclick(leftDoubleClick);
    jQuery("#countryTable").dblclick(rightDoubleClick);	
	jQuery("#l2rBtn").click(leftDoubleClick);
    jQuery("#r2lBtn").click(rightDoubleClick);
	
	
	function setOptions(sid,arr){
		var select = jQuery("#" + sid);
		select.empty();
		for(var j=0;j<arr.length;j++){
			var optionObj = arr[j];
			var optionDom = "<option value='"+optionObj.value+"'>"+optionObj.text+"</option>";  
			select.append(optionDom);
		}
	}
	
	function insertIntoArray(optionArr,option){
		if(optionArr.length==0){
			optionArr[0] = option;
			return optionArr;
		}
		var coption = option;
		for(var i=0;i<optionArr.length;i++){
			if(coption.index < optionArr[i].index){
				temp = optionArr[i];
				optionArr[i] = coption;
				coption = temp;
			}
		}
		optionArr[optionArr.length] = coption;
	}
	
	function getIndex(arr,value){
		for(var i=0;i<arr.length;i++){
			var option = arr[i];
			if(option.value==value)
				return option.index;
		}
		return -1;
	}
	
	function getOption(arr,value){
		for(var i=0;i<arr.length;i++){
			var option = arr[i];
			if(option.value==value)
				return option;
		}
		return null;
	}
	
	function removeOption(arr,value){
		var cvalue = value;
		for(var i=0;i<arr.length;i++){
			if(arr[i].value==cvalue){
				if(i<arr.length-1){
					arr[i] = arr[i+1];
					cvalue = arr[i].value;
				}
			}
		}
		arr.length = arr.length - 1;
	}

    
    function Option(value, text, index){
        this.value = value;
        this.text = text;
        this.index = index;
    }
});