JqGrid参考实例

<div class="gridtable mt5">
    <table id="tbList"></table>
    <div id="tbListPager">
    </div>
</div>




            jQuery("#tbList").jqGrid({
                url: urlPath,//URL地址
                datatype: "json",
                mtype: "POST",
                postData:{ID:123},
                colModel: [
                    { label: "ID", name: "ID", index: "ID", hidden: true, excluded: true },
                    { label: "ServiceTypeID", name: "ServiceTypeID", index: "ServiceTypeID", hidden: true, excluded: true },
                    {
                        label: "Booking No.", bound: true, name: "BookingNumber", index: "BookingNumber",  210, align: "center", resizable: false, formatter: showBookingLink, unformat: function (cellvalue, options, cell) {
                            return $("a", cell).text();
                        }, hidden: convertToBoolean("@(helper.IsColumnHidden("BookingNumber"))")
                    },
                    { label: "Inspection Leader", name: "InspectionLeader", index: "InspectionLeader",  120, align: "center", sortable: false, resizable: false, formatter: InspectionLeaderFormatter, hidden: convertToBoolean("@(helper.IsColumnHidden("InspectionLeader"))") },//formatter格式化单元格内容.
                    {label: "Role in Job", name: "InspectorRole", index: "InspectorRole", align: "center", formatter: function (cellvalue, options, rowObject) {
                        var options = "";
                        if (cellvalue == 1) {
                            options += "<option value=""></option><option value="1" selected>Leader</option><option value="2">Member</option>";
                        } else if (cellvalue == 2) {
                            options += "<option value=""></option><option value="1">Leader</option><option value="2" selected>Member</option>";
                        }
                        else {
                            options += "<option value="" selected></option><option value="1">Leader</option><option value="2">Member</option>";
                        }

                        if ('@isEditable' == "True" && (inspectionDataInput != "" || action == "")) {
                            return "<select style="80px;" onchange="changeInspectorRole('" + rowObject[5] + "','" + rowObject[6] + "','" + rowObject[7] + "', this)">" + options + "</select>";
                        }

                        return "<select style="80px;"  disabled  onchange="changeInspectorRole('" + rowObject[5] + "','" + rowObject[6] + "','" + rowObject[7] + "', this)">" + options + "</select>";
                      }
                    }
                ],
                pager: jQuery("#tbListPager"), //分页控件的id
                gridViewID: '@gridViewID',
                auto true,//自动调整列宽
                hidegrid: false, //是否隐藏grid控件
                rownumbers: false, //在最左边是否显示序列号,自增长的
                rowNum: GRID_ROWNUM, //每页显示的数据量
                rowList: GRID_ROWLIST, //可以改变每页的显示数量，以dropdown列出。
                sortname: "SubmittedDate", //默认的排序字段
                sortorder: "DESC", //默认的排序方式
                viewrecords: true, //是否显示总记录数。
                height: "100%", //高度.
                sortable: true,
                loadError: function (xhr, status, error) { alert(GRID_ERRORMESSAGE); },
                 "3900", //宽度
                imgpath: "/Content/themes/base/images", //CSS中用到的图片地址
                caption: "Previous Report Reference", //显示在Grid左上角的名称。
                alterColor: true,
                multiselect: false, //是否允许选择多行带第一列带checkbox
                shrinkToFit: true,
                showSelectBox: false,
                exportName: "SchedulingBookingList",
                loadComplete: function () {
                    rowEventHandle();
                },//JqGrid加载完成后执行
                onSelectRow: function (id) {
                if (parseFloat(chooseLevel) > 1) { //可选择地址
                    $("#divAddress").show();
                    $("#divContact").hide();
                    var result = $("#tbCustomerList").jqGrid("getRowData", id);
                    loadCustomerAddress(result.CustomerID);
                }
            }


            });







        function rowEventHandle(){}
        function changeInspectorRole(){}





        //格式化JqGrid单元格内容（显示成带图片的超链接）
        function showBookingLink(cellvalue, options, rowObject) {
            var imgStr = "";
            if (rowObject[7] == "True" || rowObject[7] == "true")
                imgStr = imgStr + "<img src="../Content/images/firstinspection.png" title="First Inspection" data-name="firstinspection" />&nbsp;&nbsp;";

            if (rowObject[46] == "True" || rowObject[46] == "true")
            {
                imgStr = imgStr + "<img src="../Content/images/reinspection.png" title="Re-Inspection"  />&nbsp;&nbsp;";
            }

            return imgStr + "<a href="javascript:void(0)" onclick="showSubMenu(11100, viewBookingDetail,'" + rowObject[0] + "')">" + cellvalue + "</a>";
        }






        function InspectionLeaderFormatter(cellvalue, options, rowObject) {
            if (String(rowObject[8]).toLowerCase() == "true" || $("span[functionidattribute=100201]").is(":hidden")) {
                return "<input type="text" name="InspectionLeader" style="100%" title="" + cellvalue + "" value="" + cellvalue + "" class="readonly-bgcolor" readonly />";
            }

            var searchInspectorStr = getSearchInspectorHTML(rowObject, "0");
            var countryCode = rowObject[1];

            var cellValueFormatStr = "<input type="text" name="InspectionLeader" maxlength="50" style="85%" title="" + cellvalue + "" onchange="CheckInspectorValid(this, this.value, '" + countryCode + "')" value="" + cellvalue + "" />";
            return cellValueFormatStr + searchInspectorStr;
        }



        //加载/刷新JqGrid
        function QueryList() {
            jQuery("#tbList").jqGrid("setGridParam", { postData: {ID:123,name:"张三"}, page: 1 }).trigger("reloadGrid");
        }




        //编辑JqGrid选中行数据
        function EditCheckingItem() {
            var SelectRow= $("#tbList").jqGrid("getGridParam", "selrow");//获取选中行对象(单选)
            if (SelectRow) {
                var RowObj = $("#tbList").jqGrid("getRowData", SelectRow);//获取选中行的数据对象
                var id = RowObj.ID;
            }
            else {
                alert("Please select a record!");
            }
        }


        //编辑JqGrid选中行数据
        function EditCheckingItem() {
            var SelectRows = $("#tbList").jqGrid("getGridParam", "selarrrow");//获取选中行对象(多选)
            if (SelectRows && SelectRows.length > 0) {
                   
               for (var i = 0; i < SelectRows.length; i++) {
                var RowObj = $("#tbList").getRowData(SelectRows[i]);
                var id=RowObj.ID;
              }

            }
            else {
                alert("Please select a record!");
            }
        }