1

我正在使用 jQGrid 和 asp 处理程序在网格中显示记录。客户端分页、搜索和排序一切正常。下面是我的代码。

jQuery("#jQGridDemo").jqGrid({
            url: 'http://localhost:58404/JQGridHandler.ashx',
            datatype: "json",
            colNames: ['Id', 'First Name', 'Last Name', 'Last 4 SSN', 'Department', 'Age', 'Salary', "Address", 'Marital Status'],
            colModel: [
                        { name: '_id', index: '_id', width: 50, stype: 'text' },
                        { name: 'FirstName', index: 'FirstName', width: 100, stype: 'text', sortable: true, editable: true },
                        { name: 'LastName', index: 'LastName', width: 100, editable: true },
                        { name: 'LastSSN', index: 'LastSSN', width: 100, editable: true },
                        { name: 'Department', index: 'Department', width: 100, align: "right", editable: true },
                        { name: 'Age', index: 'Age', width: 40, align: "right", editable: true },
                        { name: 'Salary', index: 'Salary', width: 100, align: "right", editable: true },
                        { name: 'Address', index: 'Address', width: 100, sortable: false, editable: true },
                        { name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable: false, editable: true }
                      ],
            rowNum: 10,
            mtype: 'GET',
            loadonce: true,
            rowList: [10],
            pager: '#jQGridDemoPager',
            sortname: '_id',
            viewrecords: true,
            sortorder: 'asc',  //desc
            caption: "List Student Details",
            editurl: 'http://localhost:58404/JQGridHandler.ashx'
            //// ****** here i placed the onPaging: //.......
        });

        $('#jQGridDemo').jqGrid('navGrid', '#jQGridDemoPager',
                   {
                       edit: true,
                       add: true,
                       del: true,
                       search: true,
                       searchtext: "Search",
                       addtext: "Add",
                       edittext: "Edit",
                       deltext: "Delete"
                   },
                   {   //EDIT
                       //                       height: 300,
                       //                       width: 400,
                       //                       top: 50,
                       //                       left: 100,
                       //                       dataheight: 280,
                       closeOnEscape: true,     //Closes the popup on pressing escape key
                       reloadAfterSubmit: true,
                       drag: true,
                       afterSubmit: function (response, postdata) {
                           if (response.responseText == "") {

                               $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
                               return [true, '']
                           }
                           else {
                               $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
                               return [false, response.responseText]//Captures and displays the response text on th Edit window
                           }
                       },
                       editData: {
                           EmpId: function () {
                               var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
                               var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
                               return value;
                           }
                       }
                   },
                   {
                       closeAfterAdd: true,     //Closes the add window after add
                       afterSubmit: function (response, postdata) {
                           if (response.responseText == "") {

                               $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
                               return [true, '']
                           }
                           else {
                               $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
                               return [false, response.responseText]
                           }
                       }
                   },
                   {   //DELETE
                       closeOnEscape: true,
                       closeAfterDelete: true,
                       reloadAfterSubmit: true,
                       closeOnEscape: true,
                       drag: true,
                       afterSubmit: function (response, postdata) {
                           if (response.responseText == "") {

                               $("#jQGridDemo").trigger("reloadGrid", [{ current: true}]);
                               return [false, response.responseText]
                           }
                           else {
                               $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')
                               return [true, response.responseText]
                           }
                       },
                       delData: {
                           EmpId: function () {
                               var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
                               var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
                               return value;
                           }
                       }
                   },
                   {//SEARCH
                       closeOnEscape: true

                   }
            );

现在我需要服务器端分页并尝试使用 Oleg 的代码答案。我将该鳕鱼放在editurl下的jqgrid中。

onPaging: function (which_button) {
                var pageNumber = $(this).jqGrid("getGridParam", "page");
                $(this).setGridParam({ datatype: 'json', page: pageNumber }).triggerHandler("reloadGrid");
            },    
            loadComplete: function (data) {
                var $this = $(this);
                if ($this.jqGrid('getGridParam', 'datatype') === 'json') {
                    $this.jqGrid('setGridParam', {
                        datatype: 'local',
                        data: data.rows,
                        page: data.page,
                        records: data.totalRecords,
                        total: data.total
                    });
                    this.refreshIndex();

                    if ($this.jqGrid('getGridParam', 'sortname') !== '') {
                        $this.triggerHandler('reloadGrid');
                    }
                } else {
                    $this.jqGrid('setGridParam', {
                        page: $this.jqGrid('getGridParam', 'pageServer'),
                        records: $this.jqGrid('getGridParam', 'recordsServer'),
                        lastpage: $this.jqGrid('getGridParam', 'lastpageServer')
                    });
                    this.updatepager(false, true);
                }
            }

在 loadComplete 数据中包含编号。每页的记录数，并显示。但网格未显示从服务器返回的总记录数。它正在显示view 11 - 20 of 10。我还从服务器中获取总记录data.totalRcords。

我放置的位置是否正确onPaging？奥列格，我是 jqgrid 的新手，让我朝着正确的方向前进。

谢谢！

4

1 回答 1

0

在我的情况下，在服务器端..我使用以下代码进行分页，这是一个示例代码，它使用 int pageNumber = // 页码变量 int pageSize //页面大小变量 string sortOrder = string.Empty; // 排序方向字符串的变量 sortIndex.. 希望对你有帮助

public ErrorLogPagedList GetFixedListOfExceptionLogDetails()
    {
        var objErrorLogPagedList = new ErrorLogPagedList(); //object to return
        var objExceptionLogBa = new ExceptionLogBa(); //Ba layer object
        var objGlobal = new Global();

        try
        {
            //get the values from the service call
            int pageNumber = Convert.ToInt32(HttpContext.Current.Request["page"]); // variable for page number
            int pageSize = Convert.ToInt32(HttpContext.Current.Request["rows"]); //variable for page size
            string sortOrder = Convert.ToString(HttpContext.Current.Request["sord"]) ?? string.Empty;
                // variable for the sort direction
            string sortIndex = Convert.ToString(HttpContext.Current.Request["sidx"]) ?? string.Empty;
                // variable for the sort column name

            //if the page value is less than 0, then start with 1
            if (pageNumber <= 0)
            {
                pageNumber = 1;
            }

            //if the page size is less than equal to 0 take default value
            if (pageSize <= 0)
            {
                pageSize = 15;
            }

            if (objGlobal.IsNotNull())
            {
                if (objGlobal.CurrentRole.IsNotNull())
                {
                    objErrorLogPagedList.Rows = objExceptionLogBa.GetFixedListOfExceptionLogDetails(pageNumber,
                                                                                                    pageSize,
                                                                                                    sortOrder,
                                                                                                    sortIndex);
                    long totalNumberOfrecords = objExceptionLogBa.GetTotalNumberOfExceptionRecords();
                        //variable to get total number of pages

                    //set the rest of the values for the CategorypagedList object
                    objErrorLogPagedList.Records = totalNumberOfrecords;
                    objErrorLogPagedList.Page = pageNumber;

                    /*if totalnumberofrecords is 7 and page size is 10 then it will return 0 so in that case it will take default value of 1 page*/
                    if (totalNumberOfrecords/pageSize <= 0)
                    {
                        totalNumberOfrecords = 1;
                    }
                    else
                    {
                        //else if the number of records is 10 then it will return 1
                        if (totalNumberOfrecords%pageSize == 0)
                        {
                            totalNumberOfrecords = totalNumberOfrecords/pageSize;
                        }

                            //else if the number of records is 11 then it will return 1, but there should be 2 pages so +1
                        else
                        {
                            totalNumberOfrecords = (totalNumberOfrecords/pageSize) + 1;
                        }
                    }

                    //set the value for total pages
                    objErrorLogPagedList.Total = totalNumberOfrecords;
                }
            }
        }
        catch (Exception ex)
        {
                        }

        return objErrorLogPagedList;
    }
于 2013-11-06T07:37:48.223 回答