- 浏览: 529657 次
- 性别:
- 来自: 山东济南
文章分类
最新评论
-
dragon_8844:
非常不错,nice
java.util.concurrent 多线程框架 -
wusendong:
很好的文章!受益匪浅,谢谢!
java.util.concurrent 多线程框架 -
SINCE1978:
你也关注并发啊
java.util.concurrent 多线程框架 -
lku1314:
这个不错 刚刚找到这个组建 以前孤陋寡闻了 像lz学习!标 ...
quartz 在WEB中应用小结 -
lliiqiang:
人们对于目标需要的需求明确的去做,对于目标以外的因素是随机的执 ...
flex和后端的数据交互(一)--XML和HTTPService
前端时间在论坛里回了fins的一个帖子(http://daoger.iteye.com/blog/40310)后,有几个网友想看我的例子代码,由于搞自己的一个小系统比较忙,在这里简单说一下dhtmlXGrid的使用心得!
我现在使用的版本是1.2(免费版),我的实现也大部分基于这个免费版,有哪位老兄能提供一份专业版的话更好了!
1.2免费版中的一些功能其实是1.1专业版中的!废话少说,切入正题!
1. 基本使用方法
dhtmlXGrid使用起来还是比较简单的,下面是一段它自带例子中的代码:
先说一下数据的取得,上面
是从一个xml文件中取得数据,这个方法的实现基于ajax,下面是dhtmlXCommon.js中的发送请求的实现:
这样你就可以通过这个loadXML()方法向服务器端发送请求,如:
服务器端可以有多种方式处理请求,我使用的java来处理的,接收请求后根据需要构建返回客户端的数据,我采用的是用Jdom生成XML文件流的方式;然后用XMLOutputter将生成的数据文件发送给客户端,dhtmlXGrid 会自己解析数据,显示数据!
下面是发送数据的代码:
2. 数据保存及信息反馈
由于版本限制,免费版中没有提供数据保存的api,在专业版中还有用.net和php实现的服务器端实例代码;这一功能我是根据dhtmlXGrid提供的api自己用ajax实现的:
简单说一下思路:通过dhtmlXGrid提供的api wasChange()来判断是否有单元格的数据修改过,如果有修改,在客户端构建要保存数据的xml后,用send方式将其发送到服务器端处理,用服务器端返回的flag标志位提示反馈信息,在提示信息显示的同时,页面中的脚本再向服务器端发送一次查询请求,刷新数据,显示最新数据记录!
还有一个问题是:填写完数据保存时,焦点还在表格中,这时在取数据的时候要注意清除掉<texteare>标签,这样才能取到单元格的值!
代码中的很多方法都是来源于dhtmlXGrid的api,代码有点乱,请尽量参考它自带的文档!
3. 其他问题
操作后的反馈信息我是使用的ouspec 推荐的一个小控件windows_js,现在的版本是1.0;这里是例子:http://prototype-window.xilinus.com/samples.html#
另外,我还使用了yui-ext组件,由于dhtmlXGrid中日期控件是基于YUI开发的,所以两个都使用的时候会有底层方法方面的冲突;我现在的解决方法是把dhtmlXGrid下js文件夹中dhtmlXGrid_excell_calendar.js文件中对event.js的引用替换为YUI包中的event.js;
如果你有更好的解决办法,还请告诉我!
说得有点罗嗦,希望各位网友能听的明白,用起来少走弯路!呵呵!
哦!是吗,挺好!这下又能省一些墨水了!
年后再改一下!谢谢!不错,顶
哦!是吗,挺好!这下又能省一些墨水了!
年后再改一下!谢谢!
我现在使用的版本是1.2(免费版),我的实现也大部分基于这个免费版,有哪位老兄能提供一份专业版的话更好了!
1.2免费版中的一些功能其实是1.1专业版中的!废话少说,切入正题!
1. 基本使用方法
dhtmlXGrid使用起来还是比较简单的,下面是一段它自带例子中的代码:
<script> mygrid = new dhtmlXGridObject('gridbox'); mygrid.setImagePath("../imgs/"); mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication"); mygrid.setInitWidths("50,150,100,80,80,80,80,200") mygrid.setColAlign("right,left,left,right,center,left,center,center") mygrid.setColTypes("dyn,ed,ed,price,ch,co,ra,ro"); mygrid.getCombo(5).put(2,2); mygrid.setColSorting("int,str,str,int,str,str,str,date") //mygrid.setColumnColor("white,#d5f1ff,#d5f1ff") mygrid.setSkin("xp"); mygrid.init(); mygrid.loadXML("../grid.xml"); </script>
先说一下数据的取得,上面
mygrid.loadXML("../grid.xml");
是从一个xml文件中取得数据,这个方法的实现基于ajax,下面是dhtmlXCommon.js中的发送请求的实现:
dtmlXMLLoaderObject.prototype.loadXML = function (filePath, postMode, postVars) { this.filePath = filePath; try { this.xmlDoc = new XMLHttpRequest(); this.xmlDoc.open(postMode ? "POST" : "GET", filePath, this.async); if (postMode) { this.xmlDoc.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); } this.xmlDoc.onreadystatechange = new this.waitLoadFunction(this); this.xmlDoc.send(null || postVars); } catch (e) { if (document.implementation && document.implementation.createDocument) { this.xmlDoc = document.implementation.createDocument("", "", null); this.xmlDoc.onload = new this.waitLoadFunction(this); this.xmlDoc.load(filePath); } else { this.xmlDoc = new ActiveXObject("Microsoft.XMLHTTP"); this.xmlDoc.open(postMode ? "POST" : "GET", filePath, this.async); if (postMode) { this.xmlDoc.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); } this.xmlDoc.onreadystatechange = new this.waitLoadFunction(this); this.xmlDoc.send(null || postVars); } } };
这样你就可以通过这个loadXML()方法向服务器端发送请求,如:
mygrid.loadXML("aaaa.do?para1=para1&2=para2");
服务器端可以有多种方式处理请求,我使用的java来处理的,接收请求后根据需要构建返回客户端的数据,我采用的是用Jdom生成XML文件流的方式;然后用XMLOutputter将生成的数据文件发送给客户端,dhtmlXGrid 会自己解析数据,显示数据!
下面是发送数据的代码:
xmlDocument = new Document(rowsElement); XMLOutputter outputter = new XMLOutputter(); try { response.setContentType("text/xml; charset=UTF-8"); response.setHeader("Cache-Control", "no-cache"); outputter.output(xmlDocument, response.getWriter()); // outputter.output(xmlDocument, System.out);//在控制台输出,查看构建的xml文件是否正确规范 } catch (IOException e) { log.error(e); try { response.getWriter().write("<flag>0</flag>"); } catch (Exception fe) { } }
2. 数据保存及信息反馈
由于版本限制,免费版中没有提供数据保存的api,在专业版中还有用.net和php实现的服务器端实例代码;这一功能我是根据dhtmlXGrid提供的api自己用ajax实现的:
//deal with data from mygrid document.write("<script type='text/javascript' src='script/prototype/infodialog.js'></script>"); function mydataProcessorObject() { var imagesurl = "script/dhtmlXGrid/images/"; var xmlHttp;//request and response var mygrid = new dhtmlXGridObject("gridbox"); this.dealServer = "";// this.querycondithon = ""; this.dataXml = ""; this.checkFlag = "";//whether check the cell is null this.header = ""; var newcell;//new record eg."","","","", and so on var alertInfotimeout = 3;//alert info show time var haveSaved = false; this.setDealServer = function (server) { this.dealServer = server; }; this.setQueryCondition = function (condition) { this.querycondithon = condition; }; ///////////////////////////////////////////////////////// this.init = function (para) { if (para == "query") { if (this.querycondithon.length === 0 || this.querycondithon == "" || this.querycondithon == null) { mygrid.setImagePath(imagesurl); mygrid.enableLightMouseNavigation(true); mygrid.loadXML(this.dealServer + "?action=query&ts=" + new Date().getTime()); } else { mygrid.clearAll(); mygrid.loadXML(this.dealServer + "?action=query&ts=" + new Date().getTime() + "&" + this.querycondithon); } } else { if (para == "add") { if (this.readyingAdd()) { //mygrid.addRow("A"+(new Date()).valueOf(),['','','','','','','',''],0); mygrid.addRow("A" + (new Date()).valueOf(), newcell, 0); } else { //alert("Exist null cell!"); openinfodialog("\u5b58\u5728\u7a7a\u5355\u5143\u683c\uff01", 150, 40); } } else { if (para == "save" && !haveSaved) { this.readyingSave(); } else { if (para == "delete") { var iddel = mygrid.getSelectedId(); //just whether the record has saved or not if (iddel.indexOf("A") === 0) { mygrid.deleteSelectedItem(); openinfodialog("\u6570\u636e\u5df2\u5220\u9664\uff01", 150, 40); } else { this.loadDelete(iddel); } } } } } }; ///////////////////////////////////////////////////////// this.createXMLHttpRequest = function () { if (window.ActiveXObject) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } else { if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } }; ///////////////////////////////////////////////////////// this.readyingAdd = function () { var allitemid = new Array(0); allitemid = mygrid.getAllItemIds().split(","); var cc = mygrid.getColumnCount(); newcell = new Array(cc + 1); var addflag = true; if (allitemid.length > 0) { for (var i = 0; i < allitemid.length; i++) { for (var j = 0; j < cc; j++) { var cellValue = mygrid.cells(allitemid[i], j).getValue(); if (cellValue == null || cellValue.length == 0 || cellValue == "") { addflag = false; } } } } if (addflag) { for (var n = 0; n < cc; n++) { newcell[n] = ""; } } return addflag; }; ///////////////////////////////////////////////////////// this.readyingSave = function () { var allitemid = new Array(0); var modiitemid = new Array(0); allitemid = mygrid.getAllItemIds().split(","); var cc = mygrid.getColumnCount(); var saveflag = false; var blankflag = false; var a = 0; for (var i = 0; i < allitemid.length; i++) { var modiflag = false; for (var j = 0; j < cc; j++) { if (mygrid.cells(allitemid[i], j).wasChanged()) { modiflag = true; } var cellValue = mygrid.cells(allitemid[i], j).getValue(); if (cellValue == "" || cellValue.length == 0 || cellValue == null) { blankflag = true; } } if (modiflag && !blankflag) { modiitemid[a++] = allitemid[i]; } } if (this.dealServer.length > 0 && modiitemid.length > 0) { this.dataXml = "<?xml version='1.0' encoding='UTF-8'?><data>"; for (var i = 0; i < modiitemid.length; i++) { if (modiitemid[i].length > 0) { this.dataXml += "<row id='" + modiitemid[i] + "'>"; for (var j = 0; j < cc; j++) { this.dataXml += "<cell>"; var mycell = mygrid.cells(modiitemid[i], j).getValue(); if (mycell.indexOf("<") != -1) { this.dataXml += mycell.substring(mycell.indexOf(">") + 1, mycell.indexOf("</")); } else { this.dataXml += mycell; } this.dataXml += "</cell>"; } this.dataXml += "</row>"; } } this.dataXml += "</data>"; alert(this.dataXml); this.loadSave(); this.init("query"); } else { if (blankflag) { openinfodialog("\u5b58\u5728\u7a7a\u503c\uff01", 100, 40); } else { //alert("u5df2u7ecfu5b58u50a8u6216u6ca1u6709u6570u636eu6539u52a8uff01"); openinfodialog("\u5df2\u4fdd\u5b58\u6216\u6ca1\u6709\u53ef\u4fdd\u5b58\u7684\u6570\u636e\uff01", 200, 40); } } }; ///////////////////////////////////////////////////////// this.loadSave = function () { this.createXMLHttpRequest(); var url = this.dealServer + "?action=save&ts=" + new Date().getTime(); xmlHttp.open("POST", url, false); xmlHttp.onreadystatechange = this.goCallBackSave; xmlHttp.setRequestHeader("Content-Type", "text/xml"); xmlHttp.setRequestHeader("charset", "UTF-8"); xmlHttp.send(this.dataXml); }; ///////////////////////////////////////////////////////// this.goCallBackSave = function () { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { var returnFlag = xmlHttp.responseXML.getElementsByTagName("flag"); var saveflag = returnFlag[0].firstChild.nodeValue; if (saveflag == "1") { //alert("u4fddu5b58u6210u529fuff01"); openinfodialog("\u4fdd\u5b58\u6210\u529f\uff01", 120, 40); } else { if (saveflag == "0") { //alert("u4fddu5b58u5931u8d25!"); openinfodialog("\u4fdd\u5b58\u5931\u8d25\uff01", 120, 40); } } } } }; ///////////////////////////////////////////////////////// this.loadDelete = function (id) { this.createXMLHttpRequest(); var url = this.dealServer + "?action=delete&id=" + id + "&ts=" + new Date().getTime(); xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = this.goCallBackDelete; xmlHttp.send(); }; ///////////////////////////////////////////////////////// this.goCallBackDelete = function () { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { var returnFlag = xmlHttp.responseXML.getElementsByTagName("flag"); var delflag = returnFlag[0].firstChild.nodeValue; if (delflag == "1") { mygrid.deleteSelectedItem(); //alert("ddddddddd"); openinfodialog("\u8bb0\u5f55\u5df2\u5220\u9664\uff01", 140, 40); } else { if (delflag == "0") { //alert("u5220u9664u5931u8d25!"); openinfodialog("\u8bb0\u5f55\u672a\u80fd\u5220\u9664\uff0c\u8bf7\u68c0\u67e5\u539f\u56e0\uff01", 170, 40); } } } } }; }
简单说一下思路:通过dhtmlXGrid提供的api wasChange()来判断是否有单元格的数据修改过,如果有修改,在客户端构建要保存数据的xml后,用send方式将其发送到服务器端处理,用服务器端返回的flag标志位提示反馈信息,在提示信息显示的同时,页面中的脚本再向服务器端发送一次查询请求,刷新数据,显示最新数据记录!
还有一个问题是:填写完数据保存时,焦点还在表格中,这时在取数据的时候要注意清除掉<texteare>标签,这样才能取到单元格的值!
代码中的很多方法都是来源于dhtmlXGrid的api,代码有点乱,请尽量参考它自带的文档!
3. 其他问题
操作后的反馈信息我是使用的ouspec 推荐的一个小控件windows_js,现在的版本是1.0;这里是例子:http://prototype-window.xilinus.com/samples.html#
另外,我还使用了yui-ext组件,由于dhtmlXGrid中日期控件是基于YUI开发的,所以两个都使用的时候会有底层方法方面的冲突;我现在的解决方法是把dhtmlXGrid下js文件夹中dhtmlXGrid_excell_calendar.js文件中对event.js的引用替换为YUI包中的event.js;
如果你有更好的解决办法,还请告诉我!
说得有点罗嗦,希望各位网友能听的明白,用起来少走弯路!呵呵!
评论
4 楼
songail
2007-05-22
请问一下有没有人知道如何实现dhtmlxGrid官方主页上提到的Freezed Columns功能呢?
3 楼
liuwei2630
2007-04-29
daoger 写道
Ivan Li 写道
你自己扩展的ajax请求部分如果换成prototype的Ajax.Request会更简洁一些
哦!是吗,挺好!这下又能省一些墨水了!
年后再改一下!谢谢!
2 楼
daoger
2007-02-08
Ivan Li 写道
你自己扩展的ajax请求部分如果换成prototype的Ajax.Request会更简洁一些
哦!是吗,挺好!这下又能省一些墨水了!
年后再改一下!谢谢!
1 楼
IvanLi
2007-02-08
你自己扩展的ajax请求部分如果换成prototype的Ajax.Request会更简洁一些
发表评论
-
ubuntu14.04下编译安装Tora
2015-08-11 16:19 1199需预先安装oracle客户端;以下类库,有的可能需要提前安 ... -
ubuntu14.04下oracle客户端最小化安装
2015-08-11 16:04 1047在Oracle官网下载Oracle Instant Clien ... -
ubuntu14.04下编译安装QT
2015-08-11 16:03 14941. 首先配置一些编译Qt ... -
55种开源可视化数据分析工具
2015-07-22 14:50 0http://mp.weixin.qq.com/s?__bi ... -
响应式设计理念
2013-09-29 10:00 0概念 响应式Web设计(Responsive Web desi ... -
Liferay 使用随笔
2010-04-19 14:18 01.如何根据权限去除每一个portlet中右上角的选项。 关于 ... -
Liferay中ajax应用用户session超时
2010-03-26 09:31 3905基于Liferay Portal开发ajax应用时,如果长时间 ... -
Liferay portlet实例化配置
2009-11-10 09:06 4363在默认的情况下,一个p ... -
带checkbox的dhtmlxtree菜单树异步加载时的问题解决
2009-10-24 11:27 5954最近一直很忙,自己负责几个模块的设计开发,还有和其他服务接口的 ... -
JS代码示例
2009-10-21 14:23 22771.数组操作时的push var a = [],b = [ ... -
dhtmlxtree异步加载时的一个bug修正
2009-09-15 10:00 3802前面已经对dhtmlx的东西有所介绍,使用中也发现了不少bug ... -
WEB Page to PDF
2009-06-17 11:10 2520现在有很多网页页面转换成PDF文档的支持项目,我使用的是pd4 ... -
Liferay中使用dhtmlxlayout在IE下的问题
2009-06-12 13:43 2087Liferay 中使用dhemtlx系列UI的时候,dhtml ... -
Liferay相关配置
2009-06-10 13:35 1250修改liferay中portlet的加载目录 前面 ... -
Spring JDBC对Oracle10g数据库操作时RowSet的问题
2009-05-19 08:56 3434使用Spring JDBC对Oracle10g进行数据库分页的 ... -
Dynamic Tables In JavaScript for IE and Firefox
2009-05-06 14:03 1703http://www.sweetvision.com/2007 ... -
liferay中对struts桥接处理后的response
2009-04-18 14:29 1827对于在liferay开发平台中 ... -
liferay开发小记---Struts,Spring,Hibernate架构
2009-04-07 11:11 6249liferay有自己的struts和spring扩展,有兴趣的 ... -
liferay开发小记---portlet文件构造
2009-04-03 17:09 3276书接上回,说说portlet的开发,每一个portlet就是对 ... -
liferay开发小记---开发环境的搭建
2009-04-02 13:42 3796用惯了MyEclipse,我的环境也是在它上面搭建的,试用过M ...
相关推荐
**一、dhtmlxGrid简介** dhtmlxGrid是一款高度可定制的Web表格组件,由DHTMLX Suite提供。这款组件以其丰富的功能和强大的性能而闻名,广泛应用于数据展示、编辑和管理的网页应用中。dhtmlxGrid支持大量数据的高效...
**dhtmlxGrid Filter简介** `dhtmlxGrid` 是一款功能强大的JavaScript表格控件,由DHX Suite组件库提供,用于在Web应用程序中展示和处理数据。它提供了丰富的功能,包括排序、分页、编辑、过滤等,适用于构建交互式...
**一、dhtmlxGrid简介** dhtmlxGrid是一款功能强大的JavaScript数据网格组件,由DHX Suite提供。它允许开发者在Web应用中创建交互式的数据展示和编辑表格,支持大量的特性,如排序、过滤、分页、编辑、拖放等。...
#### 一、dhtmlxGrid简介 dhtmlxGrid是一款功能强大且灵活的JavaScript网格组件,适用于Web应用程序中的数据展示与管理。它提供了丰富的API来实现对表格数据的增删改查等功能,以及自定义外观的能力。本文将详细介绍...
【dhtmlxGrid中文培训资料】是一个介绍dhtmlxGrid组件的PPT文档,这个组件是一个强大的表格控件,主要用于创建具有多种功能的表格展示和交互。以下是对dhtmlxGrid主要特性和功能的详细说明: 1. **表格化数据显示**...
#### 一、dhtmlxGrid简介 **1. 自定义XML:** - **版本**: 自 dhtmlxGrid V1.6 版本起支持自定义 XML 加载网格。 - **功能**: 允许用户定义自定义的 XML 模式来加载网格,这包括自定义顶部标签、行和单元格元素的...
例如,如果一个应用只需要使用表格功能,那么只需引入 dhtmlxGrid 模块即可,无需加载其他不必要的组件。 **3. dhtmlx 组件** dhtmlx 的组件库非常丰富,以下是一些主要组件的简介: - **dhtmlxGrid**:这是一个...
本文将对 dhtmlx 的部分核心功能进行详细解读,尤其是关于 `dhtmlxGrid` 的使用方法。 #### 二、dhtmlxGrid 核心功能详解 ##### 1.1 attachEvent 方法 `attachEvent` 方法用于为 dhtmlxGrid 的各种事件添加事件...
- **dhtmlxGrid**:一个高级的数据网格组件,支持分页、排序、过滤等功能。 - **dhtmlxTree**:用于展示层级结构数据的树形组件。 - **dhtmlxForm**:简化表单创建的组件,支持多种输入类型和验证规则。 - **...
- DHTMLX提供了一系列内置组件,如表格(grid)、树形结构(tree)、图表(chart)、日历(calendar)等,满足不同应用场景的需求。 - 这些组件具有高度可定制性,可以轻松地通过CSS进行样式调整,从而适应不同的设计风格...
dhtmlXGrid组件简介 #### dhtmlXGrid概述: - **dhtmlXGrid**是一款基于JavaScript的表格控件,广泛应用于Web应用开发中,特别是需要展示大量数据的情况下。 - 它提供了丰富的特性,如数据排序、分页、搜索、行...
`dhtmlxColorPicker`可以轻松地与dhtmlx Suite的其他组件(如Grid、Form等)结合使用,提供颜色选择功能。 **总结** `dhtmlxColorPicker`是一个功能强大且易于使用的JavaScript颜色选择器组件,能够为网页应用增添...