jqgrid 每行添加操作按鈕 幾種方式

方法一、使用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>" ; }
}

 

 

單雙引號問題不生效可以使用下面的return

function formatBtn(cellValue, grid, rows, state) { // cellvalue表示當前單元格的值
if (cellValue == 'actived') {
return "未鎖定,無需解鎖";
} else {
return '<a class="fa fa-edit" href="javascript:unLock(\''+rows.userId+'\')">解鎖</a>';
}
}

 

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}'
                                    }]
                                } ]

效果圖：