extjs中grid中checkbox的用法,ext中grid获取checkbox的值

转自: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());

        }

    }

});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值