使用ExtJS GridPanel從Web Service 獲取、綁定和顯示數(shù)據(jù)_.Net教程
推薦:用Xaml做網(wǎng)頁框架下面就開始編寫XAML,首先來定義一下頁面的屬性: 以下為引用的內(nèi)容: <Page xmlns="http://schemas.microsoft
本文將向大家介紹一種使用 ExtJS 的 GridPanel 組件從 ASP.NET Web Service 獲取 XML 數(shù)據(jù)并進(jìn)行綁定和顯示的方法。
GridPanel 組件在進(jìn)行數(shù)據(jù)綁定時(shí)可以接收多種數(shù)據(jù)格式。其中以 JSON 和 XML 最為常見。如果要給 GridPanel 綁定 JSON 格式的數(shù)據(jù)(這也是網(wǎng)上“通用”和“熱門”的解決方案),那么我們需要修改 Web Service 的 Web.config 設(shè)置,將輸出數(shù)據(jù)的格式改為 JSON(默認(rèn)為 XML。設(shè)置方法可參見:http://www.cnblogs.com/regedit/archive/2008/03/04/1089948.html 一文)。
個(gè)人認(rèn)為此方法過于繁瑣,為了保證對(duì)現(xiàn)有的 Web Service 不做較大的調(diào)整,我決定還是繼續(xù)讓其返回 XML 格式的數(shù)據(jù)。因此在對(duì) GridPanel 進(jìn)行數(shù)據(jù)綁定時(shí)就要選用 XML 方式綁定了。也就是說,我們?cè)诮壎〝?shù)據(jù)時(shí)要使用 Ext.data.XmlReader 而不是 Ext.data.JsonReader。具體的實(shí)現(xiàn)方法如下:
1. Web Service 部分:
以下為引用的內(nèi)容: using System; [WebService(Namespace = "http://tempuri.org/")] // SQL 連接字符串 // 從 start 開始 limit 行,按 sort 字段排序,排序方式為 dir(將傳入 "asc" 或 "desc") // 從數(shù)據(jù)庫獲取數(shù)據(jù),放入 record 表 // 計(jì)算總行數(shù),放入 results 表 return ds; |
GetAritcles 將返回一個(gè) DataSet。其內(nèi)包括兩個(gè) DataTable,第一個(gè)存放了(跟據(jù) start 和 limit 參數(shù)指定的)當(dāng)前頁的數(shù)據(jù),另一個(gè)存放了數(shù)據(jù)庫中所有數(shù)據(jù)的行數(shù),供客戶端的 GridPanel 組件使用。客戶端部分(節(jié)選):
以下為引用的內(nèi)容: <script type="text/javascript"> // 數(shù)據(jù)源 // GridPanel 組件 // 格式化日期 <!-- GridPanel 組件的顯示位置 --> |
從 Web Service 中由 GetArticles 方法返回的是 XML 數(shù)據(jù)。在將數(shù)據(jù)綁定到 Ext.data.Store 組件時(shí)應(yīng)使用 Ext.data.XmlReader 而不是網(wǎng)上經(jīng)常看到的 Ext.data.JsonReader。綁定時(shí)我們需要“告訴” XmlReader 在 XML 數(shù)據(jù)中哪些節(jié)點(diǎn)代表數(shù)據(jù)條目(本例為“record”),哪個(gè)節(jié)點(diǎn)代表數(shù)據(jù)總數(shù)(本例為“totalRecords”),以及數(shù)據(jù)的主鍵節(jié)點(diǎn) (本例為“Id”)。您可以通過下圖來理解 XmlReader 的數(shù)據(jù)綁定過程:
另外,從上圖中的 XML 數(shù)據(jù)可以看出,日期(Date)的格式比較“丑陋”,如果不加修飾的話將會(huì)原樣顯示于客戶的 GridPanel 組件中。因此在客戶端顯示數(shù)據(jù)之前,需要對(duì)日期數(shù)據(jù)進(jìn)行一下加工。在創(chuàng)建 Ext.grid.ColumnModel 時(shí)為 Date 列指定 renderer(注意加粗部分):
{header:'日期',dataIndex:'Date',sortable:true,width:50, renderer: renderDate}
代碼中的“renderDate”是一個(gè) JavaScript 函數(shù),定義如下:
以下為引用的內(nèi)容: 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); } |
此函數(shù)中的 value 參數(shù)即為原始的日期數(shù)據(jù),由 Ext.grid.ColumnModel 傳入。在函數(shù)中使用正則表達(dá)式分別提取日期數(shù)據(jù)中的“日期”和“時(shí)間”部分,拼接后返回。
整個(gè)程序執(zhí)行后的運(yùn)行界面如下圖所示:
分享:校內(nèi)網(wǎng)API的.net版本XiaoNei.Net 1.0(非官方)校內(nèi)API開放也有一段時(shí)間了,也沒有太關(guān)注,正好新版本的SNS開發(fā)到了API這一塊,正好借鑒一下XiaoNei,F(xiàn)B,MySpace的API。 且聞校內(nèi)API比較有前途,最近的API編程大賽也比較火,而且人氣也較
- asp.net如何得到GRIDVIEW中某行某列值的方法
- .net SMTP發(fā)送Email實(shí)例(可帶附件)
- js實(shí)現(xiàn)廣告漂浮效果的小例子
- asp.net Repeater 數(shù)據(jù)綁定的具體實(shí)現(xiàn)
- Asp.Net 無刷新文件上傳并顯示進(jìn)度條的實(shí)現(xiàn)方法及思路
- Asp.net獲取客戶端IP常見代碼存在的偽造IP問題探討
- VS2010 水晶報(bào)表的使用方法
- ASP.NET中操作SQL數(shù)據(jù)庫(連接字符串的配置及獲取)
- asp.net頁面?zhèn)髦禍y(cè)試實(shí)例代碼
- DataGridView - DataGridViewCheckBoxCell的使用介紹
- asp.net中javascript的引用(直接引入和間接引入)
- 三層+存儲(chǔ)過程實(shí)現(xiàn)分頁示例代碼
.Net教程Rss訂閱編程教程搜索
.Net教程推薦
- 如何使ASP.NET 避免頁面重新整理時(shí)重復(fù)送出
- .Net業(yè)務(wù)平臺(tái)的數(shù)值精度陷阱與解決方法
- .net調(diào)用存儲(chǔ)過程詳細(xì)介紹
- 探索 ASP.NET Futures
- 如何實(shí)現(xiàn)無刷新的DropdownList聯(lián)動(dòng)效果
- 試析ASP.NET的IIS映射
- 如何使用ASP.NET Image Generation生成圖片縮略圖及水印
- 進(jìn)程性能計(jì)數(shù)器已禁用的解決辦法
- 在ASP.NET ORACLE添加數(shù)據(jù)記錄并讓ID自動(dòng)增量
- Asp.net ajax實(shí)現(xiàn)任務(wù)提示頁面
- 相關(guān)鏈接:
復(fù)制本頁鏈接| 搜索使用ExtJS GridPanel從Web Service 獲取、綁定和顯示數(shù)據(jù)
- 教程說明:
.Net教程-使用ExtJS GridPanel從Web Service 獲取、綁定和顯示數(shù)據(jù)。