利用Dojo EnhancedGrid控件进行数据异步传输和保存

客户需要做一个公司">信息管理界面,管理员进入后只要点击查询按钮就能查出所需要的信息,在查询的过程中页面不需要刷新,减少用户的等待时间。

前台框架设计: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} ]];

时间: 2024-08-03 21:02:36

利用Dojo EnhancedGrid控件进行数据异步传输和保存的相关文章

在Winform开发框架中,利用DevExpress控件实现数据的快速录入和选择

在实际的项目开发过程中,有好的控件或者功能模块,我都是想办法尽可能集成到我的WInform开发框架中,这样后面开发项目起来,就可以节省很多研究时间,并能重复使用,非常高效方便.在我很早之前的一篇博客<在GridControl控件中使用SearchLookUpEdit构建数据快速输入>就曾经介绍,如何在列表控件中实现数据的快速录入,本文介绍另外一种方式,通过文本输入框的输入选择,可以实现数据的快速录入,原理和之前一篇差不多,不过这次利用DevExpress控件的GridLookupEdit控件封

利用Aspose.Cell控件导入Excel非强类型的数据

导入Excel的操作是非常常见的操作,可以使用Aspose.Cell.APOI.MyXls.OLEDB.Excel VBA等操作Excel文件,从而实现数据的导入,在导入数据的时候,如果是强类型的数据,那么这几种方式好像都表现差不多,正常操作能够导入数据.如果是非强类型的数据,那么就需要特别注意了,一般情况下,导入的DataTable数据列的类型是以第一行内容作为确定列类型的,本文介绍利用Aspose.Cell控件导入Excel非强类型的数据的操作. 什么是强类型的数据呢,就是在Excel表格中

使用ASP.NET 2.0 DetailsView控件处理数据

asp.net|控件|数据 DetailsView 控件 在ASP.NET 1.1中,对单条记录的操作需要自己定义,并加以拓展,但到了2.0,我们有了DetaillsView控件,这就变得简单又直截了当了.这个控件可以和任意数据源进行绑定,并使用它的数据操作命令集. DetailsView控件需要先和数据源控件绑定在一起.数据源控件负责连接存储的数据和返回选中数据的具体操作.把DetailsView控件绑定到数据如此简单,只需设置DataSourceID属性声明一下就可以了.同时,也可以利用代码

利用Aspose.Word控件实现Word文档的操作

原文:利用Aspose.Word控件实现Word文档的操作 Aspose系列的控件,功能都挺好,之前一直在我的Winform开发框架中用Aspose.Cell来做报表输出,可以实现多样化的报表设计及输出,由于一般输出的内容比较正规化或者多数是表格居多,所以一般使用Aspose.Cell来实现我想要的各种Excel报表输出.虽然一直也知道Aspose.Word是用来生成Word文档的,而且深信其也是一个很强大的控件,但一直没用用到,所以就不是很熟悉. 偶然一次机会,一个项目的报表功能指定需要导出为

详解iOS开发中UItableview控件的数据刷新功能的实现_IOS

实现UItableview控件数据刷新一.项目文件结构和plist文件 二.实现效果 1.说明:这是一个英雄展示界面,点击选中行,可以修改改行英雄的名称(完成数据刷新的操作). 运行界面: 点击选中行: 修改数据后自动刷新: 三.代码示例 数据模型部分: YYheros.h文件 复制代码 代码如下: // //  YYheros.h //  10-英雄展示(数据刷新) // //  Created by apple on 14-5-29. //  Copyright (c) 2014年 itca

利用Aspose.Word控件和Aspose.Cell控件,实现Word文档和Excel文档的模板化导出

我们知道,一般都导出的Word文档或者Excel文档,基本上分为两类,一类是动态生成全部文档的内容方式,一种是基于固定模板化的内容输出,后者在很多场合用的比较多,这也是企业报表规范化的一个体现. 我的博客介绍过几篇关于Aspose.Word控件和Aspose.Cell控件的使用操作,如下所示. <使用Aspose.Cell控件实现Excel高难度报表的生成(一)> <使用Aspose.Cell控件实现Excel高难度报表的生成(二)> <使用Aspose.Cell控件实现Ex

web-关于不用控件绑定数据的问题

问题描述 关于不用控件绑定数据的问题 各位大神 我是一名在校计算机系大学生 想请教一下现在企业里做web是不是不用vs里面自带的控件 如果不用控件 这个gridview绑定数据库的数据应该如何实现 能说详细点或者给个链接教程吗 先不说 mvc架构 我想先用代码去实现 再去学mvc 谢谢 求大神指点 解决方案 很难的 怎么有点看不到是什么啊 解决方案二: 对WEB来说.其实很简单.WEB中表格的本质是 <table><tr><td></td></tr&g

有没有什么进度条控件并且数据可以从数据库里面来

问题描述 有没有什么进度条控件并且数据可以从数据库里面来 如题,求大神介绍一个进度条控件并且跟数据库相连的,拜托拜托,可以的话教一下怎么使用,毕不了业了 解决方案 就用标准的ProcessBar就可以了,将数据从数据库读取后,设置给Value属性. 解决方案二: processBar.Value = 你读出来的值;

js调试-利用easyui panel控件中的href 引入一个html代码片段,片段里面的js怎么调试?

问题描述 利用easyui panel控件中的href 引入一个html代码片段,片段里面的js怎么调试? Firefox和chrome的js调试页面都不显示片段js文件.唯一的办法是在要调试的地方加上debugger: 关键字.可是这样很麻烦,有没有其他的办法供调试用呢?