基于Metronic的Bootstrap开发框架经验总结（18）-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

在我们开发系统界面，包括Web和Winform的都一样，主要的界面就是列表展示主界面，编辑查看界面，以及一些辅助性的如导入界面，选择界面等，其中列表展示主界面是综合性的数据展示界面，一般往往需要对记录进行合理的分页，集成各种增删改查的按钮等功能。随着开发项目的需求变化，对数据记录分页展示、排序等功能都是常态的要求，因此在代码生成工具中调整了主列表界面的列表展示插件为Bootstrap-table插件，本篇随笔主要介绍在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持功能。

1、Web界面列表分页处理

1）常规分页方式

最开始的Web界面列表分页，使用较为常规Bootstrap Paginator分页模式，内容生成以HTML组合方式，先设置表头，然后获取分页列表数据，遍历生成相关的HTML数据，增加到页面上，这种方式也是比较高效的处理方式，如我在本系列开始的随笔《基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用》介绍中一样。有时候为了业务数据的快速查询，也会在左侧放置一个树列表方便查询分类，界面如下所示。

这种方式可控性非常好，而且可以对HTML代码进行完全的控制，非常适合在自定义界面中展示一些数据，如我之前介绍过的图标分页展示界面一样，完全是自定义的内容展示，图标界面如下所示。

2）Bootstrap-table插件分页

使用常规的分页方式界面可控性非常方便，不过随着不同项目的一些特殊要求，对表头排序的需求也是非常强烈的，上面的分页处理方式无法实现表头的排序功能，因此引入了使用非常广泛的Bootstrap-Table插件，该插件应用很广、功能非常强大，可以通过属性配置实现很细致的功能控制。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card View视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能。

因此我对这个插件进行了使用研究并进行总结，这个插件的详细使用可以参考我的随笔《基于Metronic的Bootstrap开发框架经验总结（16）-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理》进行了解。这个插件界面展示也是非常美观的。

这个插件最显著的特点就是完美支持客户端或者服务器的数据列排序处理，单击表头就可以实现排序操作。

2、在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

我们的代码生成工具Database2Sharp是为了框架开发服务的，不管是Winform还是Web开发，都可以基于数据库的基础上进行框架代码的快速生成，以及界面的代码生成，本次调整的代码生成工具功能，在列表界面代码中增加了对Bootstrap-table插件分页的支持，使得我们开发Bootstrap框架的界面代码更加丰富、快捷。

在代码生成工具Database2Sharp上，我们先使用Enterprise Library代码增量生成主体框架的框架代码。

然后在使用Bootstrap的Web界面代码生成功能，如下可以在工具栏界面中选择。

选择数据库和表后，可以进行界面代码（包括控制器代码、视图界面代码）两部分，其中视图分为两种模式，一种是利用Bootstrap-table插件的分页及排序（index.cshtml），一种是常规的Bootstrap Paginator分页处理（index2.cshtml）。

老客户可以继续使用index2.cshtml的样式，也可以使用最新的Bootstrap-table插件的分页及排序方式（index.cshtml）。

生成的界面分为HTML部分和JS部分，都是比较紧密联系的两部分，我们进行一定的调整即可实现丰富的界面排版。

部分的JS代码（展示分页部分处理）如下所示。

列表数据的显示列，默认是以数据库的字段进行生成，我们在生成后可以进行一定的调整，可以合理显示我们关注的数据。

当然生成的界面代码还有很多其他的JS代码，如编辑、查看的代码和控件对应，导入、导出等代码的处理，都是一并生成的，我们根据需要进行一定的裁剪调整即可完成整个界面的处理了，极大的提高开发效率。