1. 程式人生 > 實用技巧 >jqgrid 每行新增操作按鈕 幾種方式

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


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

效果圖: