首页 > 其他 > 详细

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

时间:2020-11-20 15:06:43      阅读:169      评论:0      收藏:0      [点我收藏+]

方法一、使用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}‘
                                    }]
                                } ]

效果图:

技术分享图片

 

 

 
 
 
 

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!