前面幾篇文章分別介紹了用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ù)項的問題

涉及到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àn)。而且實(shí)現(xiàn)本文這個項目實(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í)現(xiàn)的Grid運(yùn)行效果截圖:

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

   

   

   1. 批量修改

   

   

    

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

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

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

   3) 簡化的form提交

    

   ExtHelper.js
   //該函數(shù)用于將編輯過的Grid中的數(shù)據(jù)行對應(yīng)的Store中的數(shù)據(jù)項轉(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: '操作失敗！',
              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日更新內(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í)例項目中下載

    

   8月9日更新

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

    

   效果圖：

    

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

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