jqgrid 加按钮列

1、在jqgrid表格中增加列，内容是图标，定义图标单击事件，可以操作这一行的数据，如下图

2、前台代码

<div id="grid_List">

    <table id="gridTable" class="datatable"></table>

    <div id="gridPager"></div>

</div>

3、js代码

<script type="text/javascript">

    $(document).ready(function () {

        GetGrid();

        //绑定键盘按下事件

        $(document).keypress(function (e) {

            //回车键事件

            if (e.which == ) {

                $("#keywords").focus();

                $("#keywords").select();

                $("#btnSearch").click();

            }

        });

    });

    //加载表格

    function GetGrid() {

        var SelectRowIndx;

        $("#gridTable").jqGrid({

            url: "@Url.Content("~/Vehicle/Vehicle/GridPageListJson")",

            datatype: "json",

            mtype: 'POST',

            height: $(window).height() - ,

            autowidth: true,

            colModel: [

                { label: '编码', name: 'clid', index: 'clid', width: , align: 'left', hidden: false ,key:true },

                { label: '车身编码', name: 'vehicle_code', index: 'vehicle_code', width: , align: 'left', hidden: false },

                { label: '车牌号码', name: 'cph', index: 'cph', width: , align: 'left' },

                {

                    label: '启用', name: 'flag', index: 'flag', width: , align: 'center',

                    formatter: function (cellvalue, options, rowObject) {

                        if (cellvalue == '') return "<img onclick='imgClick(\"" + options.rowId +"\",0)' src='../../Content/Images/Icon16/accept.png'/>";

                        if (cellvalue == '') return "<img onclick='imgClick(\"" + options.rowId + "\",0)' src='../../Content/Images/Icon16/cross_shield.png'/>";

                    },

                },

                {

                    label: '详情', name: '', index: 'operate', width: , align: 'center',

                    formatter: function (cellvalue, options, rowObject) {

                        var detail="<img  onclick='btn_detail(\""+ rowObject.clid + "\")'' title='详细信息' src='../../Content/Images/Icon16/application_view_detail.png' style='padding:0px 10px'>";

                        return detail;

                    },

                },

            ],

            viewrecords: true,

            rowNum: ,

            rowList: [, , , , ],

            pager: "#gridPager",

            sortname: 'CLID',

            sortorder: 'desc',

            rownumbers: true,

            shrinkToFit: true,

            gridview: true,

            //multiselect: true,

            onSelectRow: function () {

                SelectRowIndx = GetJqGridRowIndx("#" + this.clid);

            },

            gridComplete: function () {

                //LoadViewList();

                //$("#" + this.id).jqGrid('setSelection', SelectRowIndx);

            }

        });

        //自应高度

        $(window).resize(function () {

            $("#gridTable").setGridHeight($(window).height() - );

        });

    }

    function imgClick(rowid,type)

    {

        if(rowid=="")

            return;

        AjaxJson("//Vehicle/Vehicle/ChangeState", { id:rowid,type:type}, function (Data) {

            if (Data.Success == true) {

                $("#gridTable").setCell(rowid, 'flag', Data.entity.FLAG);

                tipDialog(Data.Message, , 'success');

            }

            else

            {

                tipDialog(Data.Message, , 'warning');

            }

        });

    }

    //明细

    function btn_detail(id) {

        var KeyValue = GetJqGridRowValue("#gridTable", "clid");

        if (id!=null) {

            KeyValue=id;

        }

        if (IsChecked(KeyValue)) {

            var url = "/Vehicle/Vehicle/Detail?KeyValue=" + KeyValue;

            Dialog(url, "Detail", "车辆详情", , , function (iframe) {

                top.frames[iframe].AcceptClick();

            });

        }

    }

</script>

4、后台代码

  //用户审核及启用

        public ActionResult ChangeState(string id, int type)

        {

            if (string.IsNullOrEmpty(id))

            {

                return Content(new JsonMessage { Success = false, Code = "-1", Message = "车辆id为空." }.ToString());

            }

            try

            {

                SYS_AMBUL_INFO entity = base_ambll.Repository().FindEntity(id);

                //启用、未启用

                if (type == )

                {

                    entity.FLAG = entity.FLAG ==  ?  : ;

                }

                else

                    return null;

                int IsOk = base_ambll.Repository().Update(entity);

                return Content(new JsonMessage { Success = true, entity = entity, Message = "操作成功" }.ToString());

            }

            catch (Exception ex)

            {

                return Content(new JsonMessage { Success = false, Code = "-1", Message = "操作失败：" + ex.Message }.ToString());

            }

        }

5、注意点：

5.1  由于数据库主键字段不是id，而是clid。所以前台colModel要设置列clid的key:true

{ label: '编码', name: 'clid', index: 'clid', width: 80, align: 'left', hidden: false },

如果不设置，这样在前端获取rowid的时候就一直获取到的是序号，效果如下：

{ label: '编码', name: 'clid', index: 'clid', width: 80, align: 'left', hidden: false ,key:true },

5.2  由于clid是前面带0的数字，在传值时要转换为字符串，不然传值会不准确

在options.rowId左右加双引号

return "<img onclick='imgClick(\"" + options.rowId +"\",0)' src='../../Content/Images/Icon16/accept.png'/>";