dhtmlxgrid 1.4功能自助增补（二）－－键盘事件和文本类型单元格

3. 在表格中添加需要的键盘事件；目前版本的dhtmlxgrid只支持部分键盘事件，所以你可以根据自己的需要添加。
键盘事件大多是在dhtmlXGrid.js文件this.doKey方法中定义的，当然你也可以在页面中通过setOnKeyPressed（）方法自己添加；
以下是我自己修改后的源码，注释掉的部分是自带源码：

	this.doKey = function (ev) {
		if (!ev) {
			return true;
		}
		if ((ev.target || ev.srcElement).value !== window.undefined) {
			var zx = (ev.target || ev.srcElement);
			if ((!zx.parentNode) || (zx.parentNode.className.indexOf("editable") == -1)) {
				return true;
			}
		}
		if ((globalActiveDHTMLGridObject) && (this != globalActiveDHTMLGridObject)) {
			return globalActiveDHTMLGridObject.doKey(ev);
		}
		if (this.isActive == false) {
			return true;
		}
		if (this._htkebl) {
			return true;
		}
		if (!this.callEvent("onKeyPress", [ev.keyCode, ev.ctrlKey, ev.shiftKey])) {
			return false;
		}
	try {
			//daoger_start
			//define flag for judgment the editing state of selected cell 
			var editeabled = null;
			if (this.editor) {
				editeabled = true;
			}
			//var type = this.cellType[this.cell._cellIndex];
			//daoger_end
			//if (ev.keyCode == 13 && (ev.ctrlKey || ev.shiftKey)) {
			//	var rowInd = this.rowsCol._dhx_find(this.row);
			//	if (window.event.ctrlKey && rowInd != this.rowsCol.length - 1) {
			//		if (this.row.rowIndex == this.obj._rowslength() - 1 && this.dynScroll && this.dynScroll != "false") {
			//			this.doDynScroll("dn");
			//		}
			//		this.selectCell(this.rowsCol[rowInd + 1], this.cell._cellIndex, true);
			//	} else {
			//		if (ev.shiftKey && rowInd != 0) {
			//			if (this.row.rowIndex == 0 && this.dynScroll && this.dynScroll != "false") {
			//				this.doDynScroll("up");
			//			}
			//			this.selectCell(this.rowsCol[rowInd - 1], this.cell._cellIndex, true);
			//		}
			//	}
			//	_isIE ? ev.returnValue = false : ev.preventDefault();
			//}
			if (ev.keyCode == 13 && !ev.ctrlKey && !ev.shiftKey) {
				this.editStop();
				//daoger_start
				//modify action of enter key
				//修改回车键事件，使得敲回车后选择状态或焦点下移
				var rowInd = this.row.rowIndex;
				if (rowInd != this.rowsCol.length && rowInd != this.obj.rows.length - 1) {
					var nrow = this.obj._rows(rowInd);
					if (nrow._sRow || nrow._rLoad) {
						return false;
					}
					this.selectCell(nrow, this.cell._cellIndex, true);
					if (editeabled) {
						this.editCell();
					}
				} else {
					if (this.pagingOn && (this.row != this.rowsCol[this.rowsCol.length - 1] || this.rowsBuffer[0].length > 0 || !this.recordsNoMore)) {
						this.changePage(this.currentPage + 1);
						this.selectCell(this.obj._rows(0), this.cell._cellIndex, true);
						if (editeabled) {
							this.editCell();
						}
					}
				}
				//this.callEvent("onEnter", [this.row.idd, this.cell._cellIndex]);
				//daoger_end
				_isIE ? ev.returnValue = false : ev.preventDefault();
			}
			if (ev.keyCode == 9) {
				this.editStop();
				if (ev.shiftKey) {
					var z = this._getPrevCell();
				} else {
					var z = this._getNextCell();
				}
				if (!z) {
					return true;
				}
				this.selectCell(z.parentNode, z._cellIndex, (this.row != z.parentNode));
				this.editCell();
				_isIE ? ev.returnValue = false : ev.preventDefault();
			}
			//daoger_start
			//add action of del key
			//选择一个单元格或多个单元格后，用del键清楚单元格内容
			if (ev.keyCode == 46) {
				if (this._selectionArea) {
					this.clearSelection();
					var startRow = this._selectionArea.LeftTopRow;
					var startCol = this._selectionArea.LeftTopCol;
					var endRow = this._selectionArea.RightBottomRow;
					var endCol = this._selectionArea.RightBottomCol;
					for (var i = startRow; i < endRow + 1; i++) {
						for (var j = startCol; j < endCol + 1; j++) {
							if (!(this.cellType[j] == "linenumber")) {
								this.cells(this.getRowId(i), j).setValue();
							}
						}
					}
					startRow = null;
					startCol = null;
					endRow = null;
					endCol = null;
				} else {
					if (!(this.cellType[this.cell._cellIndex] == "linenumber") && !this.editor) {
						this.cells(this.getSelectedId(), this.cell._cellIndex).setValue();
					}
				}
				return true;
			}
			//daoger_end
			//根据上一个单元格的编辑状态判断通过方向键移动后下一个单元格的状态是处于选择还是编辑状态
			if (ev.keyCode == 40 || ev.keyCode == 38) {
				if (this.editor && this.editor.combo) {
					if (ev.keyCode == 40) {
						this.editor.shiftNext();
					}
					if (ev.keyCode == 38) {
						this.editor.shiftPrev();
					}
					return false;
				} else {
					var rowInd = this.row.rowIndex;
					if (ev.keyCode == 38 && rowInd != 1) {
						var nrow = this.obj._rows(rowInd - 2);
						if (nrow._sRow || nrow._rLoad) {
							return false;
						}
						this.selectCell(this.obj._rows(rowInd - 2), this.cell._cellIndex, true);
						//daoger_start
						//set state of this cell according to last 
						if (editeabled) {
							this.editCell();
						}
						//daoger_end
					} else {
						if (this.pagingOn && ev.keyCode == 38 && rowInd == 1 && this.currentPage != 1) {
							this.changePage(this.currentPage - 1);
							this.selectCell(this.obj.rows[this.obj.rows.length - 1], this.cell._cellIndex, true);
							//daoger_start
							//set state of this cell according to last 
							if (editeabled) {
								this.editCell();
							}
							//daoger_end
						} else {
							if (ev.keyCode == 40 && rowInd != this.rowsCol.length && rowInd != this.obj.rows.length - 1) {
								var nrow = this.obj._rows(rowInd);
								if (nrow._sRow || nrow._rLoad) {
									return false;
								}
								this.selectCell(nrow, this.cell._cellIndex, true);
								//daoger_start
								//set state of this cell according to last 
								if (editeabled) {
									this.editCell();
								}
								//daoger_end
							} else {
								if (this.pagingOn && ev.keyCode == 40 && (this.row != this.rowsCol[this.rowsCol.length - 1] || this.rowsBuffer[0].length > 0 || !this.recordsNoMore)) {
									this.changePage(this.currentPage + 1);
									this.selectCell(this.obj._rows(0), this.cell._cellIndex, true);
									//daoger_start
									//set state of this cell according to last 
									if (editeabled) {
										this.editCell();
									}
									//daoger_end
								}
							}
						}
					}
				}
				_isIE ? ev.returnValue = false : ev.preventDefault();
			}
			//daoger_start
			//add action of left and right key
			//添加左右方向键事件
			if (ev.keyCode == 37 || ev.keyCode == 39) {
				this.editStop();
				if (ev.keyCode == 37) {
					var z = this._getPrevCell();
				} else {
					if (ev.keyCode == 39) {
						var z = this._getNextCell();
					}
				}
				if (!z) {
					return true;
				}
				this.selectCell(z.parentNode, z._cellIndex, (this.row != z.parentNode));
				if (editeabled) {
					this.editCell();
				}
				_isIE ? ev.returnValue = false : ev.preventDefault();
			}
			//daoger_end
			if ((ev.keyCode == 113) && (this._f2kE)) {
				this.editCell();
				return false;
			}
			if (ev.keyCode == 32) {
				var c = this.cell;
				var ed = this.cells4(c);
				if (ed.changeState() != false) {
					_isIE ? ev.returnValue = false : ev.preventDefault();
				}
			}
			if (ev.keyCode == 27 && this.oe != false) {
				this.editStop();
				_isIE ? ev.returnValue = false : ev.preventDefault();
			}
			if (ev.keyCode == 33 || ev.keyCode == 34) {
				if (this.pagingOn) {
					if (ev.keyCode == 33) {
						this.changePage(this.currentPage - 1);
					} else {
						this.changePage(this.currentPage + 1);
					}
				}
				var new_ind = Math.floor((this.getRowIndex(this.row.idd) || 0) + (ev.keyCode != 33 ? 1 : -1) * this.objBox.offsetHeight / (this._srdh || 20));
				if (new_ind < 0) {
					new_ind = 0;
				}
				if (this._dload && (!this.rowsCol[new_ind])) {
					this._askRealRows(new_ind, function () {
						try {
							self.selectCell(new_ind, this.cell._cellIndex, true);
						}
						catch (e) {
						}
					});
				} else {
					if (new_ind >= this.rowsCol.length) {
						new_ind = this.rowsCol.length - 1;
					}
					this.selectCell(new_ind, this.cell._cellIndex, true);
				}
				if (_isIE) {
					ev.returnValue = false;
				} else {
					ev.preventDefault();
				}
			}
			if (!this.editor) {
				if (ev.keyCode == 37 && this.cellType._dhx_find("tree") != -1) {
					this.collapseKids(this.row);
					_isIE ? ev.returnValue = false : ev.preventDefault();
				}
				if (ev.keyCode == 39 && this.cellType._dhx_find("tree") != -1) {
					this.expandKids(this.row);
					_isIE ? ev.returnValue = false : ev.preventDefault();
				}
			}
			return true;
		}
		catch (er) {
			return true;
		}
	};
	

4 文本类型单元格
它可以进行大篇幅文档的存储，但是dhtmlxgrid自带的功能和样式不怎么样，我们可以自己修改。

(1)修改单元格编辑状态下的样式，使得单元格在编辑状态下边框突出。
这是我修改dhtmlXGrid.css后的代码：

	 div.gridbox table.obj tr.rowselected td.cellselected,div.gridbox table.obj td.cellselected{
	background-color: #EDF5FE;
	border: 2px solid #009ACD;
}
	 

(2) 修改txt类型的其他属性，这些都是在dhtmlXGrid.js文件中定义的

	function eXcell_txt(cell) {
	if (cell) {
		this.cell = cell;
		this.grid = this.cell.parentNode.grid;
	}
	this.edit = function () {
		this.val = this.getValue();
		this.obj = document.createElement("TEXTAREA");
		this.obj.className = "dhx_textarea";
		this.obj.onclick = function (e) {
			(e || event).cancelBubble = true;
		};
		var arPos = this.grid.getPosition(this.cell);
		if (!this.cell._clearCell) {
			this.obj.value = this.val;
		}
		this.obj.style.display = "";
		//daoger_start
		//modify textarea align
		this.obj.style.textAlign = "left";//文字对齐方式
		//this.obj.style.textAlign = this.cell.align;
		//daoger_end
		if (_isFF) {
			var z_ff = document.createElement("DIV");
			z_ff.appendChild(this.obj);
			z_ff.style.overflow = "auto";
			z_ff.className = "dhx_textarea";
			this.obj.style.margin = "0px 0px 0px 0px";
			this.obj.style.border = "0px";
			this.obj = z_ff;
		}
		document.body.appendChild(this.obj);
		this.obj.onkeydown = function (e) {
			var ev = (e || event);
			if (ev.keyCode == 9) {
				globalActiveDHTMLGridObject.entBox.focus();
				globalActiveDHTMLGridObject.doKey({keyCode:ev.keyCode, shiftKey:ev.shiftKey, srcElement:"0"});
				return false;
			}
		};
		this.obj.style.left = arPos[0] + "px";
		//daoger_start
		//让单元格编辑状态下自适应文本长度
		//this.obj.style.top = arPos[1] + this.cell.offsetHeight + "px";
		this.obj.style.top = (arPos[1] + 1) + "px";
		//adjust width of textarea under text cell
		//if (this.cell.scrollWidth < 200) {
		//	var pw = 200;
		//} else {
		//	var pw = this.cell.scrollWidth;
		//}
		if (this.cell.scrollWidth < 100) {
			var pw = 100;
		} else {
			if (this.cell.scrollWidth > 200) {
				var pw = 200;
			} else {
				var pw = this.cell.scrollWidth;
			}
		}
		this.obj.style.width = (pw + (_isFF ? 6 : 4)) + "px";
		//this.obj.style.width = (pw + (_isFF ? 18 : 16)) + "px";
		//在键盘输入状态下，文本编辑区域随着文本的增加高度也增加
		this.obj.style.height = "0px";
		//this.obj.onPropertyChange = new Function("this.setTxtHeight(this.obj);");
		//daoger_end
		if (_isFF) {
			this.obj.firstChild.style.width = parseInt(this.obj.style.width) + "px";
			this.obj.firstChild.style.height = this.obj.offsetHeight - 3 + "px";
		}
		this.obj.focus();
		if (_isFF) {
			this.obj.firstChild.focus();
		} else {
			this.obj.focus();
		}
	};
	

来看看效果图：


说明：这只是针对1.4专业版的修改，有些功能在普通版中可能没有。

评论

11 楼 afcn0 2007-11-28  

使用utf8或者给xml增加gb2312的charset header

10 楼 javaman1982 2007-11-28  

中文显示都是乱码，有什么好的解决方法吗？
我数据都是从数据库里读出来的~
然后封装到xml里面的 可前台显示出来都是乱码~

9 楼 daoger 2007-11-05  

哦！这个没试过！

8 楼 vtsuper 2007-11-05  

我用了"mygrid.enableBuffering();"
可以一邊scroll,一邊下載資料....
但我希望在scroll的同時可以顯示一個"資料下載中"的DIV...
因此我用了mygrid.setOnScrollHandler('showDiv');
但onscroll沒有onscrollstart,onscrollend之分..因此做不了那種效果

7 楼 daoger 2007-11-03  

vtsuper 写道

沒有哦..我只有free version

還有另一個問題setOnScrollHandler
請問有沒有幫法加一個onscrollstart,onscrollend呢??
假如我希望scroll時會有一個div顯示loading字眼..但只有一個setonscrollhandler是不足夠的

说一下具体需求吧！是不是要实现滚动条向下移动时从后台获取新的数据并显示或者从缓存中获取数据并显示？如果是这样的需求的话，在专业版中已经实现了！

6 楼 vtsuper 2007-11-03  

沒有哦..我只有free version

還有另一個問題setOnScrollHandler
請問有沒有幫法加一個onscrollstart,onscrollend呢??
假如我希望scroll時會有一個div顯示loading字眼..但只有一個setonscrollhandler是不足夠的

5 楼 daoger 2007-11-02  

vtsuper 写道

請問可以分享一下代碼???
我正在希望整現merge cell的功能

如果你有专业版的话我可以给你提供一些帮助！

4 楼 vtsuper 2007-11-02  

請問可以分享一下代碼???
我正在希望整現merge cell的功能

3 楼 vtsuper 2007-11-02  

嗚...請問可以分享嗎?

2 楼 daoger 2007-10-30  

fins 写道

专业版的源代码能弄到吗??

给一个项目组帮忙的时候，人家给的！

1 楼 fins 2007-10-30  

专业版的源代码能弄到吗??