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

原文出处: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());
            }
        }
    });



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值