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

1. 分頁功能
2. 遠程排序功能
3. 添加新紀錄功能
4. 批量刪除功能
5. 批量更新功能

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

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

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

涉及到ExtJs的包括如下幾點：

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

涉及到WCF的包括如下幾點：

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

涉及到LINQ的包括如下幾點

1. 如何實現數據的分頁查詢
2. 如何動態的對數據字段進行排序
3. 如何添加數據
4. 如何批量刪除數據
5. 如何批量更新數據，批量更新數據遇到并發沖突的時候，如何解決。

上面這些問題，在本文所實現的實例項目中均有所體現。而且實現本文這個項目實例，還需要注意如下幾點：

1. 因為本文沒有涉及到級聯關系，為了添加，修改，刪除等操作成功進行，需要將示例數據庫AdventureWorks中數據表Product中的全部關系刪除
2. 因為在ExtJs與WCF交互中, DataContractJsonSerializer不支持DateTime的序列化，查閱了一下MSDN，不是DataContractJsonSerializer不支持序列化DateTime，它能夠與ASP.NET Ajax之間對DateTime數據進行交互，但經過試驗對ExtJs卻不行，看了一下，好像應該是缺少轉義字符的原因。試圖反格式化Ext.util.JSON.encode后產生的JSON字符串會產生如下的異常：

   下面看下最后實現的Grid運行效果截圖:

   1. 分頁排序效果
   2. 新增記錄
   3. 批量刪除

   

   

   1. 批量修改

   

   

    

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

   1) 格式化數組對象為JSON

   2) 顯示進度條

   3) 簡化的form提交

    

   ExtHelper.js
   //該函數用于將編輯過的Grid中的數據行對應的Store中的數據項轉換成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;
      }
      //顯示一個進度對話框
      function showProcessMsg()
      {
           Ext.MessageBox.show({
                       msg: '正在保存數據, 請稍侯',
                       progressText: '正在保存中',
                       width:300,
                       wait:true,
                       waitConfig: {interval:200},
                       icon:'ext-mb-save'                 
             });
      }
      
      function showError()
      {
           Ext.MessageBox.hide();
           Ext.MessageBox.show({
              title:'錯誤',
              msg: '操作失敗！',
              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
        });
    }

   8月5日更新內容:

   1) 增加了篩選功能

   2）增加了刷新功能

   3）增加了Excel導出功能

   ExtJs下有強大的篩選功能，并且根據數據類型，可以分為如下幾種篩選器：

   1) StringFilter

   2) NumericFilter

   3) DateFilter

   4) BooleanFilter

   5) ListFilter

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

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

    

    

    

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

   更重要的是還支持多字段篩選，下面在上圖的基礎上做進一步篩選

    

   

   

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

    

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

    

    

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

   

   

   

   進行刷選后，導出的效果為：

   

   具體實現方法，因為代碼較多，涉及到的內容比較凌亂，不便一一說明，感興趣的可以在實例項目中下載

    

   8月9日更新

   1） 將Excel導出擴展為兩種 a)只導出當前頁 b）導出全部

    

   效果圖：

    

   NET技術：[添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid，轉載需保留來源！

   鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。