客户需要做一个公司">信息管理界面,管理员进入后只要点击查询按钮就能查出所需要的信息,在查询的过程中页面不需要刷新,减少用户的等待时间。
前台框架设计:struts 2.0+Dojo 1.7.1
业务逻辑:Spring 3.1
持久层:mybatis 3.0.6 + DB2 9.7
展现层:介绍示例应用程序的展现层的设计
Dojo EnhancedGrid 简介
顾名思义,EnhancedGrid 就是 Grid 的加强版,从 Dojo 1.4 开始就有了。它的存在是由于原先的 DataGrid 虽然功能强大,但很多地方写得比较死,不太便于扩展。因此,继承自 DataGrid 的 EnhancedGrid 就提供了一种较为灵活的插件机制,一方面能使后来的开发者较少受到现有代码的制约;另一方面也是为功能日益繁多的 Grid 瘦身(不用的插件可以不加载)。EnhancedGrid 提供了如下一些新的插件功能:
Nested Sorting – 多行排序。 Indirect Selection – 通过单选按钮和复选按钮选择行。 Filter – 支持自定义类型规则来过滤表格的内容。 Exporter – 把表格内容导出到各种内容。 DnD – Drag-and-drop( 拖放 ) 支持行 / 列 / 表格单元,在单元内外都可以。 Pagination – 分页功能。 CellMerge – 合并相邻的表格单元到一行中。 Search – 通过正则表达式和字符串匹配的方式来
查找表格中的内容。
EnhancedGrid 很像 client/server 架构,基本上一个 grid 就是一个 Excel spreadsheet, 通常它被包裹在一个大的表格里面,借于 HTML 的规范,它用自己的形式来展示表格。具体展现形式如下:
图 1. EnhancedGrid 例图
属性简介:
Dojo EnhancedGrid 有很多属性,这里仅介绍常用的几个属性:
表 1. EnhancedGrid 常用属性介绍
属性 解释 field 数据集里面列的名字 w
idth 列的宽度 editable 能否编辑 :true - 能,false - 不能 formatter 可以改变表格单元值的函数
如何使用 Dojo EnhancedGrid
引入 Dojo EnhancedGrid 控件
要使用 Dojo EnhancedGrid 控件,首先要把此控件加入页面 :
清单 1. 在 JS 文件中引入 Dojo 代码
require(['dojo/_base/array', 'dojo/_base/lang', 'dojo/_base/event', 'dojo/on', 'dojox/grid/EnhancedGrid', 'dojo/data/ItemFileWriteStore', 'dijit/form/Button', 'dojo/dom', 'dojo/parser', 'dojo/domReady!'],
function(array, lang, event, on, EnhancedGrid, ItemFileWriteStore, Button, dom, parser){ parser.parse();}
声明表格的标头
清单 2. 在 Dojo EnhancedGrid 中使用 JSON 定义表头
// 定义 layout 布局,就是定义标题的列标题,宽度 var layout = [[ {'name': 'Id', 'field': 'id', 'width': '3%', editable: true}, {'name': 'Agent Team', 'field': 'agentTeam', 'width': '8%', editable: true}, {'name': 'Community UUid', 'field': 'communityUuid', 'width': '17%', \ editable: true}, {'name': 'View members', 'field': 'communityUuid', 'width': '10%',\ formatter: formatHref}, {'name': 'Forum name', 'field': 'forum', 'width': '10%', editable: true}, {'name': 'Forum Type', 'field': 'forumType', 'width': '6%', editable: true,\ type: dojox.grid.cells.Select, options:["Awards","Program","FAQ","HelpDesk",\ "Best Practices"], values: [ '1', '2','3','4','5' ],formatter: formatForumType}, {'name': 'URL', 'field': 'url', 'width': 'auto', editable: true} ]];