dhtmlXGrid应用简介

最新推荐文章于 2023-12-27 16:58:19 发布
最新推荐文章于 2023-12-27 16:58:19 发布
阅读量904 收藏
点赞数

dhtmlXGrid应用简介

http://www.dhtmlx.com/docs/download.shtml
前端时间在论坛里回了fins的一个帖子(http://daoger.javaeye.com/blog/40310)后，有几个网友想看我的例子代码，由于搞自己的一个小系统比较忙，在这里简单说一下dhtmlXGrid的使用心得！ 
我现在使用的版本是1.2(免费版),我的实现也大部分基于这个免费版,有哪位老兄能提供一份专业版的话更好了！ 
1.2免费版中的一些功能其实是1.1专业版中的！废话少说，切入正题！ 

1. 基本使用方法 

dhtmlXGrid使用起来还是比较简单的，下面是一段它自带例子中的代码： 
Java代码  复制代码
  1.      
  2. <script>   
  3.     mygrid = new dhtmlXGridObject('gridbox');   
  4.     mygrid.setImagePath("../imgs/");   
  5.     mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication");   
  6.     mygrid.setInitWidths("50,150,100,80,80,80,80,200")   
  7.     mygrid.setColAlign("right,left,left,right,center,left,center,center")   
  8.     mygrid.setColTypes("dyn,ed,ed,price,ch,co,ra,ro");   
  9.     mygrid.getCombo(5).put(2,2);   
  10.     mygrid.setColSorting("int,str,str,int,str,str,str,date")   
  11.     //mygrid.setColumnColor("white,#d5f1ff,#d5f1ff")   
  12.     mygrid.setSkin("xp");   
  13.     mygrid.init();   
  14.     mygrid.loadXML("../grid.xml");   
  15. </script>  


先说一下数据的取得，上面
Java代码  复制代码
  1. mygrid.loadXML("../grid.xml");  

是从一个xml文件中取得数据，这个方法的实现基于ajax，下面是dhtmlXCommon.js中的发送请求的实现： 
Java代码  复制代码
  1. dtmlXMLLoaderObject.prototype.loadXML = function (filePath, postMode, postVars) {   
  2.     this.filePath = filePath;   
  3.     try {   
  4.         this.xmlDoc = new XMLHttpRequest();   
  5.         this.xmlDoc.open(postMode ? "POST" : "GET", filePath, this.async);   
  6.         if (postMode) {   
  7.             this.xmlDoc.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   
  8.         }   
  9.         this.xmlDoc.onreadystatechange = new this.waitLoadFunction(this);   
  10.         this.xmlDoc.send(null || postVars);   
  11.     }   
  12.     catch (e) {   
  13.         if (document.implementation && document.implementation.createDocument) {   
  14.             this.xmlDoc = document.implementation.createDocument("", "", null);   
  15.             this.xmlDoc.onload = new this.waitLoadFunction(this);   
  16.             this.xmlDoc.load(filePath);   
  17.         } else {   
  18.             this.xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");   
  19.             this.xmlDoc.open(postMode ? "POST" : "GET", filePath, this.async);   
  20.             if (postMode) {   
  21.                 this.xmlDoc.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   
  22.             }   
  23.             this.xmlDoc.onreadystatechange = new this.waitLoadFunction(this);   
  24.             this.xmlDoc.send(null || postVars);   
  25.         }   
  26.     }   
  27. };  

这样你就可以通过这个loadXML()方法向服务器端发送请求，如： 
Java代码  复制代码
  1. mygrid.loadXML("aaaa.do?para1=para1&2=para2");  

服务器端可以有多种方式处理请求，我使用的java来处理的,接收请求后根据需要构建返回客户端的数据，我采用的是用Jdom生成XML文件流的方式；然后用XMLOutputter将生成的数据文件发送给客户端，dhtmlXGrid 会自己解析数据，显示数据！ 
下面是发送数据的代码： 
Java代码  复制代码
  1. xmlDocument = new Document(rowsElement);   
  2.         XMLOutputter outputter = new XMLOutputter();   
  3.         try  
  4.         {   
  5.             response.setContentType("text/xml; charset=UTF-8");   
  6.             response.setHeader("Cache-Control", "no-cache");   
  7.             outputter.output(xmlDocument, response.getWriter());   
  8.             // outputter.output(xmlDocument, System.out);//在控制台输出，查看构建的xml文件是否正确规范   
  9.         } catch (IOException e)   
  10.         {   
  11.             log.error(e);   
  12.             try  
  13.             {   
  14.                 response.getWriter().write("<flag>0</flag>");   
  15.             } catch (Exception fe)   
  16.             {   
  17.             }   
  18.         }  

2. 数据保存及信息反馈 

由于版本限制，免费版中没有提供数据保存的api，在专业版中还有用.net和php实现的服务器端实例代码；这一功能我是根据dhtmlXGrid提供的api自己用ajax实现的： 
Java代码  复制代码
  1. //deal with data from mygrid   
  2. document.write("<script type='text/javascript' src='script/prototype/infodialog.js'></script>");   
  3. function mydataProcessorObject() {   
  4.     var imagesurl = "script/dhtmlXGrid/images/";   
  5.     var xmlHttp;//request and response    
  6.     var mygrid = new dhtmlXGridObject("gridbox");   
  7.     this.dealServer = "";//   
  8.     this.querycondithon = "";   
  9.     this.dataXml = "";   
  10.     this.checkFlag = "";//whether check the cell is null   
  11.     this.header = "";   
  12.     var newcell;//new record eg."","","","", and so on   
  13.     var alertInfotimeout = 3;//alert info show time   
  14.     var haveSaved = false;   
  15.     this.setDealServer = function (server) {   
  16.         this.dealServer = server;   
  17.     };   
  18.     this.setQueryCondition = function (condition) {   
  19.         this.querycondithon = condition;   
  20.     };   
  21.     /   
  22.     this.init = function (para) {   
  23.         if (para == "query") {   
  24.             if (this.querycondithon.length === 0 || this.querycondithon == "" || this.querycondithon == null) {   
  25.                 mygrid.setImagePath(imagesurl);   
  26.                 mygrid.enableLightMouseNavigation(true);   
  27.                 mygrid.loadXML(this.dealServer + "?action=query&ts=" + new Date().getTime());   
  28.             } else {   
  29.                 mygrid.clearAll();   
  30.                 mygrid.loadXML(this.dealServer + "?action=query&ts=" + new Date().getTime() + "&" + this.querycondithon);   
  31.             }   
  32.         } else {   
  33.             if (para == "add") {   
  34.                 if (this.readyingAdd()) {   
  35.                 //mygrid.addRow("A"+(new Date()).valueOf(),['','','','','','','',''],0);   
  36.                     mygrid.addRow("A" + (new Date()).valueOf(), newcell, 0);   
  37.                 } else {   
  38.                     //alert("Exist null cell!");   
  39.                     openinfodialog("\u5b58\u5728\u7a7a\u5355\u5143\u683c\uff01", 150, 40);   
  40.                 }   
  41.             } else {   
  42.                 if (para == "save" && !haveSaved) {   
  43.                     this.readyingSave();   
  44.                 } else {   
  45.                     if (para == "delete") {   
  46.                         var iddel = mygrid.getSelectedId();   
  47.                 //just whether the record has saved or not   
  48.                         if (iddel.indexOf("A") === 0) {   
  49.                             mygrid.deleteSelectedItem();   
  50.                             openinfodialog("\u6570\u636e\u5df2\u5220\u9664\uff01", 150, 40);   
  51.                         } else {   
  52.                             this.loadDelete(iddel);   
  53.                         }   
  54.                     }   
  55.                 }   
  56.             }   
  57.         }   
  58.     };   
  59.     /   
  60.     this.createXMLHttpRequest = function () {   
  61.         if (window.ActiveXObject) {   
  62.             try {   
  63.                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");   
  64.             }   
  65.             catch (e) {   
  66.                 try {   
  67.                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
  68.                 }   
  69.                 catch (e) {   
  70.                 }   
  71.             }   
  72.         } else {   
  73.             if (window.XMLHttpRequest) {   
  74.                 xmlHttp = new XMLHttpRequest();   
  75.             }   
  76.         }   
  77.     };   
  78.     /   
  79.     this.readyingAdd = function () {   
  80.         var allitemid = new Array(0);   
  81.         allitemid = mygrid.getAllItemIds().split(",");   
  82.         var cc = mygrid.getColumnCount();   
  83.         newcell = new Array(cc + 1);   
  84.         var addflag = true;   
  85.         if (allitemid.length > 0) {   
  86.             for (var i = 0; i < allitemid.length; i++) {   
  87.                 for (var j = 0; j < cc; j++) {   
  88.                     var cellValue = mygrid.cells(allitemid[i], j).getValue();   
  89.                     if (cellValue == null || cellValue.length == 0 || cellValue == "") {   
  90.                         addflag = false;   
  91.                     }   
  92.                 }   
  93.             }   
  94.         }   
  95.         if (addflag) {   
  96.             for (var n = 0; n < cc; n++) {   
  97.                 newcell[n] = "";   
  98.             }   
  99.         }   
  100.         return addflag;   
  101.     };   
  102.     /   
  103.     this.readyingSave = function () {   
  104.         var allitemid = new Array(0);   
  105.         var modiitemid = new Array(0);   
  106.         allitemid = mygrid.getAllItemIds().split(",");   
  107.         var cc = mygrid.getColumnCount();   
  108.         var saveflag = false;   
  109.         var blankflag = false;   
  110.         var a = 0;   
  111.         for (var i = 0; i < allitemid.length; i++) {   
  112.             var modiflag = false;   
  113.             for (var j = 0; j < cc; j++) {   
  114.                 if (mygrid.cells(allitemid[i], j).wasChanged()) {   
  115.                     modiflag = true;   
  116.                 }   
  117.                 var cellValue = mygrid.cells(allitemid[i], j).getValue();   
  118.                 if (cellValue == "" || cellValue.length == 0 || cellValue == null) {   
  119.                     blankflag = true;   
  120.                 }   
  121.             }   
  122.             if (modiflag && !blankflag) {   
  123.                 modiitemid[a++] = allitemid[i];   
  124.             }   
  125.         }   
  126.         if (this.dealServer.length > 0 && modiitemid.length > 0) {   
  127.             this.dataXml = "<?xml version='1.0' encoding='UTF-8'?><data>";   
  128.             for (var i = 0; i < modiitemid.length; i++) {   
  129.                 if (modiitemid[i].length > 0) {   
  130.                     this.dataXml += "<row id='" + modiitemid[i] + "'>";   
  131.                     for (var j = 0; j < cc; j++) {   
  132.                         this.dataXml += "<cell>";   
  133.                         var mycell = mygrid.cells(modiitemid[i], j).getValue();   
  134.                         if (mycell.indexOf("<") != -1) {   
  135.                             this.dataXml += mycell.substring(mycell.indexOf(">") + 1, mycell.indexOf("</"));   
  136.                         } else {   
  137.                             this.dataXml += mycell;   
  138.                         }   
  139.                         this.dataXml += "</cell>";   
  140.                     }   
  141.                     this.dataXml += "</row>";   
  142.                 }   
  143.             }   
  144.             this.dataXml += "</data>";   
  145.             alert(this.dataXml);   
  146.             this.loadSave();   
  147.             this.init("query");   
  148.         } else {   
  149.             if (blankflag) {   
  150.                 openinfodialog("\u5b58\u5728\u7a7a\u503c\uff01", 100, 40);   
  151.             } else {   
  152.             //alert("u5df2u7ecfu5b58u50a8u6216u6ca1u6709u6570u636eu6539u52a8uff01");   
  153.                 openinfodialog("\u5df2\u4fdd\u5b58\u6216\u6ca1\u6709\u53ef\u4fdd\u5b58\u7684\u6570\u636e\uff01", 200, 40);   
  154.             }   
  155.         }   
  156.     };   
  157.     /   
  158.     this.loadSave = function () {   
  159.         this.createXMLHttpRequest();   
  160.         var url = this.dealServer + "?action=save&ts=" + new Date().getTime();   
  161.         xmlHttp.open("POST", url, false);   
  162.         xmlHttp.onreadystatechange = this.goCallBackSave;   
  163.         xmlHttp.setRequestHeader("Content-Type", "text/xml");   
  164.         xmlHttp.setRequestHeader("charset", "UTF-8");   
  165.         xmlHttp.send(this.dataXml);   
  166.     };   
  167.     /   
  168.     this.goCallBackSave = function () {   
  169.         if (xmlHttp.readyState == 4) {   
  170.             if (xmlHttp.status == 200) {   
  171.                 var returnFlag = xmlHttp.responseXML.getElementsByTagName("flag");   
  172.                 var saveflag = returnFlag[0].firstChild.nodeValue;   
  173.                 if (saveflag == "1") {   
  174.                     //alert("u4fddu5b58u6210u529fuff01");   
  175.                     openinfodialog("\u4fdd\u5b58\u6210\u529f\uff01", 120, 40);   
  176.                 } else {   
  177.                     if (saveflag == "0") {   
  178.                         //alert("u4fddu5b58u5931u8d25!");   
  179.                         openinfodialog("\u4fdd\u5b58\u5931\u8d25\uff01", 120, 40);   
  180.                     }   
  181.                 }   
  182.             }   
  183.         }   
  184.     };   
  185.     /   
  186.     this.loadDelete = function (id) {   
  187.         this.createXMLHttpRequest();   
  188.         var url = this.dealServer + "?action=delete&id=" + id + "&ts=" + new Date().getTime();   
  189.         xmlHttp.open("GET", url, true);   
  190.         xmlHttp.onreadystatechange = this.goCallBackDelete;   
  191.         xmlHttp.send();   
  192.     };   
  193.     /   
  194.     this.goCallBackDelete = function () {   
  195.         if (xmlHttp.readyState == 4) {   
  196.             if (xmlHttp.status == 200) {   
  197.                 var returnFlag = xmlHttp.responseXML.getElementsByTagName("flag");   
  198.                 var delflag = returnFlag[0].firstChild.nodeValue;   
  199.                 if (delflag == "1") {   
  200.                     mygrid.deleteSelectedItem();   
  201.                     //alert("ddddddddd");   
  202.                     openinfodialog("\u8bb0\u5f55\u5df2\u5220\u9664\uff01", 140, 40);   
  203.                 } else {   
  204.                     if (delflag == "0") {   
  205.                         //alert("u5220u9664u5931u8d25!");   
  206.                         openinfodialog("\u8bb0\u5f55\u672a\u80fd\u5220\u9664\uff0c\u8bf7\u68c0\u67e5\u539f\u56e0\uff01", 170, 40);   
  207.                     }   
  208.                 }   
  209.             }   
  210.         }   
  211.     };   
  212. }  

简单说一下思路：通过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; 
如果你有更好的解决办法，还请告诉我！ 
LL20920
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
dhtmlxGrid介绍及使用手册（中文版）
09-09
文档主要对dhtmlxGrid 实现的功能进行介绍，以及API操作中文手册。 文档大致目录如下： 一、 dhtmlxGrid 介绍 7 1. 自定义XML: 7 2. 支持多行表头、表尾展现 7 3. 移动、添加、删除列 8 4. 处理大型数据集-支持分页 8 5. 处理大型数据集-智能渲染 9 6. 与数据库交互 9 7. 扩展单元格-EXCEL 10 8. 拆分模式（冻结栏） 10 9. 控制于一体的网络和树 11 二、 dhtmlxgrid 配置部分 12 2.1 表格操作API 12 2.2 表格样式API 19 三、 数据处理部分 30 3.1 dhtmlxgrid 数据加载部分 30 四、 Dhtmlxgrid操作 39 4.1 dhtmlxgrid 行操作 39 4.2 dhtmlxgrid 列操作 48 4.3 dhtmlxgrid 单元格操作 55 4.4 dhtmlxgrid 选择过滤操作 61
dhtmlxgrid
11-07
**DHTMLXGrid详解** DHTMLXGrid是一款强大的JavaScript组件，专为构建具有复杂功能的交互式数据网格而设计。这个框架允许开发者在Web应用程序中创建动态、可自定义的表格，支持大量的数据行和列，同时保持高性能。...
DHTMLX-Grid
weixin_30654419的博客
11-30 797
DHTMLX - Grid 介绍 dhtmlxGrid是一个灵活的、易于使用的JavaScript网格组件,可以创建DHTML表与丰富的编辑- sensing,固定的多行页眉和页脚,可调整大小的、可拖动的列，内置过滤、搜索和分组功能。dhtmlxGrid拥有先进的拖放、动态加载，可定制的视图中，一组预定义的单元格编辑器和许多其他的功能，使它成为一个平台为开发者提供援助。...
dhtmlxGrid——创建前端页面的模板
weixin_50478033的博客
08-28 456
创建dhtmlxGrid的前端模板
DHTMLX 表格组件(dhtmlxGrid )使用介绍
最新发布
男神的专栏
12-27 830
在网页上用表格显示数据是很常见的事情，html标记语言中的table标签能实现，但其功能很简单，只能单纯的显示数据和定义简单的样式，不支持查询，不支持排序，不支持自动增减列等等，这些功能都没有，如果是自己写的话又特别麻烦。但是有了DHX后就不要操心了，DHTMLX 表格组件(dhtmlxGrid )会帮你完成这一切的一切，你只需要提供数据给DHX，然后调用set方法设置即可。//表头设置用逗号分割每列(#master_checkbox 表示表头为checkbox，并支持全选)//表头列显示/隐藏。
dhtmlxgrid_filter.zip_dhtmlx
09-20
**dhtmlxGrid Filter简介** `dhtmlxGrid` 是一款功能强大的JavaScript表格控件，由DHX Suite组件库提供，用于在Web应用程序中展示和处理数据。它提供了丰富的功能，包括排序、分页、编辑、过滤等，适用于构建交互式...
dhtmlxGrid
10-13
**一、dhtmlxGrid简介** dhtmlxGrid是一款功能强大的JavaScript数据网格组件，由DHX Suite提供。它允许开发者在Web应用中创建交互式的数据展示和编辑表格，支持大量的特性，如排序、过滤、分页、编辑、拖放等。...
dhtmlxGrid操作
09-07
#### 一、dhtmlxGrid简介 dhtmlxGrid是一款功能强大且灵活的JavaScript网格组件，适用于Web应用程序中的数据展示与管理。它提供了丰富的API来实现对表格数据的增删改查等功能，以及自定义外观的能力。本文将详细介绍...
dhtmlxgrid中文培训资料.ppt
12-01
【dhtmlxGrid中文培训资料】是一个介绍dhtmlxGrid组件的PPT文档，这个组件是一个强大的表格控件，主要用于创建具有多种功能的表格展示和交互。以下是对dhtmlxGrid主要特性和功能的详细说明： 1. **表格化数据显示**...
dhtmlx中文使用手册
11-15
- **dhtmlxGrid**：一个高级的数据网格组件，支持分页、排序、过滤等功能。 - **dhtmlxTree**：用于展示层级结构数据的树形组件。 - **dhtmlxForm**：简化表单创建的组件，支持多种输入类型和验证规则。 - **...
dhtmlx 專業版
01-07
例如，如果一个应用只需要使用表格功能，那么只需引入 dhtmlxGrid 模块即可，无需加载其他不必要的组件。 **3. dhtmlx 组件** dhtmlx 的组件库非常丰富，以下是一些主要组件的简介： - **dhtmlxGrid**：这是一个...
《DHTMLX中文使用手册》PDF
06-25
- DHTMLX提供了一系列内置组件，如表格(grid)、树形结构(tree)、图表(chart)、日历(calendar)等，满足不同应用场景的需求。 - 这些组件具有高度可定制性，可以轻松地通过CSS进行样式调整，从而适应不同的设计风格...
JSP页面表格初始化
09-05
dhtmlXGrid组件简介 #### dhtmlXGrid概述： - **dhtmlXGrid**是一款基于JavaScript的表格控件，广泛应用于Web应用开发中，特别是需要展示大量数据的情况下。 - 它提供了丰富的特性，如数据排序、分页、搜索、行...
dhtmlxGrid电子表格控件详细介绍
iteye_4891的博客
05-29 735
dhtmlxGrid 是一个基于AJAX的Javascript表格控件，它提供非常强大的应用功能， 易用的数据绑定技术，更好的性能用于支持大的数据量。 丰富的库函数 JavaScript API 使得程序更容易被定制和二次开发。dhtmlxGrid 可以加载不同类型的数据源：XML (支持自定义XML格式), JSON, CSV, JavaScript 数组, 和HTML 原生表格。 使用该表...
dhtmlxgrid 控件使用
yang6的专栏
01-21 2074
dhtmlxgrid 主要是一个开源的表格控件，它有标准版和专业版本，标准版只提供一些基础功能，而专业版提供了一些复杂的扩展功能，包括表格分割等等，它现在最新版本为3.5，下载地址为：http://www.dhtmlx.com/docs/download.shtml 下载下来，解压缩后，有3个文件夹，codebase、samples、sources ，codebase这个文件夹里面是打包好发布的
dhtmlxGrid——创建模板2
weixin_50478033的博客
08-28 147
dhtmlxGrid前端模板
识别这段编码并转换成中文字符 \u767b\u5f55\u6210\u529f
weixin_35754676的博客
12-21 9925
这段编码是 Unicode 编码，表示文本 "登录成功"。Unicode 编码是一种用于表示文本的编码方式，它使用 16 位或 32 位二进制数来表示每个字符。对于每个字符，都有一个对应的 Unicode 编码。 在这段编码中，"\u767b" 表示 Unicode 编码为 "767b" 的字符，"\u5f55" 表示 Unicode 编码为 "5f55" 的字符，"\u6210" 表示 Unic...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值