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

本文转自博客园伍华聪的博客,原文链接:基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持,如需转载请自行联系原博主。

目录
相关文章
|
8天前
|
JavaScript 前端开发 持续交付
Prettier 高级应用:集成 CI/CD 流水线与插件开发
【10月更文挑战第18天】Prettier 是一款流行的代码格式化工具,它能够自动将代码格式化成一致的风格,从而提高代码的可读性和维护性。对于希望进一步发挥 Prettier 潜力的高级用户而言,将 Prettier 集成到持续集成(CI)和持续部署(CD)流程中,确保每次提交的代码都符合团队标准,是非常重要的。此外,通过开发自定义插件来支持更多语言或扩展 Prettier 的功能也是值得探索的方向。本文将详细介绍这两方面的内容。
27 2
|
5天前
|
Java 程序员 API
Android|集成 slf4j + logback 作为日志框架
做个简单改造,统一 Android APP 和 Java 后端项目打印日志的体验。
23 1
|
2月前
|
算法 API Apache
Flink CDC:新一代实时数据集成框架
本文源自阿里云实时计算团队 Apache Flink Committer 任庆盛在 Apache Asia CommunityOverCode 2024 的分享,涵盖 Flink CDC 的概念、版本历程、内部实现及社区未来规划。Flink CDC 是一种基于数据库日志的 CDC 技术实现的数据集成框架,能高效完成全量和增量数据的实时同步。自 2020 年以来,Flink CDC 经过多次迭代,已成为功能强大的实时数据集成工具,支持多种数据库和数据湖仓系统。未来将进一步扩展生态并提升稳定性。
500 1
Flink CDC:新一代实时数据集成框架
|
2月前
|
监控 关系型数据库 MySQL
zabbix agent集成percona监控MySQL的插件实战案例
这篇文章是关于如何使用Percona监控插件集成Zabbix agent来监控MySQL的实战案例。
41 2
zabbix agent集成percona监控MySQL的插件实战案例
|
19天前
|
开发框架 监控 搜索推荐
GoFly快速开发框架集成ZincSearch全文搜索引擎 - Elasticsearch轻量级替代为ZincSearch全文搜索引擎
本文介绍了在项目开发中使用ZincSearch作为全文搜索引擎的优势,包括其轻量级、易于安装和使用、资源占用低等特点,以及如何在GoFly快速开发框架中集成和使用ZincSearch,提供了详细的开发文档和实例代码,帮助开发者高效地实现搜索功能。
|
3月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
|
3月前
|
存储 消息中间件 前端开发
Web2py框架下的神秘力量:如何轻松集成第三方API,让你的应用不再孤单!
【8月更文挑战第31天】在开发现代Web应用时,常需集成第三方服务如支付网关、数据存储等。本文将指导你使用Web2py框架无缝接入第三方API。通过实例演示从注册获取API密钥、创建控制器、发送HTTP请求到处理响应的全过程。利用`requests`库与Web2py的内置功能,轻松实现API交互。文章详细介绍了如何编写RESTful控制器,处理API请求及响应,确保数据安全传输。通过本教程,你将学会如何高效整合第三方服务,拓展应用功能。欢迎留言交流心得与建议。
47 1
|
3月前
|
测试技术 Java Spring
Spring 框架中的测试之道:揭秘单元测试与集成测试的双重保障,你的应用真的安全了吗?
【8月更文挑战第31天】本文以问答形式深入探讨了Spring框架中的测试策略,包括单元测试与集成测试的有效编写方法,及其对提升代码质量和可靠性的重要性。通过具体示例,展示了如何使用`@MockBean`、`@SpringBootTest`等注解来进行服务和控制器的测试,同时介绍了Spring Boot提供的测试工具,如`@DataJpaTest`,以简化数据库测试流程。合理运用这些测试策略和工具,将助力开发者构建更为稳健的软件系统。
49 0
|
3月前
|
测试技术 持续交付 开发者
Xamarin 高效移动应用测试最佳实践大揭秘,从框架选择到持续集成,让你的应用质量无敌!
【8月更文挑战第31天】竞争激烈的移动应用市场,Xamarin 作为一款优秀的跨平台开发工具,提供了包括单元测试、集成测试及 UI 测试在内的全面测试方案。借助 Xamarin.UITest 框架,开发者能便捷地用 C# 编写测试案例,如登录功能测试;通过 Xamarin 模拟框架,则可在无需真实设备的情况下模拟各种环境测试应用表现;Xamarin.TestCloud 则支持在真实设备上执行自动化测试,确保应用兼容性。结合持续集成与部署策略,进一步提升测试效率与应用质量。掌握 Xamarin 的测试最佳实践,对确保应用稳定性和优化用户体验至关重要。
58 0
|
3月前
|
数据库 Java 数据库连接
Struts 2 与 Hibernate 的完美邂逅:如何无缝集成两大框架,轻松玩转高效 CRUD 操作?
【8月更文挑战第31天】本文通过具体示例介绍了如何在 Struts 2 中整合 Hibernate,实现基本的 CRUD 操作。首先创建 Maven 项目并添加相关依赖,接着配置 Hibernate 并定义实体类及其映射文件。然后创建 DAO 接口及实现类处理数据库操作,再通过 Struts 2 的 Action 类处理用户请求。最后配置 `struts.xml` 文件并创建 JSP 页面展示用户列表及编辑表单。此示例展示了如何配置和使用这两个框架,使代码更加模块化和可维护。
64 0