EXT--ExtJs4_grid获取checkbox的值

开发者博客：www.developsearch.com

 

 

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' onclick=oneclick(this) id='adds_checkbox_'"+value+"></input>"; 
} 
//上面的oneclick方法定义在Ext.onReady()外面 
var cm = new Ext.grid.ColumnModel(  
    [    
        
        {//自定义的多选列 
            header:"<input id='allcheckbox' type='checkbox' onclick=checkall(this)></input>", 
            dataIndex:'addsid', 
            renderer:changeCheck, 
            width:20, 
            sortable:false 
        }, 
                ... 
             ] 
            );

 

 

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' onclick=oneclick(this) id='adds_checkbox_'"+value+"></input>"; 
} 
//上面的oneclick方法定义在Ext.onReady()外面 
var cm = new Ext.grid.ColumnModel(  
    [    
        
        {//自定义的多选列 
            header:"<input id='allcheckbox' type='checkbox' onclick=checkall(this)></input>", 
            dataIndex:'addsid', 
            renderer:changeCheck, 
            width:20, 
            sortable:false 
        }, 
                ... 
             ] 
            );

 

开发者博客：www.developsearch.com