本文介绍了数据点播Gridview的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在一个gridview上工作，它应该提供像facebook一样向下滚动的数据。
我的代码是
.aspx页码。
I work on one gridview which should provide data on scroll down like facebook .
my code is
.aspx page code.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 id="Head1" runat="server">
<title></title>
<style type="text/css">
.Grid td
{
background-color: #A1DCF2;
color: black;
font-size: 10pt;
font-family: Arial;
line-height: 200%;
cursor: pointer;
width: 100px;
}
.Grid th
{
background-color: #3AC0F2;
color: White;
font-family: Arial;
font-size: 10pt;
line-height: 200%;
width: 100px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table class="Grid" cellspacing="0" rules="all" border="1" id="Table1" style="width: 517px; border-collapse: collapse;">
<tr>
<th scope="col" style="width: 200px;">
EmployeeID
</th>
<th scope="col" style="width: 217px;">
Name
</th>
<th scope="col" style="width: 100px;">
ManagerID
</th>
</tr>
</table>
<div id="dvGrid" style="height: 250px; overflow: auto; width: 517px">
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid" Width="517">
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" ItemStyle-CssClass="EmployeeID" ItemStyle-Width="200" HeaderStyle-Width="200" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-CssClass="Name" ItemStyle-Width="217" HeaderStyle-Width="217" />
<asp:BoundField DataField="ManagerID" HeaderText="ManagerID" ItemStyle-CssClass="ManagerID" ItemStyle-Width="100" HeaderStyle-Width="100" />
</Columns>
</asp:GridView>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var pageIndex = 1;
var pageCount;
$(function() {
//Remove the original GridView header
$("[id$=gvCustomers] tr").eq(0).remove();
});
//Load GridView Rows when DIV is scrolled
$("#dvGrid").on("scroll", function(e) {
var $o = $(e.currentTarget);
if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {
GetRecords();
}
});
//Function to make AJAX call to the Web Method
function GetRecords() {
pageIndex++;
if (pageIndex == 2 || pageIndex <= pageCount) {
//Show Loader
if ($("[id$=gvCustomers].loader").length == 0) {
var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
row.addClass("loader");
row.children().remove();
row.append('<td colspan = "999" style = "background-color:white"><img id="loader" alt="" src="103.gif" /></td>');
$("[id$=gvCustomers]").append(row);
}
$.ajax({
type: "POST",
url: "Default.aspx/GetCustomers",
data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function(response) {
alert(response.d);
},
error: function(response) {
alert(response.d);
}
});
}
}
//Function to recieve XML response append rows to GridView
function OnSuccess(response) {
debugger;
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
var customers = xml.find("Employee");
$("[id$=gvCustomers] .loader").remove();
customers.each(function() {
var customer = $(this);
var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
$(".EmployeeID", row).html(Employee.find("EmployeeID").text());
$(".Name", row).html(Employee.find("Name").text());
$(".ManagerID", row).html(Employee.find("ManagerID").text());
$("[id$=gvCustomers]").append(row);
});
//Hide Loader
$("#loader").hide();
}
</script>
</form>
</body>
</html>
和.cs这样的代码
and .cs code like this
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
gvCustomers.DataSource = GetDataPageWise(1, 10);
gvCustomers.DataBind();
}
}
public static DataSet GetDataPageWise(int pageIndex, int pageSize)
{
string constring = ConfigurationManager.ConnectionStrings["keyconn"].ConnectionString;
using (SqlConnection con = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("[GetDataPageWise]"))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
cmd.Parameters.AddWithValue("@PageSize", pageSize);
cmd.Parameters.Add("@PageCount", SqlDbType.Int, 3).Direction = ParameterDirection.Output;
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds, "Employee");
DataTable dt = new DataTable("PageCount");
dt.Columns.Add("PageCount");
dt.Rows.Add();
dt.Rows[0][0] = cmd.Parameters["@PageCount"].Value;
ds.Tables.Add(dt);
return ds;
}
}
}
}
}
[WebMethod]
public static string GetCustomers(int pageIndex)
{
//Added to similate delay so that we see the loader working
//Must be removed when moving to production
System.Threading.Thread.Sleep(2000);
return GetDataPageWise(pageIndex, 10).GetXml();
}
}
和这样的商店程序
and store procedure like this
ALTER PROCEDURE [dbo].[GetDataPageWise]
@PageIndex INT = 1
,@PageSize INT = 10
,@PageCount INT OUTPUT
AS
BEGIN
SET NOCOUNT ON;
SELECT ROW_NUMBER() OVER
(
ORDER BY [EmployeeID] ASC
)AS RowNumber,
[EmployeeID],
[Name],
[ManagerID]
INTO #Results
FROM [Employee]
DECLARE @RecordCount INT
SELECT @RecordCount = COUNT(*) FROM #Results
SET @PageCount = CEILING(CAST(@RecordCount AS DECIMAL(10, 2)) / CAST(@PageSize AS DECIMAL(10, 2)))
PRINT @PageCount
SELECT * FROM #Results
WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1
DROP TABLE #Results
END
和桌面设计如
桌子名称：员工
并且提交的是
EmployeeID int，Name varchar，ManagerID int
[]
此代码对我没有任何帮助请帮助..
and table design like
name of table : Employee
and it filed is
EmployeeID int, Name varchar,ManagerID int
http://www.aspsnippets.com/Articles/Load-on-demand-data-in-GridView-on-scroll-using-ASPNet-and-jQuery-AJAX.aspx[^]
this code not work for me any help please..
推荐答案
这篇关于数据点播Gridview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！