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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

1. 分頁排序效果

   加載中

   

   加載完畢

   

   排序

   

2. 新增記錄

   

   

   

3. 批量刪除

1. 批量修改

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

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

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

3) 簡化的form提交

ExtHelper.js
//該函數(shù)用于將編輯過的Grid中的數(shù)據(jù)行對應(yīng)的Store中的數(shù)據(jù)項(xiàng)轉(zhuǎn)換成JSON
function convertRecordsToJson(items)
   {
           if(items.length==0)
           {
               return '';
           }
           var  jsonData = "[";
            for(i=0;i<items.length;i++) {
                    record = items[i];
                    if(record.dirty) {
                            jsonData += Ext.util.JSON.encode(record.data) + ",";
                    }
            }                                          
          jsonData = jsonData.substring(0,jsonData.length-1) + "]";      
          return jsonData;
   }
   //顯示一個進(jìn)度對話框
   function showProcessMsg()
   {
        Ext.MessageBox.show({
                    msg: '正在保存數(shù)據(jù), 請稍侯',
                    progressText: '正在保存中',
                    width:300,
                    wait:true,
                    waitConfig: {interval:200},
                    icon:'ext-mb-save'                 
          });
   }
   
   function showError()
   {
        Ext.MessageBox.hide();
        Ext.MessageBox.show({
           title:'錯誤',
           msg: '操作失?。?/SPAN>',
           buttons: Ext.Msg.OK,
           icon: Ext.MessageBox.ERROR
        });
   }
 
 function submit(form,url,method,params,success,failure)
 {
     form.submit({
        url:url,
        method:method,
        params:params,
        success:success,
        failure:failure
     });
 }

示例項(xiàng)目: http://cid-90a19c48cf229168.skydrive./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)行截圖：

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

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

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

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

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

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

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

8月5日修正版：http://cid-90a19c48cf229168.skydrive./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)目：

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