EasyUI使用Datalist实现左右移动多选框

实现如下：

1、导入Jquery和EasyUI:

2、在body中添加:

	
 
		

		

			>|

			>>|

			|<<

			|<
		
		

	

3、js代码如下：

$(function () {
	$('#dl1').datalist({
		url:'file:///E:/prompt.json',
		method:'get',	
		valueField:'value',	
		textField:'text',	
		lines:false,
		checkbox: true,
		singleSelect:false
	});
	$('#dl2').datalist({
		//url:'file:///E:/prompt.json',
		//method:'get',	
		valueField:'value',	
		textField:'text',	
		lines:false,
		checkbox: true,
		singleSelect:false
	});
	
	
	//移动按钮
	$("#dl_add").click(function () {
		var rows = $("#dl1").datalist("getSelections");
		/*
		//方式1
		var rowArray = new Array();
		$(rows).each(function(i){
			var value = rows[i].value;
			var text = rows[i].text;
			var row = {
				value:value,
				text:text
			};
			rowArray.push(row);
			//删除
			var rowIndex = $("#dl1").datalist("getRowIndex", rows[i]);
			$("#dl1").datalist("deleteRow",rowIndex);
		});
		rowArray = rowArray.concat($("#dl2").datalist("getRows"));//合并
		var total = { "total":rowArray.length,rows:rowArray };
		$("#dl2").datalist("loadData",rowArray);
		*/
		//方式2
		$(rows).each(function(i){
			var value = rows[i].value;
			var text = rows[i].text;
			var row = {
				value:value,
				text:text
			};
			//添加
			//$("#dl2").datalist("appendRow",row);
			$("#dl2").datalist("insertRow",{index:0,row:row});//作为第一条
			//删除
			var rowIndex = $("#dl1").datalist("getRowIndex", rows[i]);
			$("#dl1").datalist("deleteRow",rowIndex);
		});
		//移动完后重新加载dl2,否则显示不正常
		$("#dl2").datalist("loadData",$("#dl2").datalist('getRows'));
	});
	//移动按钮
	$("#dl_add_all").click(function () {
		var data = $("#dl1").datalist("getData");
		var rows = data.rows;
		var rowsLength = rows.length;
		var indexArray = new Array();
		for (var i = 0; i =0;i--){
			$("#dl1").datalist("deleteRow",i);
		}
		//移动完后重新加载dl2,否则显示不正常
		$("#dl2").datalist("reload");
	});
	$("#dl_remove").click(function () {
		var rows = $("#dl2").datalist("getSelections");
		/*
		//方式1
		var rowArray = new Array();
		$(rows).each(function(i){
			var value = rows[i].value;
			var text = rows[i].text;
			var row = {
				value:value,
				text:text
			};
			rowArray.push(row);
			//删除
			var rowIndex = $("#dl2").datalist("getRowIndex", rows[i]);
			$("#dl2").datalist("deleteRow",rowIndex);
		});
		rowArray = rowArray.concat($("#dl1").datalist("getRows"));//合并
		var total = { "total":rowArray.length,rows:rowArray };
		$("#dl1").datalist("loadData",rowArray);
		*/
		//方式2
		var rows = $("#dl2").datalist("getSelections");
		var rowArray = new Array();
		$(rows).each(function(i){
			var value = rows[i].value;
			var text = rows[i].text;
			var row = {
				value:value,
				text:text
			};
			//添加
			//$("#dl1").datalist("appendRow",row);
			$("#dl1").datalist("insertRow",{index:0,row:row});//作为第一条
			//删除
			var rowIndex = $("#dl2").datalist("getRowIndex", rows[i]);
			$("#dl2").datalist("deleteRow",rowIndex);
		});
		//移动完后重新加载dl1,否则显示不正常
		$("#dl1").datalist("loadData",$("#dl1").datalist('getRows'));
		
	});
	$("#dl_remove_all").click(function () {
		var data = $("#dl2").datalist("getData");
		var rows = data.rows;
		var rowsLength = rows.length;
		var indexArray = new Array();
		for (var i = 0; i =0;i--){
			$("#dl2").datalist("deleteRow",i);
		}
		//移动完后重新加载dl1
		$("#dl1").datalist("reload");
	});
});

其中，prompt.json如下：

[{
    "value":"in",
    "text":"属于列表"
},{    
    "value":"not in",
    "text":"不属于列表"
},{    
    "value":"=",
    "text":"等于"
},{    
    "value":"<>",
    "text":"不等于"
},{    
    "value":">",
    "text":"大于"
},{ 
    "value":">=",
    "text":"大于或等于"
},{ 
    "value":"<",
    "text":"小于"
},{ 
    "value":"<=",
    "text":"小于或等于"
},{ 
    "value":"between",
    "text":"介于"
},{  
    "value":"not between",
    "text":"不介于"
},{ 
    "value":"is null",
    "text":"为空"
},{
    "value":"is not null",
    "text":"不为空"
},{
    "value":"like",
    "text":"匹配模式"
},{    
    "value":"not like",
    "text":"不同于模式"
}]

最终效果如下:

转载请注明出处 https://blog.csdn.net/u012714280/article/details/80686286，谢谢！