无法使用ASP.NET在JQGRID中实现分页

时间:2011-01-06 10:34:13

标签: asp.net jqgrid

我已经实现了一个简单的代码来将数据绑定到asp.net中的jqgrid,我最初遇到排序网格的问题,但是能够克服同样的问题。现在我担心的是我无法在Jqgrid中实现分页。如果有人能帮我解决这个问题会很棒。这是我的aspx代码。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Import Namespace="System.Web.Script.Serialization" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.Web.Services" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="ui.jqgrid.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>

    <%--<link href="jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />--%>

    <script src="grid.locale-en.js" type="text/javascript"></script>

    <script src="jquery.jqGrid.min.js" type="text/javascript"></script>

    <script src="json2.js" type="text/javascript"></script>

    <link href="jquery-ui-1.8.7.custom.css" media="screen" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function() {
            $('#submit').click(function() {
                $('#list').jqGrid({
                    datatype: function(postdata) {

                        var params = new Object();
                        params.page = postdata.page;
                        params.pageSize = postdata.rows;
                        params.sortIndex = postdata.sidx;
                        params.sortDirection = postdata.sord;

                        $.ajax({
                            url: 'Default.aspx/GetData',
                            type: 'POST',
                            data: JSON.stringify(params),
                            // dataType: "json",     
                            contentType: "application/json; charset=utf-8",
                            error: function(data, textStatus) {
                                alert('Error loading json');
                            },
                            success: function(data, st) {
                                if (st == 'success') {
                                    var grid = $("#list");
                                    var gridData = JSON.parse(data.d);
                                    grid.clearGridData();
                                    for (var i = 0; i < gridData.length; i++) {
                                        grid.addRowData(i + 1, gridData[i]);
                                    }
                                }
                            }
                        });
                    },
                    colNames: ['Product ID', 'Product Name', 'Product Number'],
                    colModel: [
                       { name: 'ProductID', index: 'ProductID', sort: true, width: 80, align: 'center', sorttype: "int" },
                       { name: 'Name', index: 'Name', width: 120, align: 'center' },
                       { name: 'ProductNumber', index: 'ProductNumber', width: 120, align: 'center'}],
                    pager: $("#pager"),
                    height: 200,
                    width: 600,
                    rowNum: 20,
                    rowList: [10, 20, 30],
                    rownumWidth: 40,
                    sortorder: 'desc',
                    loadonce: true,
                    records: 20,
                    viewRecords: true
                });
            });
        });
        //        }).navGrid('#pager', { search: true, edit: false, add: false, del: false, searchtext: "Search" });       
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">
    </asp:ScriptManager>
    <input type="button" id="submit" value="Fetch" title="Fetch" />
    <table id="list">
    </table>
    <div id="pager">
    </div>
    </form>
</body>
</html>

这是我的代码页面

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using System.Collections.Generic;
using System.Text;
using System.Web.Script.Serialization;
using System.Web.Script.Services;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    [WebMethod]
    public static string GetData(int page, int pageSize, string sortIndex, string sortDirection)
    {
        string connectionString = GetConnectionString();
        string queryString = string.Empty;
        if (sortIndex == "")
        {
            queryString = "SELECT top " + pageSize + " ProductID,Name,ProductNumber FROM [AdventureWorks].[Production].[Product]";

        }
        else
        {
            queryString = "SELECT top " + pageSize + " ProductID,Name,ProductNumber FROM [AdventureWorks].[Production].[Product] ORDER BY " + sortIndex + " " + sortDirection;
        }
        DataSet ds = new DataSet();
        SqlConnection connection = new SqlConnection(connectionString);
        connection.Open();
        SqlCommand command = connection.CreateCommand();

        command.CommandText = queryString;
        SqlDataAdapter da = new SqlDataAdapter(queryString, connectionString);
        da.Fill(ds, "product");
        DataTable dt = ds.Tables["product"];
        IList<Product> pd = new List<Product>();
        connection.Close();

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                Product p = new Product();
                p.ProductID = dt.Rows[i]["ProductID"].ToString();
                p.Name = Convert.ToString(dt.Rows[i]["Name"]);
                p.ProductNumber = Convert.ToString(dt.Rows[i]["ProductNumber"]);
                pd.Add(p);
                p = null;
            }

        JavaScriptSerializer jsonSerz = new JavaScriptSerializer();

           string serializedData = jsonSerz.Serialize(pd); 
           pd = null;
           return serializedData;
    }

    static private string GetConnectionString()
    {
        return "Data Source=INMDCD0109\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=SSPI";
    }
}
public class Product
{

    public string ProductID { get; set; }

    public string Name { get; set; }

    public string ProductNumber { get; set; }
}

提前致谢

1 个答案:

答案 0 :(得分:0)

我在之前的my answer许多建议中已经写过你如何改进你的代码。因为你没有对我以前的答案写任何评论,所以我现在会做空。

我需要实现分页,只需对10行的第一页使用SELECT TOP 10之类的语句就足够了。如果您需要返回例如第6页,则需要跳过50个第一行,然后获取下一个10.如果您返回的数据包含id(在您的情况下为ProductID),您可以执行此操作,例如使用common table expression (CTE)使用以下语句:

WITH Previous (ProductID,Name,ProductNumber) AS (
    SELECT TOP 50 ProductID,Name,ProductNumber
    FROM [AdventureWorks].[Production].[Product]
)
SELECT TOP 10 T.ProductID,T.Name,T.ProductNumber
FROM [AdventureWorks].[Production].[Product] AS T
    LEFT OUTER JOIN Previous AS P ON T.ProductID=P.ProductID
WHERE P.ProductID IS NULL

如果返回的数据不包含id,则可以使用ROW_NUMBER来实现分页。

更新:再说一句小话。您示例中DataSetDataTableSqlDataAdapter的使用无效。返回command.ExecuteReader的{​​{1}}(SqlCommand::ExecuteReader)的使用在这里似乎更好。