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 == 13) {
                $("#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() - 130,
            autowidth: true,
            colModel: [
                { label: '編碼', name: 'clid', index: 'clid', width: 80, align: 'left', hidden: false ,key:true },
                { label: '車身編碼', name: 'vehicle_code', index: 'vehicle_code', width: 100, align: 'left', hidden: false },
                { label: '車牌號碼', name: 'cph', index: 'cph', width: 100, align: 'left' },
               
                {
                    label: '啟用', name: 'flag', index: 'flag', width: 45, align: 'center',
                    formatter: function (cellvalue, options, rowObject) {
                        if (cellvalue == '0') return "<img onclick='imgClick(\"" + options.rowId +"\",0)' src='../../Content/Images/Icon16/accept.png'/>";
                        if (cellvalue == '1') return "<img onclick='imgClick(\"" + options.rowId + "\",0)' src='../../Content/Images/Icon16/cross_shield.png'/>";
                    },
                },
                {
                    label: '詳情', name: '', index: 'operate', width: 50, 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: 30,
            rowList: [30, 50, 100, 500, 1000],
            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() - 178);
        });
    }

    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, 2, 'success');
            }
            else
            {
                tipDialog(Data.Message, 2, '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", "車輛詳情", 750, 300, 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 == 0)
                {
                    entity.FLAG = entity.FLAG == 0 ? 1 : 0;

                }

                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'/>";