转自:http://blog.csdn.net/simaweier/article/details/8111923
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;
}
});
}
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());
}
}
});