`
ssxxjjii
  • 浏览: 950959 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext的CheckboxSelectionModel默认选中

    博客分类:
  • EXT
 
阅读更多

说明:勾选某几条记录后,翻页再翻回来,保持原来的选中状态。

原理:在勾选或取消勾选的时候用recordIds保存或删除勾选中的Record的主键id值,
   每次store加载(load事件)完后,遍历store,比较每条Record的主键列id是否在recordIds中,
   若存在则将Record保存到临时变量records中,最后调用selMod.selectRecords(records, true);
   
写Array的remove与contains方法,搞得有点像java.util.HashSet(不让Array存重复值)

Js代码  收藏代码
  1. function RemoveArray(array,attachId){  
  2.     for(var i=0,n=0;i<array.length;i++){  
  3.         if(array[i]!=attachId){  
  4.             array[n++]=array[i]  
  5.         }  
  6.     }  
  7.     array.length -= 1;  
  8. }  
  9. function containsArray(array,attachId){  
  10.     for(var i=0;i<array.length;i++){  
  11.         if(array[i]==attachId){  
  12.             return true;  
  13.             break;  
  14.         }  
  15.     }  
  16.    return false;  
  17. }   
  18. Array.prototype.remove = function (obj) {  
  19.     return RemoveArray(this,obj);  
  20. };   
  21. Array.prototype.contains = function (obj) {  
  22.     return containsArray(this,obj);  
  23. };   

 

Js代码  收藏代码
  1. var recordIds=new Array();// 选中的Record主键列id列表  
  2. var recordsChecked=new Array();// 选中的Record列表  
  3.   
  4. var store = new Ext.data.JsonStore({  
  5.                 url : 'viewXXX.do',  
  6.                 pruneModifiedRecords : true,  
  7.                 totalProperty : 'totalProperty',  
  8.                 root : 'root',  
  9.                 fields : [{name : 'id'},   
  10.                           {name : 'status'}  
  11.                           ],  
  12.                 listeners : {  
  13.                     load : function() {  
  14.                         var records = new Array();  
  15.                         store.each(function(record) {  
  16.                             if (recordIds.contains(record.data.id))  
  17.                                  records.push(record);  
  18.                         });  
  19.                         selMod.selectRecords(records, true);// 以后每次load数据时,都会默认选中  
  20.                     }  
  21.                 }  
  22.             });  
  23.       
  24.     var selMod = new Ext.grid.CheckboxSelectionModel({  
  25.         handleMouseDown : Ext.emptyFn,  
  26.                 listeners : {  
  27.                     "rowdeselect" : {  
  28.                         fn : function(e, rowIndex, record) {  
  29.                             if (recordIds.contains(record.data.id)) {  
  30.                                 recordIds.remove(record.data.id);  
  31.                                 recordsChecked.remove(record);  
  32.                             }  
  33.                         }  
  34.                     },  
  35.                     "rowselect" : {  
  36.                         fn : function(e, rowIndex, record) {  
  37.                             if (!recordIds.contains(record.data.id))  
  38.                                 recordIds.push(record.data.id);  
  39.                             recordsChecked.push(record);  
  40.                         }  
  41.                     }  
  42.                 }  
  43.             });  
分享到:
评论

相关推荐

    ExtJs grid多选时获取选中的所有值

    为了获取选中行的所有值,可以使用`CheckboxSelectionModel`提供的方法`getSelections()`。该方法返回一个包含所有选中行记录的数组。下面的示例代码展示了如何在Grid中获取所有选中行的数据。 ```javascript ...

    EXT学习心得,ext

    记住,在使用CheckboxSelectionModel时,必须明确指定`sm: sm2`,否则默认为单选模式。 #### 下拉框事件处理 在EXT中,下拉框(ComboBox)的事件处理可以通过`on`方法绑定事件监听器。例如,当`bankFullName`...

    Ext常用功能开发总结

    利用`selModel`的`checked`属性,可以在初始化时指定哪些行默认被选中。 #### 表格顶端工具条 通过`dockedItems`配置,添加`Ext.toolbar.Toolbar`到表格顶部,可包含按钮、下拉框等元素。 #### 表格底端工具条 与...

    Ext2.0示例讲解

    扩展到更复杂的需求,例如在表格中添加CheckBox选中功能,可以创建一个CheckboxSelectionModel并将其添加到ColumnModel中: ```javascript var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid...

    grid js 例子一个 ext 的

    - **Ext.BLANK_IMAGE_URL**:设置 Ext JS 的默认空白图片路径。 - **Ext.QuickTips.init()**:初始化快速提示功能。 - **CheckboxSelectionModel**:创建一个复选框选择模型,允许用户多选行。 - **ColumnModel**:...

    Ext TreePanel

    【Ext TreePanel】是Ext JS库中的一个组件,主要用于展示层次结构的数据,比如文件系统、组织结构等。TreePanel提供了一种交互式的树形视图,用户可以通过展开、折叠节点来查看和操作数据。 在Ext JS中,TreePanel...

    Ext框架的Grid使用介绍

    3. **列配置**:EXT JS的列配置允许设置列的显示方式,如模板列(TemplateColumn)可以自定义显示内容,检查列(CheckboxSelectionModel)用于复选选择,编辑列(Editing)支持单元格级别的编辑。 4. **功能扩展**...

    Ext2.0框架的grid使用

    var sm = new Ext.grid.CheckboxSelectionModel(); ``` 2. **整合到ColumnModel**:将CheckBoxSelectionModel添加至ColumnModel中: ```javascript var cm = new Ext.grid.ColumnModel([ new Ext.grid....

    Ext2[1].0框架的Grid使用介绍

    var sm = new Ext.grid.CheckboxSelectionModel(); // 更新ColumnModel var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), // 自动行号 sm, // 添加CheckBox选择模型 { header: '编号', ...

    弥补ExtJs CheckboxSelectionModel不能级联的自定义控件

    然而,原生的CheckboxSelectionModel并不支持级联选择,即选中父级复选框时,其子级复选框不会自动被选中。这在处理层级数据时可能会带来不便。 这篇名为"弥补ExtJs CheckboxSelectionModel不能级联的自定义控件"的...

    Ext2.0框架的Grid使用介绍

    var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header: '编号', dataIndex: 'id'}, {header: '性别', dataIndex: 'sex'}, {...

    第三方控件Coolite使用教程

    为了在表格中添加CheckBox选中功能,我们需要创建一个CheckboxSelectionModel实例,并将其添加到ColumnModel中: ```javascript var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid....

    combobox Ext之扩展组件多选下拉框

    - 如果需要在下拉列表中显示复选框,可以使用`checkboxSelectionModel`作为列表的`selModel`,并根据需要配置相关属性,如`showHeader`(是否显示列头,列头中包含复选框)。 5. **值的管理**: - `value`:多选...

    ext 代码生成器

    4. **CheckboxSelectionModel(sm)**:这是EXTJS中的选择模型,允许用户通过复选框选择行。 5. **ColumnModel(cm)**:定义了grid的列结构,包括列的ID、标题、数据源、是否可排序、宽度以及编辑器。编辑器使用了不同...

    JSP+EXt2.0实现分页的方法

    var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'编号',dataIndex:'id',sortable:true}, {header:'名称',dataIndex:'name',...

    Extjs Grid 用法 pdf版

    var sm = new Ext.grid.CheckboxSelectionModel(); // 定义 ColumnModel var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), // 自动行号 sm, // 添加 CheckBox {header: '编号', dataIndex: 'id...

    extjs打印功能

    ExtJS 提供了多种方式来实现打印功能,本文将重点介绍如何通过 ExtJS 实现选中列的打印。 #### 二、打印功能的实现原理 在 ExtJS 中实现打印功能主要依赖于浏览器的打印功能以及对数据网格的处理。具体来说,可以...

    asp.net Ext grid 显示列表

    var sm = new Ext.grid.CheckboxSelectionModel(); // 定义列模型 var cm = new Ext.grid.ColumnModel([ sm, // 复选框列 new Ext.grid.RowNumberer({ header: "自动显示行号", width: 100 }), // 行号列 { ...

    Extjs 增删改查

    - `sm`:选择模型(Selection Model),默认为CheckboxSelectionModel,允许多选。 2. **ColumnModel 配置** - `cmDataArrayBefore`:定义Grid最左侧的列配置,如行号列和选择列。 - `cmDataArray`:包含自定义...

Global site tag (gtag.js) - Google Analytics