dhtmlXGrid 学习笔记

我学习的是从javaeye获得的1.0专业版，因为要使用专业版中的很多方法，所以根据自己的需要并结合1.2免费版的改变对1.1专业版进行了部分改动，改动的地方和自己对原开发者代码的理解将依次归结如下，不对或不完整的地方请指出。

1. 表格风格的设置
专业版不支持免费版中几种显示风格的设定，即便是自己修改css样式也没有达到免费版中的示例效果，我还没找到具体的设定方法；我找到的原因是：专业版在构造数据表格方面没有采用th标签，标题栏和数据显示表格中都没有使用，而是直接在tbody标签中添加tr、td标签构造数据表格；而免费版中均添加了th标签来构造。

关键方法是dhtmlXGrid.js文件中的setHeaderCol 和 init，现在我是参照免费版的做法在setHeaderCol方法中添加了一个<div>，修改后的代码如下：

this.setHeaderCol = function (col, label) {
		if (!this.useImagesInHeader) {
			var hdrHTML = "<div class='hdrcell'>";
			if (label.indexOf("img:[") != -1) {
				var imUrl = label.replace(/.*\[([^>]+)\].*/, "$1");
				label = label.substr(label.indexOf("]") + 1, label.length);
				hdrHTML += "<img width='18px' height='18px' align='absmiddle' src='" + imUrl + "' hspace='2'>";
			}
			hdrHTML += label;
			hdrHTML += "</div>";
			this.hdr.rows[0].cells[col].innerHTML = hdrHTML;
			//this.hdr.rows[0].cells[col].innerHTML = label;
		} else {
			this.hdr.rows[0].cells[col].style.textAlign = "left";
			this.hdr.rows[0].cells[col].innerHTML = "<img src='" + this.imgURL + "" + label + "' onerror='this.src = \"" + this.imgURL + "imageloaderror.gif\"'>";
			var a = new Image();
			a.src = this.imgURL + "" + label.replace(/(\.[a-z]+)/, ".desc$1");
			this.preloadImagesAr[this.preloadImagesAr.length] = a;
			var b = new Image();
			b.src = this.imgURL + "" + label.replace(/(\.[a-z]+)/, ".asc$1");
			this.preloadImagesAr[this.preloadImagesAr.length] = b;
		}
	};

2. 表格中的下拉菜单
当要根据下拉菜单中的选项值的不同还要进行不同的操作时，就需要对单元格的编辑方法进行小小的修改！
作者采用eval方法动态构建单元格，下拉菜单是“co”类型，从下拉菜单中把选择项设定到数据表格的方法是dhtmlXGridCell.js文件中的eXcell_co(cell)，方法中有一个this.edite()方法，选项值就是通过this.list.onclick 事件中cell.editor_obj.setValue(cell.value)语句设定的，其中cell.value就是下拉菜单中的选项值；在这其中你可以根据自己的需要判断用户的选项值来进行进一步的操作。

单元格的编辑方法是dhtmlXGrid.js中的this.editCell方法，以下是我修改后的该方法：

	this.editCell = function () {
		this.editStop();
		if ((this.isEditable != true) || (!this.cell)) {
			return false;
		}
		var c = this.cell;
		if (c.parentNode._locked) {
			return false;
		}
		c.className += " editable";
		eval("this.editor = new eXcell_" + this.cellType[this.cell._cellIndex] + "(c)");
		if (this.editor != null) {
			if (typeof (this.onEditCell) == "string") {
				if (eval(this.onEditCell + "(0,'" + this.row.idd + "'," + this.cell._cellIndex + ");") != false) {
				  //
					if(this.cellType[this.cell._cellIndex] == "co" && this.cell._cellIndex == indexFlag)
					{
							this.editor.edit(comparaFlag);		
				  }
					//
					else this.editor.edit();
					this._Opera_stop = (new Date).valueOf();
					eval(this.onEditCell + "(1,'" + this.row.idd + "'," + this.cell._cellIndex + ");");
				} else {
					this.editor = null;
				}
			} else {
				if (this.onEditCell(0, this.row.idd, this.cell._cellIndex) != false) {
					this._Opera_stop = (new Date).valueOf();
					//
					if(this.cellType[this.cell._cellIndex] == "co" && this.cell._cellIndex == indexFlag)
					{
						this.editor.edit(comparaFlag);		
				  }
				  else
					//
					this.editor.edit();
					this.onEditCell(1, this.row.idd, this.cell._cellIndex);
				} else {
					this.editor = null;
				}
			}
		}
	};

上面代码中，两个//之间的内容是我的添加内容，indexFlag是我添加的判断下拉菜单所在列号的变量，comparaFlag是要与下拉菜单选项进行比较的变量，这两个变量都需要预先设定；

var comparaFlag =null;
	var indexFlag = 0;
	this.setComIndFlag = function(para1,para2)
	{
 			indexFlag = para1;
 			comparaFlag = para2;	
 	}

当数据表格中有多列的下拉菜单需要这样的操作时，可以考虑把这两个变量都替换成数组。
接下来就是单元格的edit方法，也就是上面的this.editor.edit(comparaFlag );
在this.list.onclick方法中添加与所传参数之间的判断 if(mypara == cell.value)，那就可以进行你自己的操作了！

评论

2 楼 xmllong 2011-04-11  

刚刚弄到的dhtmlxGrid1.4_Pro，还没来得及研究，
http://xmllong.iteye.com/blog/996583

1 楼 zzl 2007-04-18  

你好，“从javaeye获得的1.1专业版”这个连接在哪里，我找了好久都没有找到，只有一个1.0的，能告诉我连接吗，或者发email给我，
[e-mail]
谢谢！