前言：關于ABP架構，部落客關注差不多有兩年了吧，一直遲遲沒有嘗試。一方面部落客覺得像這種複雜的開發架構肯定有它的過人之處，系統的穩定性和健壯性比一般的開源架構肯定強很多，可是另一方面每每想到它繁瑣的封裝和複雜的開發流程就望而卻步，就這樣遲遲沒有行動。最近在項目裡面用到了ABP架構，沒辦法，隻有硬着頭皮上了。經過這一段時間的熟悉，算是對這個架構有了一個大概的了解。今天來分享下如何在ABP架構的模式裡面使用bootstrapTable元件。
本文原創位址：http://www.cnblogs.com/landeanfen/p/7261651.html
ABP是“ASP.NET Boilerplate Project (ASP.NET樣闆項目)”的簡稱，它是一個成熟的開源架構，基于DDD+Repository模式，自帶Zero權限和認證子產品，避免了從零開始搭建架構的煩惱。關于ABP的架構優勢就此打住，因為這樣說下去要說三天三夜，脫離文本主題。
關于ABP的入門，部落客不想說太多，園子裡面tkb至簡和陽光銘睿有很多入門級的文章，有興趣的可以了解下，還是給出它的官網和開源位址。
ABP官方網站：http://www.aspnetboilerplate.com
ABP開源項目：https://github.com/aspnetboilerplate
PS：如果你不願意去看它的源碼，可以直接檢視ABP官網上面的示範位址：https://aspnetzero.com/?ref=abptmplpage
點選CREATE MY DEMO按鈕，系統會自動為你生成示範位址
進入對應的Demo URL
使用示範的使用者名和密碼登陸進去
可以看到Zero子產品的實作效果。
如果你下載下傳ABP的源碼，并且選擇的是混合開發模式（ABP提供了兩種開發模式，一種是基于MVVM的Angular.js的模式；另一種就是MVC+jQuery的混合開發模式），如下圖：
當你Down下來源碼之後你就會發現，ABP的源碼裡面的UI部分的表格都是使用jTable去實作的。為什麼會用jTable？原因很簡單，jTable是ABP的作者kalkan寫的一款開源插件，自己寫的肯定用自己的東西喽。下面jTable的效果來一發。
來一個jtable的父子表：
如果是不帶父子表的簡單表格，其實jTable的效果其實還行，可是加上一些複雜的功能之後，那一片片藍色的區域不忍直視，并且jTable的api還有待完善，很多需要的功能都需要自己去實作，于是就接到了将所有的表格元件換成BootstrapTable的需求，才有了今天的主題：在ABP中封裝BootstrapTable。
接到需求，部落客各種百度、各種谷歌，都找不到Bootstrap Table元件在ABP中的封裝，有的隻是在ABP的項目裡面簡單的用傳統的方式去初始化元件，這并不是部落客想要的。說到這裡不得不說一下，如果你使用ABP開發的過程中遇到一些難題，你會發現很難從百度裡面搜尋到相關答案，谷歌裡面有時能找到，但大部分都是英文社群，是以如果你英文較弱，在查找資料上面會很吃虧，有時一個簡單的配置問題需要折騰很久。
首先來看看jTable在一般的ABP項目裡面是如何初始化的。比如我們在Application裡面有一個如下的接口和實作
然後我們前端有一個頁面的清單資料從這個接口GetRequisitionListAsync()擷取
得到如下效果：
代碼釋疑：
（1） var _service = abp.services.app.requisition; 這一句聲明目前頁面需要使用哪個服務。
（2） _service.getRequisitionListAsync 這一句對應的是服務調用的方法，你會發現在背景方法名是GetRequisitionListAsync()，而在js裡面卻變成了getRequisitionListAsync()，我們暫且稱之為“潛規則”。
通過上述代碼你會發現，ABP在application層裡面定義的方法，最終會生成某一些js對應的function，這裡難點來了。我們找遍了bootstrapTable元件的api，都沒有通過某一個function去擷取資料的啊。這可如何是好？為這個問題，部落客折騰了兩天。最開始部落客想，function最終還不是要換成http請求的，我們隻要拿到http請求的url，然後将function轉換為url不就行了麼：
我們使用bootstrapTable元件初始化的時候聲明 {url:'/api/services/app/requisition/GetRequisitionListAsync'} 這樣不就行了麼？呵呵，經過測試，這樣确實能正确取到資料。但是不夠理想，因為這前面的字首是ABP給我們生成的，是否會變化我們尚且不說，給每一個url加上這麼一長串着實看着很不爽，于是進一步想，是否我們的bootstrapTable也可以使用function去初始化呢，元件沒有，難道我們就不能給他擴充一個嗎？我們不用url擷取資料，通過調用這個function取到資料，然後将資料渲染到元件不就行了。思路有了，那麼這裡有兩個難題：一是如何将原來url的方式變成這裡的調用function的方式呢？二是參數的封裝。經過檢視元件的源碼發現，如果是服務端分頁，元件最終是進入到initServer()這個方法去擷取資料，然後渲染到頁面上面的，元件原始的initServer()方法如下：
元件原始initServer()方法
代碼不難讀懂，解析參數，整合參數，得到參數，發送ajax請求，在success事件裡面将得到的資料渲染到界面。讀懂了這段代碼，我們再來封裝function就容易多了。
最終我們封裝的代碼如下：
代碼釋疑：增加兩個參數 methodParams: {},abpMethod: function () { } 來擷取abp的function和參數，然後擷取資料的時候如果定義了abpMethod，則通過function擷取資料，否則還是走原來的邏輯。
然後我們調用就簡單了
得到如下效果
通過以上一個簡單的封裝，順利将bootstrapTable融入到了ABP的操作方式裡面。是不是很easy！在使用ABP的過程中，部落客還做了其他一些封裝，以後有機會再來介紹，關于ABP的技術交流歡迎聯系部落客。這一篇就到這裡，歡迎交流。如果你覺得本文能夠幫助你，可以右邊随意 打賞 部落客，打賞後可以獲得部落客永久免費的技術支援。
本文原創出處：http://www.cnblogs.com/landeanfen/
歡迎各位轉載，但是未經作者本人同意，轉載文章之後必須在文章頁面明顯位置給出作者和原文連接配接，否則保留追究法律責任的權利