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加載完成后執行
                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=\"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!");
            }
        }