基于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插件的分页及排序支持,如需转载请自行联系原博主。

目录
打赏
0
0
0
0
24
分享
相关文章
AI 程序员的4个分身 | 代码生成专家+注释精灵+API集成助手+智能调试伙伴
AI 程序员的4个分身 | 代码生成专家+注释精灵+API集成助手+智能调试伙伴
261 35
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
354 1
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
基于爬虫和机器学习的招聘数据分析与可视化系统,python django框架,前端bootstrap,机器学习有八种带有可视化大屏和后台
本文介绍了一个基于Python Django框架和Bootstrap前端技术,集成了机器学习算法和数据可视化的招聘数据分析与可视化系统,该系统通过爬虫技术获取职位信息,并使用多种机器学习模型进行薪资预测、职位匹配和趋势分析,提供了一个直观的可视化大屏和后台管理系统,以优化招聘策略并提升决策质量。
463 4
Qwen-coder实现本地 RAG 框架能力Bootstrap
本文介绍了如何利用Qwen-coder在本地实现RAG框架能力提升,解决了企业知识库管理中的数据安全和半结构化文档处理问题。通过Qwen2.5-72b模型和多轮对话推理,成功实现了对包含图表内容的文档的高效预处理,提升了知识库检索的准确性和安全性。
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
springboot 集成 mybatis-plus 代码生成器
本文介绍了如何在Spring Boot项目中集成MyBatis-Plus代码生成器,包括导入相关依赖坐标、配置快速代码生成器以及自定义代码生成器模板的步骤和代码示例,旨在提高开发效率,快速生成Entity、Mapper、Mapper XML、Service、Controller等代码。
springboot 集成 mybatis-plus 代码生成器
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
本文介绍了一个基于Python协同过滤算法的旅游景点推荐系统,该系统采用Django框架、MySQL数据库、Bootstrap前端和echarts数据可视化技术,旨在为用户提供个性化的旅游推荐服务,提升用户体验和旅游市场增长。
989 9
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
基于用户画像及协同过滤算法的音乐推荐系统,采用Django框架、bootstrap前端,MySQL数据库
本文介绍了一个基于用户画像和协同过滤算法的音乐推荐系统,使用Django框架、Bootstrap前端和MySQL数据库构建,旨在为用户提供个性化的音乐推荐服务,提高推荐准确性和用户满意度。
658 7
基于用户画像及协同过滤算法的音乐推荐系统,采用Django框架、bootstrap前端,MySQL数据库
基于朴素贝叶斯算法的新闻类型预测,django框架开发,前端bootstrap,有爬虫有数据库
本文介绍了一个基于Django框架和朴素贝叶斯算法开发的新闻类型预测系统,该系统具备用户登录注册、后台管理、数据展示、新闻分类分布分析、新闻数量排名和新闻标题预测等功能,旨在提高新闻处理效率和个性化推荐服务。
Python基于Django框架图书管理系统,Bootstrap框架UI,后台EasyUI框架UI,有登录,实现增删改查的富文本效果
本文介绍了一个使用Python Django框架开发的图书管理系统,该系统采用Bootstrap框架进行前端UI设计,EasyUI框架用于后台UI界面,集成了富文本编辑器,并实现了登录及增删改查功能。
183 1

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等