ExtjsGrid 分頁、ASP.net前後台資料互動

很不錯的extjsdemo~~~

 

ExtjsGrid分頁  要引用ext2.0 以上版本

 

 

1 建立ASP.net Web應用程式

2 在App_Data檔案夾內建立資料庫db_test

    

建立2張表，通過use_id的外鍵找出‘這個學生的成績
’

 

3 插入一些資料，資料可以自訂

  

 

4 解決方案右鍵，建立類庫Model（此類庫為資料庫中的表抽象出一個類模型
）

若：前台要顯示學生的use_id、use_name 、use_sex、 use_address、 sco_subject、 sco_score。

即建立一個show_score.cs

代碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace Model
{
public class show_score
{
private int _use_id;
public int use_id //欄位user_id
{
get { return _use_id; }
set { _use_id = value; }
}

private string _use_name;
public string use_name //欄位use_name
{
get { return _use_name; }
set { _use_name = value; }
}

private string _use_sex;
public string use_sex //欄位use_sex
{
get { return _use_sex; }
set { _use_sex = value; }
}

private string _use_address;
public string use_address //欄位use_address
{
get { return _use_address; }
set { _use_address = value; }
}

private string _sco_subject;
public string sco_subject //欄位sco_subject
{
get { return _sco_subject; }
set { _sco_subject = value; }
}

private int _sco_score;
public int sco_score
{
get { return _sco_score; }
set { _sco_score = value; }
}
}
} 

5 建立一個公用的服務庫類Service

Service中建立DBHelper.cs和show_score_Service.cs

 

5 建立一個公用的服務庫類Service

Service中建立DBHelper.cs和show_score_Service.cs

DBHelper.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using System.Data.SqlClient;//資料庫連接的命名空間
using System.Data;//DataSet的命名空間

namespace Service
{
public class DBHelper
{
private static SqlConnection connection;//建立connection連線物件
public static SqlConnection Conneciton
{
get//get 關鍵字在屬性或索引器中定義訪問器方法，以檢索該屬性或該索引器元素的值。
{
string temp_connectionstring = @"Data Source=./SQLEXPRESS;AttachDbFilename=E:/Asp.net/Extjs、ASP.net前後台資料互動/Extjs、ASP.net前後台資料互動/App_Data/db_test.mdf;Integrated Security=True;User Instance=True";
if (connection == null)
{
connection = new SqlConnection(temp_connectionstring);
connection.Open();
}
//System.Data.ConnectionState描述與資料來源的串連的目前狀態。
//Broken 與資料來源的串連中斷。只有在串連開啟之後才可能發生這種情況。可以關閉處於這種狀態的串連，然後重新開啟。（該值是為此產品的未來版本保留的。）
//Closed 串連處於關閉狀態。
//Connecting 連線物件正在與資料來源串連。（該值是為此產品的未來版本保留的。）
//Executing 連線物件正在執行命令。（該值是為此產品的未來版本保留的。）
//Fetching 連線物件正在檢索資料。（該值是為此產品的未來版本保留的。）
//Open 串連處於開啟狀態。
else if (connection.State == System.Data.ConnectionState.Closed)
{
connection.Open();
}
else if (connection.State == System.Data.ConnectionState.Broken)
{
connection.Close();
connection.Open();
}
return connection;
}
}

//ExecuteNonQuery，對串連執行 Transact-SQL 陳述式並返回受影響的行數。
public static int ExecuteCommand(string temp_sql)
{
SqlCommand temp_cmd = new SqlCommand(temp_sql, Conneciton);
int temp_result = temp_cmd.ExecuteNonQuery();
return temp_result;
}

//執行查詢，並返回查詢所返回的結果集中第一行的第一列。忽略其他列或行。
public static int GetScalar(string temp_sql)
{
SqlCommand temp_cmd = new SqlCommand(temp_sql, Conneciton);
int temp_result = Convert.ToInt32(temp_cmd.ExecuteScalar());
return temp_result;
}

//提供一種從 SQL Server 資料庫讀取行的只進流的方式。
public static SqlDataReader GetReader(string temp_sql)
{
SqlCommand temp_cmd = new SqlCommand(temp_sql, Conneciton);
SqlDataReader temp_reader = temp_cmd.ExecuteReader();
return temp_reader;
}

//擷取表的記錄集
public static DataTable GetDataSet(string temp_sql)
{
DataSet temp_ds = new DataSet();
SqlCommand temp_cmd = new SqlCommand(temp_sql, Conneciton);
SqlDataAdapter temp_da = new SqlDataAdapter(temp_cmd);
temp_da.Fill(temp_ds);
return temp_ds.Tables[0];
}
}
}

 

show_score_Service.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Model;//添加完程式引用集後，添加命名空間
using System.Data.SqlClient;
namespace Service
{
public class show_score_Service
{
public List<show_score> GetAllUser()
{
string temp_str = "select A.use_id,use_name," +
"use_sex,use_address,sco_subject,sco_score from tb_user A,tb_score B A.use_id=B.use_id";
List<show_score> temp_list = new List<show_score>();
temp_list = GetBySql(temp_str, null);
if (temp_list.Count > 0) { return temp_list; }
else { return null; }
}

private static List<show_score> GetBySql(string temp_sql, SqlParameter[] temp_values)
{
using (SqlDataReader temp_reader = DBHelper.GetReader(temp_sql))
{
List<show_score> temp_list = new List<show_score>();
show_score temp_user = null;
while (temp_reader.Read())
{
temp_user = new show_score();
temp_user.use_id = int.Parse(temp_reader["use_id"].ToString());
temp_user.use_name = temp_reader["use_name"].ToString();
temp_user.use_sex = temp_reader["use_sex"].ToString();
temp_user.use_address = temp_reader["use_address"].ToString();
temp_user.sco_subject = temp_reader["sco_subject"].ToString();
temp_user.sco_score = int.Parse(temp_reader["sco_score"].ToString());
temp_list.Add(temp_user);
}
temp_reader.Close();
return temp_list;
}
}
}
}

 

6 建立show_grid.aspx，添加 服務庫類Service和類模型Model 的引用和命名空間

 show_grid.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Show_grid.aspx.cs" Inherits="ExtJs_vs2008_ASP.net資料互動.Show_grid" %>

show_grid.aspx.cs

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using Model;//添加命名空間
using Service;
using System.Data.SqlClient;
using System.Web.Script.Serialization;//Json序列化
using System.Text;

namespace ExtJs_vs2008_ASP.net資料互動
{
public partial class Show_grid : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string temp_json = "";
string temp_type = Request.QueryString["parm"].ToString();
if(temp_type=="List")
{
temp_json = doList();
Response.Write(temp_json);
}
}
private string doList()
{
show_score_Service temp_ser = new show_score_Service();
List<show_score> temp_list = temp_ser.GetAllUser();
JavaScriptSerializer java = new JavaScriptSerializer();
StringBuilder temp_sb = new StringBuilder();
java.Serialize(temp_list, temp_sb);
string temp_json = temp_sb.ToString();
return temp_json;
}
}
}

 

7 需要引入的目錄檔案

a.需要分頁，我習慣用PagingMemoryProxy.js（可從ExtJs檔案夾內搜尋得到）分頁，引入解決方案中

b.將ExtJs檔案引入解決方案中

c.編輯一個my_datagrid.js檔案

 

Ext.onReady(function() {
store = new Ext.data.JsonStore({
data: [],
fields: [
{ name: 'use_id' },
{ name: 'use_name' },
{ name: 'use_sex' },
{ name: 'use_address' },
{ name: 'sco_subject' },
{ name: 'sco_score' }
]
});
Ext.Ajax.request({ //讀取後台傳遞於前台資料
url: 'Show_grid.aspx?parm=List',
method: 'get',
success: function(response, opts) {
var obj = Ext.decode(response.responseText); //obj 儲存響應的資料
store.proxy = new Ext.data.PagingMemoryProxy(obj), //PagingMemoryProxy() 一次性讀取資料
store.load({ params: { start: 0, limit: 4} }); //按4 條記錄分布
},
failure: function() { Ext.Msg.alert("failure"); }
});

var grid = new Ext.grid.GridPanel({
frame: true,
title:'學生各科成績表',
stripeRows: true, //斑馬線
store: store,
id: 'grid',
applyTo: 'grid',
trackMouseOver: true,
height: 300,
width:500,
loadMask: {msg:'正在載入資料，請稍侯……'},
viewConfig: {
forceFit: true
},
columns: [
new Ext.grid.RowNumberer(), //行號
{header: '<font size=2>使用者帳戶</font>', dataIndex: 'use_id', sortable: true },
{ header: '<font size=2>使用者姓名</font>', dataIndex: 'use_name', sortable: true },
{ header: '<font size=2>使用者性別</font>', dataIndex: 'use_sex', sortable: true },
{ header: '<font size=2>使用者地址</font>', dataIndex: 'use_address', sortable: true },
{ header: '<font size=2>考試科目</font>', dataIndex: 'sco_subject', sortable: true },
{ header: '<font size=2>考試分數</font>', dataIndex: 'sco_score', sortable: true }
],
bbar: new Ext.PagingToolbar({//分頁
pageSize:4,
store: store,
displayInfo: true, //非要為true，不然不會顯示下面的分頁按鈕
displayMsg: '<font size=2>第 {0} 條到 {1} 條，一共 {2} 條記錄</font>',
emptyMsg: "沒有記錄"
})
})
})

 

 

 

8 前台Default.aspx的編寫

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Extjs_ASP.net前後台資料互動._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 runat="server">

<link rel="Stylesheet" type="text/css" href="ExtJs/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ExtJs/ext-all.js"></script>
<script src="PagingMemoryProxy.js" type="text/javascript"></script>
<script src="my_datagrid.js" type="text/javascript"></script>

<title>ExtJs與ASP.net前後台互動</title>
</head>
<body>
<form id="form1" runat="server">
<div id="grid"></div>
</form>
</body>
</html>

9 運行效果

===========================================================================

===========================================================================