使用ExtJS GridPanel從Web Service 獲取、綁定和顯示數據_.Net教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

推薦：用Xaml做網頁框架
下面就開始編寫XAML，首先來定義一下頁面的屬性：以下為引用的內容： <Page xmlns="http://schemas.microsoft

本文將向大家介紹一種使用 ExtJS 的 GridPanel 組件從 ASP.NET Web Service 獲取 XML 數據并進行綁定和顯示的方法。

GridPanel 組件在進行數據綁定時可以接收多種數據格式。其中以 JSON 和 XML 最為常見。如果要給 GridPanel 綁定 JSON 格式的數據（這也是網上“通用”和“熱門”的解決方案），那么我們需要修改 Web Service 的 Web.config 設置，將輸出數據的格式改為 JSON（默認為 XML。設置方法可參見：http://www.cnblogs.com/regedit/archive/2008/03/04/1089948.html 一文）。

個人認為此方法過于繁瑣，為了保證對現有的 Web Service 不做較大的調整，我決定還是繼續讓其返回 XML 格式的數據。因此在對 GridPanel 進行數據綁定時就要選用 XML 方式綁定了。也就是說，我們在綁定數據時要使用 Ext.data.XmlReader 而不是 Ext.data.JsonReader。具體的實現方法如下：

1. Web Service 部分：

以下為引用的內容：

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class ArticleService : System.Web.Services.WebService {

// SQL 連接字符串
private readonly string _strConn = ConfigurationManager.ConnectionStrings["Junchieh"].ConnectionString;

// 從 start 開始 limit 行，按 sort 字段排序，排序方式為 dir（將傳入 "asc" 或 "desc"）
[WebMethod]
public DataSet GetArticles(int start, int limit, string sort, string dir)
{
DataSet ds = new DataSet("Article");

// 從數據庫獲取數據，放入 record 表
string strSql = string.Format(
"select top {0} * from Article where Id not in (select top {1} Id from Article order by {2} {3}) order by {2} {3}",
limit, start, sort, dir);
SqlDataAdapter da = new SqlDataAdapter(strSql, _strConn);
DataTable dtRecord = new DataTable("record");
lock (da)
{
da.Fill(dtRecord);
}
ds.Tables.Add(dtRecord);

// 計算總行數，放入 results 表
DataTable dtResult = new DataTable("results");
dtResult.Columns.Add("totalRecords");
DataRow dr = dtResult.NewRow();
using (SqlConnection conn = new SqlConnection(_strConn))
using (SqlCommand cmd = new SqlCommand("select count(*) from Article", conn))
{
try
{
conn.Open();
dr["totalRecords"] = (int)cmd.ExecuteScalar();
}
catch
{
// do nothing
}
}
dtResult.Rows.Add(dr);
ds.Tables.Add(dtResult);

return ds;
}
}

GetAritcles 將返回一個 DataSet。其內包括兩個 DataTable，第一個存放了（跟據 start 和 limit 參數指定的）當前頁的數據，另一個存放了數據庫中所有數據的行數，供客戶端的 GridPanel 組件使用。客戶端部分（節選）：

以下為引用的內容：

// 數據源
var store = new Ext.data.Store({
url: 'Services/ArticleService.asmx/GetArticles', // Web Service 地址
reader: new Ext.data.XmlReader(
{
totalRecords: 'totalRecords', // 數據總行數。對應于 GetArticles 返回的 DataSet 中的 results 表的 totalRecores 列
record: 'record', // 數據。對應于 GetArticles 返回的 DataSet 中的 record 表
id: 'Id' // 主鍵。對應于 GetArticles 返回的 DataSet 中的 record 表的 Id 列
},
[
{name: 'Id'},
{name: 'Title'},
{name: 'Date'}
]
),
remoteSort: true // 服務端排序
});
store.setDefaultSort('Date', 'desc'); // 默認按 Date 列降序排列

// 分頁欄
var bbar = new Ext.PagingToolbar(
{
pageSize: 4,
store: store,
displayInfo: true,
displayMsg: '當前顯示 {0} - {1} 條，共 {2} 條',
emptyMsg: "無數據"
}
);

// GridPanel 組件
var grid = new Ext.grid.GridPanel({
frame: true,
enableHdMenu: false,
width :600,
height:300,
title:'文章列表',
loadMask: {msg:'正在加載數據，請稍侯……'},
el: 'grid',
store: store,
cm: cm,
bbar: bbar,
viewConfig: {
forceFit:true
}
});
grid.render();
store.load({params:{start:0,limit:4}}); // 初始時顯示第 1 頁，每頁顯示 4 條數據
});

// 格式化日期
// 將 XML 數據中的原始日期數據（如：2008-04-07T14:39:41.02 08:00）格式化成可讀的日期（如：2008-04-07 14:39:41）
function renderDate(value)
{
var reDate = /\d{4}\-\d{2}\-\d{2}/gi;
var reTime = /\d{2}:\d{2}:\d{2}/gi;
return value.match(reDate) " " value.match(reTime);
}
</script>

<div id="grid" style="height:300px; margin:auto;"></div>

從 Web Service 中由 GetArticles 方法返回的是 XML 數據。在將數據綁定到 Ext.data.Store 組件時應使用 Ext.data.XmlReader 而不是網上經常看到的 Ext.data.JsonReader。綁定時我們需要“告訴” XmlReader 在 XML 數據中哪些節點代表數據條目（本例為“record”），哪個節點代表數據總數（本例為“totalRecords”），以及數據的主鍵節點（本例為“Id”）。您可以通過下圖來理解 XmlReader 的數據綁定過程：

另外，從上圖中的 XML 數據可以看出，日期（Date）的格式比較“丑陋”，如果不加修飾的話將會原樣顯示于客戶的 GridPanel 組件中。因此在客戶端顯示數據之前，需要對日期數據進行一下加工。在創建 Ext.grid.ColumnModel 時為 Date 列指定 renderer（注意加粗部分）：

{header:'日期',dataIndex:'Date',sortable:true,width:50, renderer: renderDate}

代碼中的“renderDate”是一個 JavaScript 函數，定義如下：

以下為引用的內容：
function renderDate(value)
{
var reDate = /\d{4}\-\d{2}\-\d{2}/gi;
var reTime = /\d{2}:\d{2}:\d{2}/gi;
return value.match(reDate) " " value.match(reTime);
}

此函數中的 value 參數即為原始的日期數據，由 Ext.grid.ColumnModel 傳入。在函數中使用正則表達式分別提取日期數據中的“日期”和“時間”部分，拼接后返回。

整個程序執行后的運行界面如下圖所示：