我已经实现了一个简单的代码来将数据绑定到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; }
}
提前致谢
答案 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来实现分页。
更新:再说一句小话。您示例中DataSet
,DataTable
和SqlDataAdapter
的使用无效。返回command.ExecuteReader
的{{1}}(SqlCommand::ExecuteReader)的使用在这里似乎更好。