|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2007-10-30
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专业版的修改，有些功能在普通版中可能没有。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2007-10-30
专业版的源代码能弄到吗??
|
| 返回顶楼 | |
|
发表时间：2007-10-30
fins 写道 专业版的源代码能弄到吗??
给一个项目组帮忙的时候，人家给的！ |
| 返回顶楼 | |
|
发表时间：2007-11-02
請問可以分享一下代碼???
我正在希望整現merge cell的功能 |
| 返回顶楼 | |
|
发表时间：2007-11-02
vtsuper 写道 請問可以分享一下代碼???
我正在希望整現merge cell的功能 如果你有专业版的话我可以给你提供一些帮助！ |
| 返回顶楼 | |
|
发表时间：2007-11-03
沒有哦..我只有free version
還有另一個問題setOnScrollHandler 請問有沒有幫法加一個onscrollstart,onscrollend呢?? 假如我希望scroll時會有一個div顯示loading字眼..但只有一個setonscrollhandler是不足夠的 |
| 返回顶楼 | |
|
发表时间：2007-11-03
vtsuper 写道 沒有哦..我只有free version
還有另一個問題setOnScrollHandler 請問有沒有幫法加一個onscrollstart,onscrollend呢?? 假如我希望scroll時會有一個div顯示loading字眼..但只有一個setonscrollhandler是不足夠的 说一下具体需求吧！是不是要实现滚动条向下移动时从后台获取新的数据并显示或者从缓存中获取数据并显示？如果是这样的需求的话，在专业版中已经实现了！ |
| 返回顶楼 | |
|
发表时间：2007-11-05
我用了"mygrid.enableBuffering();"
可以一邊scroll,一邊下載資料.... 但我希望在scroll的同時可以顯示一個"資料下載中"的DIV... 因此我用了mygrid.setOnScrollHandler('showDiv'); 但onscroll沒有onscrollstart,onscrollend之分..因此做不了那種效果 |
| 返回顶楼 | |
|
发表时间：2007-11-05
哦！这个没试过！
|
| 返回顶楼 | |
|
发表时间：2007-11-28
中文显示都是乱码，有什么好的解决方法吗？
我数据都是从数据库里读出来的~ 然后封装到xml里面的 可前台显示出来都是乱码~ |
| 返回顶楼 | |
