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

Posted 2020-10-08

在我们开发系统界面，包括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代码，如编辑、查看的代码和控件对应，导入、导出等代码的处理，都是一并生成的，我们根据需要进行一定的裁剪调整即可完成整个界面的处理了，极大的提高开发效率。