说明:勾选某几条记录后,翻页再翻回来,保持原来的选中状态。
原理:在勾选或取消勾选的时候用recordIds保存或删除勾选中的Record的主键id值,
每次store加载(load事件)完后,遍历store,比较每条Record的主键列id是否在recordIds中,
若存在则将Record保存到临时变量records中,最后调用selMod.selectRecords(records, true);
写Array的remove与contains方法,搞得有点像java.util.HashSet(不让Array存重复值)
- function RemoveArray(array,attachId){
- for(var i=0,n=0;i<array.length;i++){
- if(array[i]!=attachId){
- array[n++]=array[i]
- }
- }
- array.length -= 1;
- }
- function containsArray(array,attachId){
- for(var i=0;i<array.length;i++){
- if(array[i]==attachId){
- return true;
- break;
- }
- }
- return false;
- }
- Array.prototype.remove = function (obj) {
- return RemoveArray(this,obj);
- };
- Array.prototype.contains = function (obj) {
- return containsArray(this,obj);
- };
- var recordIds=new Array();
- var recordsChecked=new Array();
-
- var store = new Ext.data.JsonStore({
- url : 'viewXXX.do',
- pruneModifiedRecords : true,
- totalProperty : 'totalProperty',
- root : 'root',
- fields : [{name : 'id'},
- {name : 'status'}
- ],
- listeners : {
- load : function() {
- var records = new Array();
- store.each(function(record) {
- if (recordIds.contains(record.data.id))
- records.push(record);
- });
- selMod.selectRecords(records, true);
- }
- }
- });
-
- var selMod = new Ext.grid.CheckboxSelectionModel({
- handleMouseDown : Ext.emptyFn,
- listeners : {
- "rowdeselect" : {
- fn : function(e, rowIndex, record) {
- if (recordIds.contains(record.data.id)) {
- recordIds.remove(record.data.id);
- recordsChecked.remove(record);
- }
- }
- },
- "rowselect" : {
- fn : function(e, rowIndex, record) {
- if (!recordIds.contains(record.data.id))
- recordIds.push(record.data.id);
- recordsChecked.push(record);
- }
- }
- }
- });
分享到:
相关推荐
为了获取选中行的所有值,可以使用`CheckboxSelectionModel`提供的方法`getSelections()`。该方法返回一个包含所有选中行记录的数组。下面的示例代码展示了如何在Grid中获取所有选中行的数据。 ```javascript ...
记住,在使用CheckboxSelectionModel时,必须明确指定`sm: sm2`,否则默认为单选模式。 #### 下拉框事件处理 在EXT中,下拉框(ComboBox)的事件处理可以通过`on`方法绑定事件监听器。例如,当`bankFullName`...
利用`selModel`的`checked`属性,可以在初始化时指定哪些行默认被选中。 #### 表格顶端工具条 通过`dockedItems`配置,添加`Ext.toolbar.Toolbar`到表格顶部,可包含按钮、下拉框等元素。 #### 表格底端工具条 与...
扩展到更复杂的需求,例如在表格中添加CheckBox选中功能,可以创建一个CheckboxSelectionModel并将其添加到ColumnModel中: ```javascript var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid...
- **Ext.BLANK_IMAGE_URL**:设置 Ext JS 的默认空白图片路径。 - **Ext.QuickTips.init()**:初始化快速提示功能。 - **CheckboxSelectionModel**:创建一个复选框选择模型,允许用户多选行。 - **ColumnModel**:...
【Ext TreePanel】是Ext JS库中的一个组件,主要用于展示层次结构的数据,比如文件系统、组织结构等。TreePanel提供了一种交互式的树形视图,用户可以通过展开、折叠节点来查看和操作数据。 在Ext JS中,TreePanel...
3. **列配置**:EXT JS的列配置允许设置列的显示方式,如模板列(TemplateColumn)可以自定义显示内容,检查列(CheckboxSelectionModel)用于复选选择,编辑列(Editing)支持单元格级别的编辑。 4. **功能扩展**...
var sm = new Ext.grid.CheckboxSelectionModel(); ``` 2. **整合到ColumnModel**:将CheckBoxSelectionModel添加至ColumnModel中: ```javascript var cm = new Ext.grid.ColumnModel([ new Ext.grid....
var sm = new Ext.grid.CheckboxSelectionModel(); // 更新ColumnModel var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), // 自动行号 sm, // 添加CheckBox选择模型 { header: '编号', ...
然而,原生的CheckboxSelectionModel并不支持级联选择,即选中父级复选框时,其子级复选框不会自动被选中。这在处理层级数据时可能会带来不便。 这篇名为"弥补ExtJs CheckboxSelectionModel不能级联的自定义控件"的...
var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header: '编号', dataIndex: 'id'}, {header: '性别', dataIndex: 'sex'}, {...
为了在表格中添加CheckBox选中功能,我们需要创建一个CheckboxSelectionModel实例,并将其添加到ColumnModel中: ```javascript var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid....
- 如果需要在下拉列表中显示复选框,可以使用`checkboxSelectionModel`作为列表的`selModel`,并根据需要配置相关属性,如`showHeader`(是否显示列头,列头中包含复选框)。 5. **值的管理**: - `value`:多选...
4. **CheckboxSelectionModel(sm)**:这是EXTJS中的选择模型,允许用户通过复选框选择行。 5. **ColumnModel(cm)**:定义了grid的列结构,包括列的ID、标题、数据源、是否可排序、宽度以及编辑器。编辑器使用了不同...
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',...
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 中实现打印功能主要依赖于浏览器的打印功能以及对数据网格的处理。具体来说,可以...
var sm = new Ext.grid.CheckboxSelectionModel(); // 定义列模型 var cm = new Ext.grid.ColumnModel([ sm, // 复选框列 new Ext.grid.RowNumberer({ header: "自动显示行号", width: 100 }), // 行号列 { ...
- `sm`:选择模型(Selection Model),默认为CheckboxSelectionModel,允许多选。 2. **ColumnModel 配置** - `cmDataArrayBefore`:定义Grid最左侧的列配置,如行号列和选择列。 - `cmDataArray`:包含自定义...