新擴(kuò)展的Grid將包括以下功能: 分頁功能 遠(yuǎn)程排序功能 添加新紀(jì)錄功能 批量刪除功能 批量更新功能 2008年8月5日新增功能 1) 篩選功能 2）刷新功能 3）Excel導(dǎo)出功能 2008年8月9日新增功能 1) 擴(kuò)展了Excel導(dǎo)出功能為導(dǎo)出當(dāng)前頁和導(dǎo)出全部?jī)煞N

 

本系列文章列表

1)  Ajax訪問Xml Web Service的安全問題以及解決方案

2)  Ajax與WCF交互-WCF之美

3)  Ajax與Wcf交互-JSON

4)  ExtJs與WCF交互:生成樹

5)  用ExtJs+Linq+Wcf打造簡(jiǎn)單grid

6)  ExtJs+WCF+LINQ實(shí)現(xiàn)分頁Grid

7)  ExtJs與WCF之間的跨域訪問

8)  異步調(diào)用Restful的WCF服務(wù)

9)  用Restful方式調(diào)用WCF進(jìn)行上傳下載

10) 再說ExtJs與WCF之間的跨域訪問

11) [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid

12) 【封裝】WCF+LINQ+ExtJS做更簡(jiǎn)單的Grid

 

   前面幾篇文章分別介紹了用ExtJs+WCF+LINQ實(shí)現(xiàn)分頁,排序,跨域查詢等基本功能,本文便對(duì)上面的Grid進(jìn)行進(jìn)一步擴(kuò)展。新擴(kuò)展的Grid將包括以下功能:

1. 分頁功能
2. 遠(yuǎn)程排序功能
3. 添加新紀(jì)錄功能
4. 批量刪除功能
5. 批量更新功能

并且，如題目中介紹一致，這個(gè)全功能Grid結(jié)合了下面幾種技術(shù):

1. WCF,而且采用Web Model方式。
2. ExtJs
3. LINQ

這三種都是比較新的技術(shù)，尤其是完全采用Rest方式使得ExtJS與WCF進(jìn)行比較復(fù)雜的交互，這個(gè)環(huán)節(jié)實(shí)現(xiàn)原理非常簡(jiǎn)單，就是采用JSON格式在前后臺(tái)交互數(shù)據(jù)，但涉及到的細(xì)節(jié)還是比較多的。LINQ雖然很火，被人說得神乎其神，使用起來也是有諸多要注意的環(huán)節(jié)。ExtJS中有關(guān)UI的細(xì)節(jié)也存在不少，總結(jié)一下，本文中主要解決了如下幾條難題：

涉及到ExtJs的包括如下幾點(diǎn)：

1. 在ExtJs的Grid中格式化時(shí)間顯示問題
2. 在ExtJs中添加自定義控件列問題
3. 設(shè)定ExtJs中列主鍵的問題
4. 將Ext.data.Record數(shù)組格式化成JSON字符串問題
5. 用Ext.util.JSON.encode序列化javascirpt對(duì)象中有中文時(shí)候的亂碼問題
6. 在ExtJs中提交的時(shí)候顯示進(jìn)度條的問題
7. 在對(duì)Grid進(jìn)行多次編輯后，如何取得編輯和數(shù)據(jù)項(xiàng)的問題

涉及到WCF的包括如下幾點(diǎn)：

1. 如何返回能用于ExtJs中Grid分頁顯示的數(shù)據(jù)契約對(duì)象集合。
2. 如何返回原始數(shù)據(jù)格式的數(shù)據(jù)（原始數(shù)據(jù)格式極大的提高了WCF的靈活度，為上傳下載，跨域等問題提供了保證）
3. 如何獲取通過POST方式傳遞的復(fù)雜數(shù)據(jù)。
4. 如何將客戶端傳遞過來的JSON字符串序列化為數(shù)據(jù)契約的對(duì)象

涉及到LINQ的包括如下幾點(diǎn)

1. 如何實(shí)現(xiàn)數(shù)據(jù)的分頁查詢
2. 如何動(dòng)態(tài)的對(duì)數(shù)據(jù)字段進(jìn)行排序
3. 如何添加數(shù)據(jù)
4. 如何批量刪除數(shù)據(jù)
5. 如何批量更新數(shù)據(jù)，批量更新數(shù)據(jù)遇到并發(fā)沖突的時(shí)候，如何解決。

上面這些問題，在本文所實(shí)現(xiàn)的實(shí)例項(xiàng)目中均有所體現(xiàn)。而且實(shí)現(xiàn)本文這個(gè)項(xiàng)目實(shí)例，還需要注意如下幾點(diǎn)：

1. 因?yàn)楸疚臎]有涉及到級(jí)聯(lián)關(guān)系，為了添加，修改，刪除等操作成功進(jìn)行，需要將示例數(shù)據(jù)庫(kù)AdventureWorks中數(shù)據(jù)表Product中的全部關(guān)系刪除
2. 因?yàn)樵贓xtJs與WCF交互中, DataContractJsonSerializer不支持DateTime的序列化，查閱了一下MSDN，不是DataContractJsonSerializer不支持序列化DateTime，它能夠與Asp.Net Ajax之間對(duì)DateTime數(shù)據(jù)進(jìn)行交互，但經(jīng)過試驗(yàn)對(duì)ExtJs卻不行，看了一下，好像應(yīng)該是缺少轉(zhuǎn)義字符的原因。試圖反格式化Ext.util.JSON.encode后產(chǎn)生的JSON字符串會(huì)產(chǎn)生如下的異常：

   

   所以本文實(shí)例中將數(shù)據(jù)契約Product中的DateTime類型均轉(zhuǎn)換為了String類型

3. 經(jīng)過第二步的處理之后，利用LINQ對(duì)數(shù)據(jù)進(jìn)行更新卻說什么也不能成功了，總是有數(shù)據(jù)并發(fā)的問題，解決辦法是設(shè)置Product中的這幾個(gè)字段的UpdateCheck=UpdateCheck.Never

下面看下最后實(shí)現(xiàn)的Grid運(yùn)行效果截圖:

1. 分頁排序效果

   加載中

   

   加載完畢

   

   排序

   

2. 新增記錄

   

   

   

3. 批量刪除

1. 批量修改

 

 而且,本文的項(xiàng)目中抽象出了幾個(gè)常用的js功能方法

1) 格式化數(shù)組對(duì)象為JSON

2) 顯示進(jìn)度條

3) 簡(jiǎn)化的form提交

 

 

示例項(xiàng)目: http://cid-90a19c48cf229168.skydrive.live.com/self.aspx/%e5%8d%9a%e5%ae%a2%e5%9b%ad%e4%bb%a3%e7%a0%81%e7%a4%ba%e4%be%8b/ExtJs%7C_Wcf%7C_Linq%7C_ALLFeatureGrid.rar

 

8月5日更新內(nèi)容:

1) 增加了篩選功能

2）增加了刷新功能

3）增加了Excel導(dǎo)出功能

ExtJs下有強(qiáng)大的篩選功能，并且根據(jù)數(shù)據(jù)類型，可以分為如下幾種篩選器：

1) StringFilter

2) NumericFilter

3) DateFilter

4) BooleanFilter

5) ListFilter

它們都派生于Filter，用于ExtJsGrid的條件查詢上，效果非常棒。

根據(jù)語言需要，我將里面的代碼改善了下，以支持中文，下面是運(yùn)行截圖：

 

 

 

從上圖可以看出，對(duì)于NumericFilter來說，刷選方式會(huì)有三種大于，小于，等于這樣非常方便的對(duì)數(shù)字類型數(shù)據(jù)進(jìn)行篩選，如果有in就更好了

更重要的是還支持多字段篩選，下面在上圖的基礎(chǔ)上做進(jìn)一步篩選

 

而且，默認(rèn)條件下DataFilter中顯示的前后中，分別為before,after,on,BooleanFilter中顯示也只是yes,no，我對(duì)其做了擴(kuò)展。

 

上面的篩選功能記住，有時(shí)候進(jìn)行了多次篩選之后，可能對(duì)刷選條件比較混亂，此時(shí)點(diǎn)擊菜單中篩選即可清空刷選，重新加載數(shù)據(jù)

 

 

最重要，本次增加了導(dǎo)出Excel功能，而且該功能相當(dāng)智能，相當(dāng)先進(jìn)，它基于xml，完全不需要組件。前后臺(tái)還能有機(jī)配合實(shí)現(xiàn)前臺(tái)那幾列就導(dǎo)出那幾列，該導(dǎo)出的數(shù)據(jù)導(dǎo)出，不該導(dǎo)出的按鈕列，多選列自動(dòng)排除在外。導(dǎo)出的時(shí)候Filter依然有效，前臺(tái)顯示是分頁的，但后臺(tái)導(dǎo)出卻是沒有分頁整個(gè)列表應(yīng)該顯示的數(shù)據(jù)。導(dǎo)出的數(shù)據(jù)，經(jīng)過測(cè)試，沒有亂碼現(xiàn)象

進(jìn)行刷選后，導(dǎo)出的效果為：

具體實(shí)現(xiàn)方法，因?yàn)榇a較多，涉及到的內(nèi)容比較凌亂，不便一一說明，感興趣的可以在實(shí)例項(xiàng)目中下載

 

8月5日修正版：http://cid-90a19c48cf229168.skydrive.live.com/self.aspx/%e5%8d%9a%e5%ae%a2%e5%9b%ad%e4%bb%a3%e7%a0%81%e7%a4%ba%e4%be%8b/ExtJs%7C_Wcf%7C_Linq%7C_AllFeatureGrid%7C_Edited%7C_0805.rar 

 

8月9日更新

1） 將Excel導(dǎo)出擴(kuò)展為兩種 a)只導(dǎo)出當(dāng)前頁 b）導(dǎo)出全部

 

效果圖：

 

0809修正后項(xiàng)目：

https://files.cnblogs.com/jillzhang/ExtJs_Wcf_Linq_AllFeatureGrid_Edited_0809.rar