jqgrid 每行添加操作按钮几种方式

时间：2020-11-20 15:06:43 收藏：0 阅读：174

方法一、使用formatter （摘自连接https://blog.csdn.net/sugarfengye/article/details/79894927）

1、JqGrid代码

colModel: [

{ label: ‘操作‘, name: ‘state‘, index: ‘state‘, width: 50, edittype: "button", formatter: cmgStateFormat},

]

2、根据state的值显示button

function cmgStateFormat(cellValue,grid, rows, state) {

if(cellValue== 1){

return "<button class=‘btn btn-primary ‘ οnclick= \" change (" + rows. cmgId+ ","+cellValue + ") \" >上架</button>" ; } else{

return "<button class=‘btn btn-warning ‘ οnclick= \" change (" + rows. cmgId+ ","+cellValue + ") \" >下架</button>" ; }

}

3、发送请求后台数据动态根据id修改state

function change(id,state) {
confirm2( ‘确定要上架或下架？‘,
function () { 
$. get( url+/"+ id+ "/"+state, function (r) {
     if (r. code == 0) { 
            alert( ‘操作成功‘, function (index) { $( "#jqGrid"). trigger( "reloadGrid"); });
      } else {
      alert(r. msg);
     }
});
});
}

4、效果

方法二、使用formatter 、formatoptions

                      colModel:   [{
                                    name : ‘__manage‘,
                                    width : 30,
                                    sortable:false,
                                    classes:‘rowOps‘,
                                    formatter : ‘manage‘,
                                    formatoptions :[{
                                        lable:‘编辑‘,
                                        classes:‘btn btn-primary fa fa-edit‘,
                                        action:__ctx+‘/platform/xxx/xxx/edit.htm?id={id}‘
                                    },{
                                        lable:‘删除‘,
                                        classes:‘btn btn-primary fa fa-remove‘,
                                        action:__ctx+‘/platform/xxx/xxx/remove.htm?id={id}‘
                                    },{
                                        lable:‘明细‘,
                                        classes:‘btn btn-primary fa fa-detail‘,
                                        action: __ctx+‘/platform/xxx/xxx/get.htm?id={id}‘
                                    }]
                                } ]

效果图：

技术分享图片

原文：https://www.cnblogs.com/rdchen/p/14010185.html

jqgrid 每行添加操作按钮 几种方式

1、JqGrid代码

2、根据state的值显示button

3、发送请求后台数据动态根据id修改state

4、效果

jqgrid 每行添加操作按钮几种方式