前言：关于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/
欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利