原文出处:http://hi.baidu.com/jingminglang/item/0e6beef35af7580684d27891
grid每列前面加checkbox: (我用的而是第一种,后台一个string数组接受就可以了)
一般的grid使用一个Ext.grid.ColumnModel就可以了,要加入一个多选的列, 一种方法是加入一个多选列模板Ext.grid.CheckboxSelectionModel:var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel(
[
sm,
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
]
);
另外,实例化EditorGridPanel时还必须指定这个sm为selModel.
如果不指定EditorGridPanel的selModel,将无法勾选checkbox。
grid = new Ext.grid.rGridPanel(
{
id:'editGridTestAjax',
width:700,
height:500,
el:'topic-grid',
store:ds,
cm:cm,
clickToEdit:2,//双击后进入编辑状态
selModel:sm //这个 selModel 可简写为sm
}
); 获取checkbox的值 function modfiy(){ if (grid.getSelectionModel().hasSelection()){ var records=grid.getSelectionModel().getSelections(); var mycars=new Array(); for(var i=0;i<records.length;i++){ mycars[i]=records[i].data.xwbh; } alert(mycars.length); return mycars }else{ alert('请选中要操作的记录!'); } }; function deleteall(){ var values=modfiy(); Ext.MessageBox.confirm( "请确认", "是否要删除选中信息", function(button,text){ if(button=='yes'){ Ext.Ajax.request({url:'news_query.do', method:'post', params:{values:values'}, success:function(req){ var responseObj = Ext.util.JSON.decode(req.responseText); if(responseObj.success == 'true'){ Ext.Msg.alert("成功提示", responseObj.infor); }else{ Ext.Msg.alert("错误提示", responseObj.infor); return; } } }); }else{ return; } }); } //处理checkbox的勾选事件
grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r){
alert('勾选了checkbox后,获得选中行的name:'+grid.store.getAt(rowIdx).get('name'));
});
//处理checkbox的取消勾选事件
grid.getSelectionModel().on('rowdeselect', function(sm, rowIdx, r){
alert('取消勾选checkbox后,获得的record 中的name:'+grid.store.getAt(rowIdx).get('name'));
});
另一种方法是在ColumnModel中自己写一个checkbox列
function changeCheck(value,cellmeta,record,rowIndex,columnIndex,store){
return "<input type='checkbox' name='adds_checkbox' οnclick=oneclick(this) id='adds_checkbox_'"+value+"></input>";
}
//上面的oneclick方法定义在Ext.onReady()外面
var cm = new Ext.grid.ColumnModel(
[
{//自定义的多选列
header:"<input id='allcheckbox' type='checkbox' οnclick=checkall(this)></input>",
dataIndex:'addsid',
renderer:changeCheck,
width:20,
sortable:false
},
...
]
);
亦或这样写:
我在用到这部分知识的时候是这样写的:
var sm = new Ext.grid.CheckboxSelectionModel({
//singleSelect: true,
listeners:{
//选中
'rowselect': function (grid,rowIndex,e) {
//使用这种方法会在先点击最后一组数据的时候报错
//var row=grid.getSelections();
//var val=row[rowIndex].get('id');
var grid = Ext.getCmp('shopGrid');
var val = grid.getStore().getAt(rowIndex).get('id');
sendUsersId.push(val);//存放用户id
//alert(sendUsersId.toString());
},
//取消选中
'rowdeselect': function (grid, rowIndex, e) {
var grid = Ext.getCmp('shopGrid');
var val=grid.getStore().getAt(rowIndex).get('id');
sendUsersId.remove(val);//移除用户id
//alert(sendUsersId.toString());
}
}
});