`

解决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多选下拉列表的全选功能实现

    "ext多选下拉列表的全选功能实现"这个主题聚焦于一个特定的UI组件——ExtJS库中的MultiComboBox,这是一种允许用户多选的下拉列表控件。在实际应用中,全选功能常常被用来快速选择所有选项,极大地提高了用户的操作...

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

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

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

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

    extjs实现下拉框多选

    ComboBox 是一个具有搜索功能的下拉列表,用户可以从中选择一个选项。它由两个主要部分组成:一个可编辑的输入字段和一个下拉列表。默认情况下,ComboBox 只允许单选。 要实现多选功能,我们需要使用MultiSelect ...

    LovCombo.zip

    综上所述,实现ExtJS 3.4中的LovCombo全选和取消全选功能需要对ExtJS的模板、事件处理、数据绑定和UI更新有深入的理解。通过自定义模板和添加适当的事件监听器,我们可以为lovCombo增加额外的功能,提高用户体验。在...

    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让你...

    Extjs下拉多选树

    3. **全选/全不选功能**:为了方便用户快速选择或取消所有选项,下拉多选树可以提供全选和全不选的按钮或者快捷操作。这可以通过监听用户的事件并遍历所有节点来实现,一次性勾选或取消所有节点的复选框。 4. **...

    extjs多选下拉框

    在EXTJS框架中,"多选下拉框"(Multi-Select ComboBox)是一种常见的组件,它允许用户在下拉列表中选择多个选项。EXTJS 3.*版本也提供了这种功能,使得开发者能够创建功能丰富的界面,提升用户体验。下面将详细解释...

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

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

    ExtJS 下拉多选框lovcombo

    为了方便用户操作,我们可以为lovcombo添加全选和取消全选的功能。这通常通过`selectAll`和`deselectAll`方法来实现。 ```javascript provinceCombo.selectAll(); // 全选 provinceCombo.deselectAll(); // ...

    javascript下拉多选框复选框

    在JavaScript编程中,下拉多选框和复选框是常见的用户交互元素,它们用于收集用户的多选项选择信息。在本项目中,我们探讨的是如何使用纯JavaScript实现一个功能丰富的下拉多选框,而不是依赖于像jQuery这样的库,...

    extjs多选 下拉框扩展

    ComboBox由一个输入框和一个下拉列表组成,用户可以在输入框中输入文字,或者点击下拉箭头来浏览和选择列表中的选项。默认情况下,ComboBox只能选择一个项。 要实现多选功能,我们可以利用ExtJS的`multiSelect`配置...

    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