ext的强大是可以看见的，这里我在网上找了一个经过扩展的grid，主要可以实现，分页后保存checkbox的选择状态。代码如下
/**
* 封装的grid
* 功能:分页后仍保持选中状态
* 约定:root为list, totalProperty为total, grid的第一列必须为id
*/
Ext.namespace('Ext.ux.grid');
Ext.ux.grid.MyGrid = Ext.extend(Ext.grid.GridPanel,{
/*
* true to keep the records selected when you paging
* @default(false)
* @type: boolean
*/
keepSelectedOnPaging: false,
/*
* the array to store the record id
* @type: array
*/
recordIds:new Array(),
/*
* set your id Column Name
* @default : this.CM_JR_Record[0].dataIndex
*/
idColName:'',
/*
* set this.store.load url;
* @type: string
*/
url: '',
/*
* show the rowNumber or not
* @type: boolean
* @default: true
*/
rowNumber : true,
/*
* set the grid sm,if checkBoxSelection=true,sm=CheckBoxSelectionModel
* else sm=RowSelectionModel,default to true;
* @type: boolean
*/
checkBox: true,
/*
* set the grid cm array;
* set the JsonReader record;
*
* format: [{name:'',header:'',visiable:'',...another cm options},{}],
* @name=dataIndex
* @visiable: set this record to the cm(grid header) default(true)
* @type: array (records)
*/
CM_JR_Record: null,
/*
* true to add a bottom paging bar
* @defalut: true
* @type: boolean
*/
pagingBar: true,
/*
* config paging bar if pagingBar set true
* @type: object
* @default: {pageSize: 20,store: this.store,displayInfo: true,
* displayMsg: '当前记录数: {0} - {1} 总记录数: {2}',
* emptyMsg: '<b>0</b> 条记录'}
*/
pagingConfig:{
pageSize: 15,
store: this.store,
displayInfo: true,
displayMsg: "显示第 {0} 条到 {1} 条记录，一共 {2} 条",
emptyMsg: '<b>0</b> 条记录',
},
viewConfig:{
forceFit: true
},
//private
initComponent: function(){
if(this.CM_JR_Record){
this.init_SM_CM_DS();
}
if(this.pagingBar){
this.init_PagingBar();
}
if(this.keepSelectedOnPaging){
this.init_OnPaging();
}
Ext.ux.grid.MyGrid.superclass.initComponent.call(this);
},
/*
* init the grid use the config options
* @return: void
* @params: none
*/
init_SM_CM_DS: function(){
var gCm = new Array();
var gRecord = new Array();
if(this.rowNumber){
gCm[gCm.length]=new Ext.grid.RowNumberer();
}
if(this.checkBox){
var sm = new Ext.grid.CheckboxSelectionModel();
gCm[gCm.length] = sm;
this.selModel = sm;
}
for(var i=0;i<this.CM_JR_Record.length;i++)
{
var g = this.CM_JR_Record[i];
if(g.visiable || g.visiable=='undefined' || g.visiable==null){
gCm[gCm.length] = g;
}
gRecord[gRecord.length]={
name: g.dataIndex,
type: g.type || 'string'
}
}
//create grid columnModel
this.cm = new Ext.grid.ColumnModel(gCm);
this.cm.defaultSortable = true;
//create a jsonStore
this.store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: this.url,
method: 'post'
}),
reader:new Ext.data.JsonReader({
totalProperty: 'total',
root: 'list'
},
Ext.data.Record.create(gRecord)
)
});
this.pagingConfig.store = this.store;
if(this.pagingBar){
this.store.load({params:{start:0,limit:this.pagingConfig.pageSize}});
}else{
this.store.load();
}
},
/*
* 创建并初始化paging bar
*/
init_PagingBar: function(){
var bbar = new Ext.PagingToolbar(this.pagingConfig);
this.bbar = bbar;
},
init_OnPaging: function(){
this.idColName = this.CM_JR_Record[0].dataIndex ;//默认第一列为ID列
this.selModel.on('rowdeselect',function(selMdl,rowIndex,rec ){
for(var i=0;i<this.recordIds.length;i++)
{
if(rec.data[this.idColName] == this.recordIds[i]){
this.recordIds.splice(i,1);
return;
}
}
},this);
this.selModel.on('rowselect',function(selMdl,rowIndex,rec){
if(this.hasElement(this.recordIds)){
for(var i=0;i<this.recordIds.length;i++){
if(rec.data[this.idColName] == this.recordIds[i]){
return;
}
}
}
this.recordIds.unshift(rec.data[this.idColName]);
},this);
this.store.on('load',function(st,recs){
if(this.hasElement(this.recordIds)){
st.each(function(rec){
Ext.each(this.recordIds,function(item,index,allItems){
if(rec.data[this.idColName] == item){
this.selModel.selectRecords([rec],true);
return false;
}
},this);
},this);
}
},this);
},
hasElement : function(recIds){
if(recIds.length > 0)
return true;
else
return false;
}
}
)
//**************************这是个demo*****************
var CM_JR_Record = [
{
dataIndex:"id",
visiable: false//不显示，反之为显示
},{
dataIndex:"accid",
header:"发布人ID",
visiable: true
},{
header: '标题',
width: 80,
dataIndex: 'bt',
visiable: true
}, {
header: '发布时间',
width: 80,
dataIndex: 'fbsj',
visiable: true
}, {
header: '发布人员',
width: 80,
dataIndex: 'fbry',
visiable: true
}, {
header: '审核',
width: 80,
dataIndex: 'sh',
visiable: true
}, {
header: '审核人员',
width: 80,
dataIndex: 'shry',
visiable: true
}, {
header: '审核时间',
width: 80,
dataIndex: 'shsj',
visiable: true
}, {
header: '点击数',
width: 80,
dataIndex: 'snum',
visiable: true
}];
var myGrid = new Ext.ux.grid.MyGrid({
url : '/ecommerce/findAllBulletin.action', // the store load url (required)
CM_JR_Record: CM_JR_Record, //.....(required)
rowNumber:true, //true to add a Ext.grid.RowNumberer,defalut(true)
checkBox:true, //true to add a Ext.grid.CheckBoxSelectionModel,default(true)
pagingBar:true, //true to add a Ext.PagingToolBar,default(true)
// pagingConfig:objcet, //config pagingToolBar if pagingBar is true
keepSelectedOnPaging: true, //true to FireEvent when you paging to keep the state of record selected
recordIds : new Array() , // store seleced ids when keepSelectedOnPaging is true
idColName :'id', //the id column name
width : 700,
height: 600,
renderTo: 'editor-grid',
tbar: [{
id : 'Add',
text : ' 新建 ',
tooltip : '新建一个表单',
iconCls : 'add',
pageSize: 15,
handler : function(){
ptb_bt1();
}
},{
text: '删除所选',
iconCls:'remove',
tooltip : '删除所选数据',
handler : function(){
//myGrid.recordIds是一个数组，里面存放选中的checkboxid
if(myGrid.recordIds.length == 0){
Ext.MessageBox.alert('提示','请选择一条记录！');
}else{
// 弹出对话框警告
Ext.MessageBox.confirm('确认删除',
'你真的要删除所选用户吗?',
function(btn){
if(btn == 'yes') {// 选中了是按钮
// 调用 DWR, 执行结果成功时方删除所有数据
bulletinService.delBulletin(myGrid.recordIds.toString(), function() {
// 更新界面, 来真正删除数据
Ext.Msg.alert("成功","用户数据删除成功!");
myGrid.recordIds = new Array();
myGrid.store.load({params:{start:0,limit:15}});
});
}
}
);
}
}
}]
});
myGrid.render();
下载地址如下http://download.csdn.net/source/521174
分享到：
相关推荐
通过扩展GridPanel，我们可以定制其行为，使其更适合特定需求。 首先，我们关注的是`cgrid.js`这个文件，它很可能是包含自定义GridPanel扩展的源代码。在这样的文件中，开发者通常会定义一个新的类，继承自Ext.grid...
通过扩展 GridPanel 类或者使用插件（plugins），我们可以实现自定义的功能，比如行拖放、列隐藏、行级锁定等。 10. **性能优化**： 对于大数据量的展示，GridPanel 支持虚拟滚动和行级渲染，这大大减少了内存...
在本文中，我们将深入探讨GridPanel的操作，包括其功能、配置选项以及如何扩展GridPanel以满足复杂需求。 首先，GridPanel是用于显示表格数据的组件，它可以与Ext.data.Store配合使用，Store负责加载和管理数据。...
标题"Gridpanel多表头的扩展"正是针对这一需求，它允许我们在Gridpanel中创建多级列标题，以便更好地组织和理解数据。 多表头在EXTJS 2.2版本中被引入，提供了更灵活的列结构，允许用户将列分为多个层次，每个层次...
这部分源码可能会展示如何扩展GridPanel以实现特定功能。 7. **Eclipse工程**：作为Eclipse工程，这可能是用Java语言开发的EXT应用程序，利用EXT的JavaScript库和Java服务器端技术（如Spring或Struts）进行交互。...
在这个JavaScript文件中，可能包含了扩展GridPanel的方法，比如处理头部渲染、事件监听、数据绑定等逻辑。通过这个插件，开发者可以轻松地在运行时动态调整Grid的列头结构，实现列头的折叠、展开，甚至自定义排序和...
GridPanel的功能可以通过多种方式进行扩展，以适应不同的业务需求。 - **学会自学吧，朋友**: 鼓励读者自主探索和学习GridPanel的相关知识。 - **带摘要的GridPanel**: 介绍了一种带有数据统计摘要的表格展示方式。...
本部分详细介绍了GridPanel的使用，包括列模型、数据管理，以及如何实现分页和扩展GridPanel。 ### 第十七部分：行模型与Grid视图 行模型是GridPanel的重要组成部分，决定数据的行选择方式和数据展示。本部分讲述...
9.3.1 扩展GridPanel 259 9.3.2 配置列模型 259 9.3.3 配置显示数据 260 9.3.4 点缀EasyGrid 261 9.3.5 实现添加一条记录的功能 262 9.3.6 实现修改一条记录的功能 264 9.3.7 实现删除一条记录的功能 266 9.4 从头...
- **RowExpander**：扩展GridPanel的功能，允许用户查看某一行的详细信息。 - **分组GridPanel**：通过`GroupingFeature`特性，实现了按某一列对数据进行分组显示。 通过以上知识点的梳理，我们可以看出Extjs是一款...
#### 第十九章至第二十二章：GridPanel及其扩展 GridPanel是ExtJS中一个极其强大的组件，用于展示和编辑表格数据。从基本的表格面板到复杂的行模型、视图、分页、扩展等功能，学习这些内容可以帮助开发者构建出高度...
### ExtAspNet GridPanel 的一般用法详解 #### 一、简介 在开发Web应用程序时，尤其是在.NET平台上...此外，还可以根据具体需求进一步扩展GridPanel的功能，如增加排序、搜索等功能，使其更加符合实际应用场景的需求。
### Ext GridPanel 中实现加链接操作 在前端开发领域中，Ext JS 是一款非常流行的 JavaScript 框架，用于构建企业级的 Web 应用程序。Ext GridPanel 是该框架中的一个重要组件，常用于展示表格数据。本文将详细介绍...
- **扩展功能**: 如`ColumnResizing`（列宽调整）、`ColumnMoving`（列移动）等。 在实际项目中，你可能还需要处理一些事件，如点击行、编辑数据、分页操作等，这需要使用到`listeners`配置来绑定相应的事件处理器...
4. 实例化GridPanel：配置GridPanel的各种属性，如高度、宽度、是否可拖动列等，然后将Store和ColumnModel传递给GridPanel。 5. 渲染GridPanel：将GridPanel添加到容器中，完成渲染。 在实际应用中，GridPanel还...
### Ext.grid.GridPanel属性详析 #### 一、Ext.grid.GridPanel概述 `Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。...