dhtmlXGrid应用简介

前端时间在论坛里回了fins的一个帖子(http://daoger.iteye.com/blog/40310)后，有几个网友想看我的例子代码，由于搞自己的一个小系统比较忙，在这里简单说一下dhtmlXGrid的使用心得！
我现在使用的版本是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;
如果你有更好的解决办法，还请告诉我！



说得有点罗嗦，希望各位网友能听的明白，用起来少走弯路！呵呵！

你自己扩展的ajax请求部分如果换成prototype的Ajax.Request会更简洁一些

哦！是吗，挺好！这下又能省一些墨水了！
年后再改一下！谢谢！

请问一下有没有人知道如何实现dhtmlxGrid官方主页上提到的Freezed Columns功能呢？