.NET之 Extjs4.0 Grid分页显示
最大的区别是 分页语句不同 ，别的都大同小异：
上代码：
search.aspx:
[html]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Search.aspx.cs" Inherits="Search" %>
<!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>Search</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/bootstrap.js" ></script>
<script type="text/javascript" src="extjs/ext-all.js" ></script>
<script type="text/javascript" >
//预加载
Ext.require(
[
'Ext.grid.*',
'Ext.toolbar.Paging',
'Ext.data.*'
]
);
Ext.onReady(
function(){
//创建Model
Ext.define(
'User',
{
extend:'Ext.data.Model',
fields:[
{name:'id',mapping:'id'},
{name:'name',mapping:'name'},
{name:'date',mapping:'date'},
{name:'origin',mapping:'origin'}
]
}
)
//创建数据源
var store = Ext.create(
'Ext.data.Store',
{
model:'User',
//设置分页大小
pageSize:5,
proxy: {
type: 'ajax',
url : 'PageJson.aspx',
reader: {
//数据格式为json
type: 'json',
root: 'bugs',
//获取数据总数
totalProperty: 'totalCount'
}
},
autoLoad:true
}
);
//创建grid
var grid = Ext.create('Ext.grid.Panel',{
store:store,
columns:[
{text:'ID',width:120,dataIndex:'id',sortable:true},
{text:'姓名',width:120,dataIndex:'name',sortable:true},
{text:'性别',width:120,dataIndex:'date',sortable:true},
{text:'年龄',width:120,dataIndex:'origin',sortable:true}
],
height:200,
width:480,
x:20,
y:40,
title: 'ExtJS4 Grid分页查询示例示例',
renderTo: 'grid',
//分页功能
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg: "没有数据"
}
)
}
)
//store.loadPage(1);
store.load({ params: { start: 0, limit: 5} });
}
)
</script>
</head>
<body>
<form id="form1" runat="server">
<p id="grid">
</p>
</form>
</body>
</html>
后台代码：
search.aspx.cs:
[csharp]
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Text;
public partial class PageJson : System.Web.UI.Page
{
int total = 0;
protected void Page_Load(object sender, EventArgs e)
{
int start =Convert.ToInt32( Request.Params["start"]);
int limit =Convert.ToInt32( Request.Params["limit"]);
jsData(start, limit);
}
public void jsData(int start, int limit)
{
SqlConnection conn = new SqlConnection("server=localhost;database=Extjs;uid=sa;pwd=1234");
//分页查询语句
string sql = " SELECT TOP " + limit + " * FROM search WHERE (ID NOT IN (SELECT TOP " + start + " id FROM search ORDER BY id))ORDER BY ID";
SqlCommand cm = new SqlCommand(sql, conn);
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter();
da.SelectCommand = cm;
conn.Open();
cm.ExecuteNonQuery();
da.Fill(dt);
conn.Close();
Response.Write(CreateJsonParameters(dt).ToString());
}
//计算总数
public void totalcount()
{
SqlConnection conn = new SqlConnection("server=localhost;database=Extjs;uid=sa;pwd=1234");
string sql = "select count(*) as total from search";
SqlDataAdapter da = new SqlDataAdapter(sql, conn);
DataSet ds = new DataSet();
da.Fill(ds, "table");
total = Convert.ToInt32(ds.Tables[0].Rows[0]["total"].ToString());
}
public string CreateJsonParameters(DataTable dt)
{
totalcount();//计算总数
StringBuilder JsonString = new StringBuilder();
//Exception Handling
if (dt != null && dt.Rows.Count > 0)
{
JsonString.Append("{totalCount:" + total + ",bugs:[ ");
for (int i = 0; i < dt.Rows.Count; i++)
{
JsonString.Append("{ ");
for (int j = 0; j < dt.Columns.Count; j++)
{
if (j < dt.Columns.Count - 1)
{
JsonString.Append(dt.Columns[j].ColumnName.ToString() + ":" + "\"" + dt.Rows[i][j].ToString() + "\",");
}
else if (j == dt.Columns.Count - 1)
{
JsonString.Append(dt.Columns[j].ColumnName.ToString() + ":" + "\"" + dt.Rows[i][j].ToString() + "\"");
}
}
if (i == dt.Rows.Count - 1)
{
JsonString.Append("} ");
}
else
{
JsonString.Append("}, ");
}
}
JsonString.Append("]}");
return JsonString.ToString();
}
else
{
return null;
}
}
}
截图：
[csharp]
推荐阅读
-
.NET之 Extjs4.0 Grid分页显示
-
在ASP.NET 2.0中操作数据之十五：在GridView的页脚中显示统计信息
-
在ASP.NET 2.0中操作数据之四十一：DataList和Repeater数据分页
-
在ASP.NET 2.0中操作数据之十五：在GridView的页脚中显示统计信息
-
利用ASP.NET MVC+Bootstrap搭建个人博客之打造清新分页Helper（三）
-
在ASP.NET 2.0中操作数据之四十一：DataList和Repeater数据分页
-
在ASP.NET 2.0中操作数据之五十三：在Data Web控件显示二进制数据
-
利用ASP.NET MVC+Bootstrap搭建个人博客之打造清新分页Helper（三）
-
ASP.Net2.0 GridView 多列排序，显示排序图标，分页
-
Asp.net_静态方法之Grid转DataTable方法分享