S2JH:基于jqGrid集成扩展的表格Grid组件功能

EntDIY 发布于 2013/10/12 12:39
阅读 1K+
收藏 6

作为 S2JH: 基于SSH的企业Web应用开发框架 提供相关技术点介绍系列,一方面算是给出自己对某一个特定问题的设计实现思路分享供有兴趣朋友参考,另一方面也算是与大家一起探讨汲取各位同行更多更好的设计。更多框架相关技术文档可直接访问: https://github.com/xautlx/s2jh/wiki/Index ,项目代码库:https://github.com/xautlx/s2jh

-------------------------------------------正文部分--------------------------------------------

完整在线更新内容请直接访问:https://github.com/xautlx/s2jh/wiki/Grid

总体说明

对于企业应用具有一个功能强大的表格Grid组件,无论对于开发和用户体验来说,都能起到事半功倍的效果。经过多个项目经验积累,框架选择了目前主流的linkJQuery jqGrid插件。 该Grid组件功能非常丰富强大,除了一些分页、多字段排序等基础功能外,还包括诸如TreeGrid、SubGrid、AdvancedSearch、Group、ColumnChooser等众多高级特性,具体可参考其官方示例linkjqGrid Demo

框架层面一方面从前端对组件进行了封装增强,使开发过程只需简单基础配置定义即可拥有强大的表格组件功能;另一方面与Java后端进行充分整合,封装简化实现基本无需或很少量编码即可具有复杂的分页、排序、条件查询、Excel导出等功能。

典型功能介绍

以下对框架集成Grid组件的一些典型功能进行截图示意介绍,由于框架还在不断完善过程中,以下截图可能和最新版本有所差异,但基本不影响功能使用介绍。

快速过滤查询

组件上方的快速过滤查询区域,可以实现对列数据方便快速的过程查询,支持常见的三种输入类型:

  • 文本框: 可以快速输入文本、数字等查询条件

grid-filter-input

  • 下拉框:可以对于一些枚举类型数据以下拉框选取方式快速过滤查询

grid-filter-select

  • 日期选取组件:日期类型数据快速选取查询

grid-filter-date

除此,点击各查询输入组件左侧的操作符链接即可快速切换查询类型,各列会根据列数据类型或用户定义动态显示可选的查询类型:

grid-filter-oper

分页、排序

  • 分页导航信息和操作区域
  • 排序:支持多字段组合排序,根据点击先后和次数组合多字段排序

grid-filter-pagesort

主要操作按钮

grid-filter-buttons

从左至右依次说明:

  • 添加按钮:点击出现数据新增界面;

  • 删除按钮:删除选择数据;

  • 查询按钮:点击弹出高级组合查询窗口,在此窗口可实现复杂的嵌套组合条件查询;

grid-filter-advsearch

  • 刷新按钮:点击强制表格重新加载数据;

  • 列选择器按钮:点击弹出列选择器界面,可以实现对列顺序调整、显示/隐藏列控制等;

grid-filter-columns

  • Excel下载按钮:基于当前动态显示的列和行项数据导出Excel下载文件(注意:通用功能只实现当前页码表格数据导出,如果需要导出所有查询数据需要单独编码实现);

grid-filter-export

其他特性

具体可访问showcase示例应用体验这些特性效果。

  • 奇偶行颜色交替
  • 表头宽度调整
  • 表头列顺序调整
  • 双击行项事件

 

加载中
0
吕栋
吕栋
我现在用的这个,但好多不明白的,没有一个好的中文文档,来学习!求中文文档
0
EntDIY
EntDIY

引用来自“吕栋”的答案

我现在用的这个,但好多不明白的,没有一个好的中文文档,来学习!求中文文档
这个还真不好意思,一般都是直接上官网查文档和演示,没有现成的中文文档。不过总体来说我是感觉非常强大,是我用过里面感觉最好的Grid组件。
返回顶部
顶部