EasyUI下拉框实现多选、全选、复选和模糊查询

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/iaiti/article/details/52416171

其实整个的思路还是很麻烦的。之前网上查不到能囊括上面所有东西的。但是参考之后还是摸出了一种新的方法,但是仍然不完美。毕竟是在封装的东西上面修改。




代码实现:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
		//资源文件加载 jQuery,EasyUI等js文件
    </head>
    <script>
        var selectarray = [-1];
	$(document).ready(function(){
		init();
	});
	function init(){	
		$("#level").append("<option value='-1' selected='true') >全选反选</option>");
		var comboboxarray = [];
		comboboxarray.push(-1);
		for(var i=0;i<6;i++){
			$("#level").append("<option value='" + i + "'>等级" + i + "</option>");
			comboboxarray.push(i);
	   	}
		
		$("#level").combobox({
			multiple:true,
			editable:true,
			onSelect:function (record) {
				//easyui中的record 记录了value text selected 属性
				//for(var i in record){ 
				// 	var property=record[i]; 
				//	description+=i+" = "+property+"\n"; 
				//	console.info(description);
				//} 
				 selectarray.push(record.value);
				 
			 	 if($('#level').combobox('getText').split(",").length!=selectarray.length){
						 selectarray=[];
						 selectarray.push(record.value);
				 } 
				 if(record.value==-1){
					 $('#level').combobox('setValues', comboboxarray);
					 selectarray = comboboxarray.concat();
				 }else{
					 $('#level').combobox('setValues', selectarray);
				 }
			},
			onUnselect:function (record) {
				 for(var ele in selectarray){
			 		if(selectarray[ele]==record.value){
				 		selectarray.splice(ele,1);  
					}
				 } 
				 if(record.value==-1){
					 $('#level').combobox('setValues', "");
	       				 selectarray=[];  
				 }
			},
		});
	}
</script>
</head>
 
<body>
	<div >
			<select id="level" name="level" class="easyui-validatebox" type="text" style="width:90px;">
			</select>	
	</div>
</body>
</html>



onSelect和onUnselect能分别选择和取消选择列表项的时候触发。

而要做到全选功能的话,其实可以直接用一个数组对象comboboxarray存储了整个下拉框的值。将combobox有的值都push存入数组中。

当选到全选的时候,其实就是把整个combobox的值设为这个数组。

想法,反选的时候,把combobox的值设为空。


function中的record 记录了value text selected 属性。所以根据全选反选的value值能判断是否点击。

而当不是点击全选反选的时候,我们需要另外一个数组selectarray来记录,已经被选择过的下拉项还有移除。


但是selectarray记录全选时需要注意,selectarray = comboboxarray.concat();

之前写成了selectarray = comboboxarray。后续有各种bug。selectarray是会改变的,selectarray = comboboxarray这样selectarray和comboboxarray都是对包含全部下拉框值的数组对象的引用,所以selectarray 的改变是直接影响的,而comboboxarray本身是用来存储所有值的,并不能让它去改变。


所以selectarray = comboboxarray.concat(); 返回了一个新数组后不会影响到旧数组。


反选时,将对应的值从数组中移除。

splice方法表示根据下标移除1个元素。


模糊查询EasyUI封装的并不是太好。

目前还是有bug。

如果你打了等后,虽然是能模糊查询到,但仅限于你查第一个,所以作用其实不大。

即使查完第一个后再选择之后。$('#level').combobox('getText')你会发现你所拿到的。是模糊查询输入的文字加分隔符。例如输入等,选择等级0,那么拿到的值是等,等级0。


还有一个问题是,你选择了一些选项之后,人工把那些文字删除之后,再来选,之前的记录还在。

原因就是没有事件触发来移除你上次选择后数组保存的数据。


所以针对这两种bug,最简单粗暴的解决方式是让这个下拉框不可编辑。

展开阅读全文

没有更多推荐了,返回首页