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

最新推荐文章于 2024-08-31 07:38:37 发布

hwq_1987

最新推荐文章于 2024-08-31 07:38:37 发布

阅读量1.6w

点赞数

文章标签： extjs ext function button header input

本文链接：https://blog.csdn.net/hwq1987/article/details/6359604

版权

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

分类： web前端技术

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
            },
                    ...
                 ]
                );

作者：hacker507

来源：整理