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", width: 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", width: 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=\"width:80px;\" onchange=\"changeInspectorRole(‘" + rowObject[5] + "‘,‘" + rowObject[6] + "‘,‘" + rowObject[7] + "‘, this)\">" + options + "</select>";
                        }

                        return "<select style=\"width:80px;\"  disabled  onchange=\"changeInspectorRole(‘" + rowObject[5] + "‘,‘" + rowObject[6] + "‘,‘" + rowObject[7] + "‘, this)\">" + options + "</select>";
                      }
                    }
                ],
                pager: jQuery("#tbListPager"), //分页控件的id
                gridViewID: ‘@gridViewID‘,
                autowidth: 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); },
                width: "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加载完成后执行

            });

        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=\"width: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=\"width: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!");
            }
        }