`

解决ext下拉列表全选和去全选功能

 
阅读更多

最近在做ext的项目,需求要求处理下拉列表要有全选和去全选的功能。在网上找了http://lovcombo.extjs.eu/ 这个是没有全选功能的,自己又补充了代码,希望对大家有用。

附件里lovcombo.css,和lovcombo.js都是在网上直接下载的,可以实现http://lovcombo.extjs.eu/的效果,lovcombo-new.js是重写了里面的onSelect:function(record, index)方法,拷出来给大家看下

这是旧文件里的

 ,onSelect:function(record, index) {   
        if(this.fireEvent('beforeselect', this, record, index) !== false){   
  
            // toggle checked field   
            record.set(this.checkField, !record.get(this.checkField));   
  
            // display full list   
            if(this.store.isFiltered()) {   
                this.doQuery(this.allQuery);   
            }   
  
            // set (update) value and fire event   
            this.setValue(this.getCheckedValue());   
            this.fireEvent('select', this, record, index);   
        }   
    } // eo function onSelect   

 修改过的给大家看下

,onSelect:function(record, index) {   
    	if(record.get(this.displayField) == '全部'){
    		if(!record.get(this.checkField)){
    			this.selectAll();
    		}else{
    			this.deselectAll();
    		}
    	}else{
	        if(this.fireEvent('beforeselect', this, record, index) !== false){   
	  
	            // toggle checked field   
	            record.set(this.checkField, !record.get(this.checkField));   
	            // display full list   
	            if(this.store.isFiltered()) {   
	                this.doQuery(this.allQuery);   
	            }   
	            // set (update) value and fire event  
	            var snapshot = this.store.snapshot || this.store.data;  
		        var isNotCheck = false;
		        snapshot.each(function(r) {   
		            if(!r.get(this.checkField) && r.get(this.displayField) != '全部') {   
		            	isNotCheck = true;  
		            	return;
		            }   
		        }, this); 
		       
	        	snapshot.each(function(r) {   
		            if(r.get(this.displayField) == '全部') { 
		            	 if(isNotCheck){
		            		 r.set(this.checkField, false);   
		            	 }else{
		            		 r.set(this.checkField, true); 
		     	        }	
		            }  
		        }, this); 
	            this.setValue(this.getCheckedValue());
	            this.fireEvent('select', this, record, index);   
	        }
    	}
    } 

 

  • 大小: 7.3 KB
分享到:
评论

相关推荐

    ext多选下拉列表的全选功能实现

    NULL 博文链接:https://leonel.iteye.com/blog/454174

    Extjs复选下拉列表实现了全选全不选和操作序自然序功能

    主要实现下拉列表复选功能,从Ext.ux.form.LovCombo.js文件改进而来 目前实现的有全选,全不选,自然序,操作序功能 changeSort负责实现操作序功能(即先选的显示顺序在前,后选的在后;取消操作也不影响操作的顺序...

    伊兰COMBO (强大的Ext单多选下拉列表控件;带详细示例)

    强大的Ext单多选下拉列表控件;基于 LovCombo ; * 作者:中国.湖南.长沙.任文敏 * * 功能: * 1. 支持:★ 多选|单选 (isSingle:'N|Y') * 2. 多选支持: 全选/全不选 * 3. ★ 多选且分页支持: 全部清除 * 4...

    EXT2.0中文教程

    9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!邪魔外道与边缘学科。 10.1. dwr与ext整合 10.1.1. 无侵入式整合dwr和ext 10.1.2. DWRProxy 10.1.3. DWRTreeLoader 10.2. localXHR让你在不用服务器就玩ajax 10.3....

    Ext 开发指南 学习资料

    9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!邪魔外道与边缘学科。 10.1. dwr与ext整合 10.1.1. 无侵入式整合dwr和ext 10.1.2. DWRProxy 10.1.3. DWRTreeLoader 10.1.4. DWRProxy和ComboBox 10.2. localXHR让你...

    EXT教程EXT用大量的实例演示Ext实例

    9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!邪魔外道与边缘学科。 10.1. dwr与ext整合 10.1.1. 无侵入式整合dwr和ext 10.1.2. DWRProxy 10.1.3. DWRTreeLoader 10.2. localXHR让你在不用服务器就玩ajax ...

    extjs4带全选复选框的下列表(有bug)

    1、解压,进入extjs4.2.1\examples\form,浏览器打开 hbox-form.html 文件,当我勾选中任意一个多选下拉框,然后再勾选...2、下拉列表选择功能的js代码在下面文件里: extjs4.2.1\examples\form\MultipleComboBox.js

    ExtJS4中文教程2 开发笔记 chm

    JQuery全选功能的实现 JQuery特效——下拉菜单 JQuery系列教程之XPath选择符 JQuery系列教程之选择符 JQuery自动缩放页面中的图片 JQuery获取浏览器的高度和宽度 jquery获得和设置下拉框值的代码 基于jquery的跨域...

    禅道项目管理软件ZenTaoPMS v1.4.rar

    051 我的档案中完善其他字段162 添加完项目之后,提示用户该如何处理177 分组用户选择增加全选功能229 项目增加项目负责人、产品负责人、测试负责人、发布负责人260 Bug, task, case编辑页面需求下拉菜单优化286 ...

Global site tag (gtag.js) - Google Analytics