dhtmlXGrid应用简介

前端时间在论坛里回了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;
如果你有更好的解决办法，还请告诉我！



说得有点罗嗦，希望各位网友能听的明白，用起来少走弯路！呵呵！
posted @ 2008-08-04 13:07  行进中开火  阅读(5557)  评论(1)  编辑  收藏  举报