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

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

一、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实现表格记录的查询、分页、排序等处理》进行了解。这个插件界面展现也是很是美观的。

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

 

 二、在代码生成工具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代码，如编辑、查看的代码和控件对应，导入、导出等代码的处理，都是一并生成的，咱们根据须要进行必定的裁剪调整便可完成整个界面的处理了，极大的提升开发效率。