ext grid 如果设定了复选框,他自动会有个功能,就是全选,但是当翻页的时候全选框的状态没有随着更新,而是停留在上次操作的状态,这个问题可以通过修改源码或者重写CheckboxSelectionModel,以下是源码
/*
* Ext JS Library 2.2.1 Copyright(c) 2006-2009, Ext JS, LLC. licensing@extjs.com
*
* http://extjs.com/license
*/
/**
* @class Ext.grid.CheckboxSelectionModel
* @extends Ext.grid.RowSelectionModel A custom selection model that renders a
* column of checkboxes that can be toggled to select or deselect rows.
* @constructor
* @param {Object}
* config The configuration options
*/
Ext.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, {
hdCheckAllId:'kaka-hd-check-all-id',
/**
* @cfg {String} header Any valid text or HTML fragment to display
* in the header cell for the checkbox column (defaults to
* '<div class="x-grid3-hd-checker"> </div>'). The
* default CSS class of 'x-grid3-hd-checker' displays a
* checkbox in the header and provides support for automatic
* check all/none behavior on header click. This string can be
* replaced by any valid HTML fragment, including a simple text
* string (e.g., 'Select Rows'), but the automatic check
* all/none behavior will only work if the 'x-grid3-hd-checker'
* class is supplied.
*/
header : '<div class="x-grid3-hd-checker" kaka-hd-Check-All-Id="kaka-hd-Check-All-Id" > </div>',
/**
* @cfg {Number} width The default width in pixels of the checkbox
* column (defaults to 20).
*/
width : 20,
/**
* @cfg {Boolean} sortable True if the checkbox column is sortable
* (defaults to false).
*/
sortable : false,
// private
menuDisabled : true,
fixed : true,
dataIndex : '',
id : 'checker',
// private
initEvents : function() {
//alert(this.hdCheckAllId);
this.hdCheckAllId = this.grid.getId()+"-hdCheckAllId";
this.header = this.header.replace('"kaka-hd-Check-All-Id"',this.hdCheckAllId);
Ext.grid.CheckboxSelectionModel.superclass.initEvents
.call(this);
this.grid.on('render', function() {
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown,
this);
Ext.fly(view.innerHd).on('mousedown',
this.onHdMouseDown, this);
}, this);
this.on('selectionchange', function(sm_) {
// alert(sm_.getCount()+"/"+thisGrid.pageSize);
var checker = Ext.DomQuery
.selectNode('div[kaka-hd-Check-All-Id='+this.hdCheckAllId+']');
//alert(checker);
if (checker && checker.parentNode) {
var hd = Ext.fly(checker.parentNode);
if (hd && hd.addClass) {
if (sm_.getCount() == this.grid.getStore()
.getCount()) {
hd.addClass('x-grid3-hd-checker-on');
} else {
hd.removeClass('x-grid3-hd-checker-on');
}
}
}
});
},
// private
onMouseDown : function(e, t) {
if (e.button === 0 && t.className == 'x-grid3-row-checker') { // Only
// fire
// if
// left-click
e.stopEvent();
var row = e.getTarget('.x-grid3-row');
if (row) {
var index = row.rowIndex;
if (this.isSelected(index)) {
this.deselectRow(index);
} else {
this.selectRow(index, true);
}
}
}
},
// private
onHdMouseDown : function(e, t) {
if (t.className == 'x-grid3-hd-checker') {
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if (isChecked) {
hd.removeClass('x-grid3-hd-checker-on');
this.clearSelections();
} else {
hd.addClass('x-grid3-hd-checker-on');
this.selectAll();
}
}
},
// private
renderer : function(v, p, record) {
return '<div class="x-grid3-row-checker"> </div>';
}
});
分享到:
相关推荐
标题提到的“解决EXT下拉列表全选和去全选功能”是一个常见的需求,特别是在数据表格或下拉列表中进行批量操作时。下面我们将深入探讨EXTJS中实现这一功能的方法。 EXTJS的下拉列表通常由`Ext.form.field.ComboBox`...
这段代码确保了每次单个复选框状态改变时,都会检查并更新全选复选框的状态。 同时,为了在全选复选框被点击时同步所有其他复选框的状态,我们还需要在全选复选框的`click`事件中操作: ```javascript // 获取全选...
EXT JS提供行选择模式,如单选、多选和全选。 6. **视图配置**:Grid的视图配置可以调整行高、行间距、鼠标悬停效果等,以优化用户体验。例如,stripeRows参数可以使行交替显示不同颜色。 7. **插件支持**:EXT JS...
此外,如果你的项目使用了自定义的主题或者CSS,可能还需要通过CSS覆盖样式来彻底隐藏全选框,防止因类名改变导致的全选框重新出现。例如,你可以添加以下CSS代码: ```css .x-grid-header-checkbox { display: ...
ExtJS 表格的功能实现,包括单元格编辑,数据的获取。
根据部分提供的代码片段,Ext.grid.CheckboxColumn类通过监听cellclick和headerclick事件来控制选中状态。当点击某一行的CheckBox时,触发onCellClick函数,该函数通过判断列头的masterValue值来改变所有行的...
`Ext-UX-Grid-GridViewMenuPlugin`是一个用于Ext JS框架的用户界面扩展插件,主要功能是增强表格(grid)的菜单功能。这个插件允许开发者为表格的菜单添加自定义事件处理和生成视图,从而提升用户体验并提供更丰富的...
再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...
代码如下:///”./vswd-ext_2.0.2.js”> Ext.onReady(function(){ var data = [ [1,”wilson.fu”,10], [2,”wilson.fu2″,20], [3,”wilson.fu3″,30] ];... } var sm = new Ext.grid.CheckboxSele
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
5.Checkbox用javascript控制全选 6.分页,跳到下一页,记录上一页面Checkbox选中状态 7.清除Checkbox选中状态 8.跳转页面,传参选中的Checkbox对应的姓名 之前是从网上看到的保存checkbox分页选中状态,但是没有传参...
再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!邪魔外道与边缘学科。 10.1. dwr与ext整合 ...
9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!邪魔外道与边缘学科。 10.1. dwr与ext整合 ...
再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
9.3. 带全选的checkbox的grid A. 常见问题乱弹 A.1. 怎么查看ext2里的api文档 A.2. 想把弹出对话框单独拿出来用的看这里 A.3. 想把日期选择框单独拿出来用的看这里 B. 修改日志 C. 后记 C.1. 2007年12月5...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
此功能主要是为了解决当用户在一个分页的Grid中选择某一行后,在翻页时依然保持该行被选中的状态。本文将通过解析提供的代码片段以及结合ExtJS的相关API文档,详细介绍如何实现在ExtJS Grid中的行跨页选中功能。 ##...
再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...