基于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 前端开发
安全漏洞检测集成及实践:SAST/DAST工具集成指南
通过合理集成和配置SAST/DAST工具,可以显著提升应用程序的安全性,并在开发早期发现和修复漏洞,降低安全风险和维护成本
892 4
|
8月前
|
人工智能 自然语言处理 安全
代码静态扫描工具集成与实践
代码静态扫描工具(Static Application Security Testing, SAST)是在不运行代码的情况下,通过分析源代码或二进制代码来发现潜在安全漏洞、代码缺陷和质量问题的工具
1005 4
|
8月前
|
Java 测试技术 API
自动化测试工具集成及实践
自动化测试用例的覆盖度及关键点最佳实践、自动化测试工具、集成方法、自动化脚本编写等(兼容多语言(Java、Python、Go、C++、C#等)、多框架(Spring、React、Vue等))
695 6
编解码 算法 vr&ar
609 0
|
9月前
|
人工智能 自然语言处理 安全
Python构建MCP服务器:从工具封装到AI集成的全流程实践
MCP协议为AI提供标准化工具调用接口,助力模型高效操作现实世界。
1598 1
|
10月前
|
人工智能 数据可视化 BI
【2025】项目管理API集成工具指南:提升协作效率的17个必备模块
项目管理API集成工具通过连接不同平台,实现数据自动同步与流程自动化,提升团队协作效率。它支持跨系统操作,如任务同步、文档生成及可视化报表,减少人为错误,增强信息流通。随着技术发展,这类工具在企业数字化转型中扮演关键角色。
625 0
|
人工智能 Java API
支持 40+ 插件,Spring AI Alibaba 简化智能体私有数据集成
通过使用社区官方提供的超过 20 种 RAG 数据源和 20 种 Tool Calling 接口,开发者可以轻松接入多种外部数据源(如 GitHub、飞书、云 OSS 等)以及调用各种工具(如天气预报、地图导航、翻译服务等)。这些默认实现大大简化了智能体的开发过程,使得开发者无需从零开始,便可以快速构建功能强大的智能体系统。通过这种方式,智能体不仅能够高效处理复杂任务,还能适应各种应用场景,提供更加智能、精准的服务。
2032 107
|
人工智能 自然语言处理 Java
FastExcel:开源的 JAVA 解析 Excel 工具,集成 AI 通过自然语言处理 Excel 文件,完全兼容 EasyExcel
FastExcel 是一款基于 Java 的高性能 Excel 处理工具,专注于优化大规模数据处理,提供简洁易用的 API 和流式操作能力,支持从 EasyExcel 无缝迁移。
3788 65
FastExcel:开源的 JAVA 解析 Excel 工具,集成 AI 通过自然语言处理 Excel 文件,完全兼容 EasyExcel
|
人工智能 自然语言处理 搜索推荐
Open Notebook:开源 AI 笔记工具,支持多种文件格式,自动转播客和生成总结,集成搜索引擎等功能
Open Notebook 是一款开源的 AI 笔记工具,支持多格式笔记管理,并能自动将笔记转换为博客或播客,适用于学术研究、教育、企业知识管理等多个场景。
2223 0
Open Notebook:开源 AI 笔记工具,支持多种文件格式,自动转播客和生成总结,集成搜索引擎等功能

热门文章

最新文章