dhtmlxgrid 1.4功能自助增补（一）－－右键菜单和行号

最新推荐文章于 2024-01-21 02:22:26 发布

zhao8848jun

最新推荐文章于 2024-01-21 02:22:26 发布

阅读量3k

点赞数

文章标签： function null border menu table class

本文链接：https://blog.youkuaiyun.com/zhao8848jun/article/details/1869959

版权

最近因为一个机会研究了一下dhtmlxgrid的1.4专业版，以下是自己的总结，有差漏或错误请各位网友积极指正！
（由于版权的问题，附件中只有我自己添加的js和css文件）

1. 添加自己的自定义右键菜单
在1.4的专业版中已经添加了自定义右键菜单并且也有示例，但是当在grid上可以选择多个单元格进行操作时，在所选区域上右击却不能显示右键菜单，
原因是grid在有区域被选择后没有修改自己的oncontextmenu属性；我用它自己的右键菜单尝试修改，没有成功。所以自己修改了一个右键菜单添加到了其
中；
以下是我自己修改后的一个右键菜单的js源码，其中添加了不少专业版中的功能；

代码

// contruct main menu object
function contextMenu() {
this.items = new Array();
this.addItem = function (item) {
this.items[this.items.length] = item;
};
this.show = function (oDoc) {
var strShow = "";
var i;
strShow = "<div id=/"rightmenu/" class=/"menudiv/">";
strShow += "<table border=/"0/" height=/"";
strShow += this.items.length * 20;
strShow += "/" cellpadding=/"0/" cellspacing=/"0/">";
strShow += "<tr height=/"3/"><td width=/"2/"></td><td>";
strShow += "<table border=/"0/" width=/"100%/" height=/"100%/" cellpadding=0 cellspacing=0 >";
strShow += "<tr><td width=/"23/"></td><td><img src=/" /" height=/"1/" border=/"0/"></td></tr></table>";
strShow += "</td><td width=/"2/"></td></tr>";
strShow += "<tr><td></td><td>";
strShow += "<table border=/"0/" width=/"100%/" height=/"100%/" cellpadding=3 cellspacing=0 >";
oDoc.write(strShow);
for (i = 0; i < this.items.length; i++) {
this.items[i].show(oDoc);
}
strShow = "</table></td><td></td></tr>";
strShow += "<tr height=/"3/"><td></td><td>";
strShow += "<table border=/"0/" width=/"100%/" height=/"100%/" cellpadding=0 cellspacing=0>";
strShow += "<tr><td width=/"23/"></td><td><img src=/" /" height=/"1/" border=/"0/"></td></tr></table>";
strShow += "</td><td></td></tr>";
strShow += "</table></div>/n";
oDoc.write(strShow);
};
}
// contruct menu Item object
function contextItem(text, icon, id, type) {
this.text = text ? text : "";
this.icon = icon ? icon : "";
this.id = id ? id : "";
this.type = type ? type : "menu";
this.show = function (oDoc) {
var strShow = "";
if (this.type == "menu") {
strShow += "<tr id='" + this.id + "' ";
strShow += "onmouseover=/"changeStyle(this, 'on');/" ";
strShow += "onmouseout=/"changeStyle(this, 'out');/" ";
//strShow += "onclick="";
//strShow += this.cmd;
strShow += ">";
strShow += "<td class=/"ltdexit/" width=/"16/">";
if (this.icon == "") {
strShow += " ";
} else {
strShow += "<img border=/"0/" src=/"";
strShow += this.icon;
strShow += "/" width=/"16/" height=/"16/" style=/"POSITION: relative/"></img>";
}
strShow += "</td><td class=/"mtdexit/">";
strShow += this.text;
strShow += "</td><td class=/"rtdexit/" width=/"5/"> </td></tr>";
} else {
if (this.type == "separator") {
//strShow += "<tr><td class="ltdexit"> </td>";
strShow += "<td class=/"mtdexit/" style='height:10px;' colspan=/"3/"><hr class='hrLine' color=/"#7EC0EE/" size=/"1/"></td></tr>";
}
}
oDoc.write(strShow);
};
}
// change style of every menu item when mouse over
function changeStyle(obj, cmd) {
if (obj) {
try {
var imgObj = obj.children(0).children(0);
if (cmd == "on") {
obj.children(0).className = "ltdfocus";
obj.children(1).className = "mtdfocus";
obj.children(2).className = "rtdfocus";
if (imgObj) {
if (imgObj.tagName.toUpperCase() == "IMG") {
imgObj.style.left = "-1px";
imgObj.style.top = "-1px";
}
}
} else {
if (cmd == "out") {
obj.children(0).className = "ltdexit";
obj.children(1).className = "mtdexit";
obj.children(2).className = "rtdexit";
if (imgObj) {
if (imgObj.tagName.toUpperCase() == "IMG") {
imgObj.style.left = "0px";
imgObj.style.top = "0px";
}
}
}
}
}
catch (e) {
}
}
}
//show right menu on page
function showMenu() {
var x, y, w, h, ox, oy;
x = event.clientX;
y = event.clientY;
var obj = document.getElementById("rightmenu");
if (obj == null) {
return true;
}
ox = document.body.clientWidth;
oy = document.body.clientHeight;
if (x > ox || y > oy) {
return false;
}
w = obj.offsetWidth;
h = obj.offsetHeight;
if ((x + w) > ox) {
xx = x - w;
}
if ((y + h) > oy) {
yy = y - h;
}
obj.style.posLeft = x + document.body.scrollLeft;
obj.style.posTop = y + document.body.scrollTop;
obj.style.visibility = "visible";
return false;
}
//hide right menu
function hideMenu() {
if (event.button == 0) {
var obj = document.getElementById("rightmenu");
if (obj == null) {
return true;
}
obj.style.visibility = "hidden";
obj.style.posLeft = 0;
obj.style.posTop = 0;
}
}
//the mothed of contruct right menu
dhtmlXGridObject.prototype.makeMenu = function () {
var self = this;
var myMenu, item;
myMenu = new contextMenu();
item = new contextItem("copy", "", "cellCopy", "menu");
myMenu.addItem(item);
item = new contextItem("cut", "", "cellCut", "menu");
myMenu.addItem(item);
item = new contextItem("paste", "", "cellPaste", "menu");
myMenu.addItem(item);
item = new contextItem("add row", "", "rowAdd", "menu");
myMenu.addItem(item);
item = new contextItem("", "", "", "separator");
myMenu.addItem(item);
item = new contextItem("delete cell(s)", "", "cellDelete", "menu");
myMenu.addItem(item);
item = new contextItem("delete row", "", "rowDelete", "menu");
myMenu.addItem(item);
myMenu.show(document);
delete item;
delete myMenu;
if (this.objName) {
this.objName = "mygrid";
}
//add action to every menu item
document.getElementById("cellCopy").onclick = new Function(new String(this.objName + ".doRightMenuCopy();"));
document.getElementById("cellCut").onclick = new Function(new String(this.objName + ".doRightMenuCut()"));
document.getElementById("cellPaste").onclick = new Function(new String(this.objName + ".doRightMenuPaste()"));
document.getElementById("rowAdd").onclick = new Function(new String(this.objName + ".doRightMenuAddRow()"));
document.getElementById("cellDelete").onclick = new Function(new String(this.objName + ".doRightMenuDelete();"));
document.getElementById("rowDelete").onclick = new Function(new String(this.objName + ".deleteSelectedItem();"));
};
function toggleMenu(isEnable) {
if (isEnable) {
document.oncontextmenu = showMenu;
} else {
document.oncontextmenu = new function () {
return true;
};
}
}
//the mothed of show right menu in dhtmlXGridObject
dhtmlXGridObject.prototype.showRightMenu = function () {
document.attachEvent("onclick", hideMenu);
showMenu();
document.attachEvent("oncontextmenu", new Function("return false"));
};
//set the name of grid object(it's necessary if you want to response the menu item click)
dhtmlXGridObject.prototype.setRightMenuObject = function (para) {
this.objName = para;
};
//response to click copy item
dhtmlXGridObject.prototype.doRightMenuCopy = function () {
//alert("doCopy");
if (this._selectionArea) {
this.setCSVDelimiter("/t");
this.copyBlockToClipboard();
} else {
if (this.cell) {
if (!(this.cellType[this.cell._cellIndex] == "linenumber") && !this.editor) {
window.clipboardData.setData("text", this.cells(this.getSelectedId(), this.cell._cellIndex).getValue());
}
}
}
};
//response to click cut item
dhtmlXGridObject.prototype.doRightMenuCut = function () {
//alert("doCut");
if (this._selectionArea) {
this.setCSVDelimiter("/t");
this.copyBlockToClipboard();
} else {
if (this.cell) {
if (!(this.cellType[this.cell._cellIndex] == "linenumber") && !this.editor) {
window.clipboardData.setData("text", this.cells(this.getSelectedId(), this.cell._cellIndex).getValue());
}
}
}
this.doRightMenuDelete();
};
//response to click paste item
dhtmlXGridObject.prototype.doRightMenuPaste = function () {
//alert("doPaste");
this.pasteBlockFromClipboard();
};
//add new row
dhtmlXGridObject.prototype.doRightMenuAddRow = function () {
var cc = this.getColumnCount();
var newnewrow = new Array(cc + 1);
this.addRow((new Date()).valueOf(), newrow, this.getRowIndex(this.getSelectedId()));
cc = null;
newrow = null;
};
//response to click delete item
dhtmlXGridObject.prototype.doRightMenuDelete = function () {
//alert("doDelete");
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.cell) {
if (!(this.cellType[this.cell._cellIndex] == "linenumber") && !this.editor) {
this.cells(this.getSelectedId(), this.cell._cellIndex).setValue();
}
}
}
};

代码

TABLE {
font-family: /"Tahoma/", /"Verdana/", /"/u5b8b/u4f53/";
font-size: 9pt
}
.mtdfocus {
background-color: #EDF5FE;
border-bottom: #B0E2FF 1px solid;
border-top: #B0E2FF 1px solid;
cursor: hand
}
.mtdexit {
background-color: whitesmoke;
border-bottom: #ffffff 1px solid;
border-top: #ffffff 1px solid;
}
.ltdfocus {
background-color: #EDF5FE;
border-bottom: #B0E2FF 1px solid;
border-top: #B0E2FF 1px solid;
border-left: whitesmoke 1px solid;
cursor: hand
}
.ltdexit {
background-color: whitesmoke;
border-bottom: #ffffff 1px solid;
border-top: #ffffff 1px solid;
border-left: whitesmoke 1px solid
}
.rtdfocus {
background-color: #EDF5FE;
border-bottom: #B0E2FF 1px solid;
border-top: #B0E2FF 1px solid;
border-right: whitesmoke 1px solid;
cursor: hand
}
.rtdexit {
background-color: whitesmoke;
border-bottom: #ffffff 1px solid;
border-top: #ffffff 1px solid;
border-right: whitesmoke 1px solid
}
.menudiv {
background-color: whitesmoke;
border: #00B2EE 1px solid;
left: 0px;
position: absolute;
top: 0px;
visibility: hidden;
z-index: 10;
}
.hrLine {
position: absolute;
bottom: 52px;
}

代码

this.init = function (fl) {
if ((this.isTreeGrid()) && (!this._h2)) {
this._aEx = new _dhtmlxArray();
this._h2 = new dhtmlxHierarchy();
if ((this._fake) && (!this._realfake)) {
this._fake._h2 = this._h2;
}
this._tgc = {imgURL:null};
}
if (!this._hstyles) {
return;
}
//daoger_start
//constructe components of right menu
this.makeMenu();
//add rightclick action
this.setOnRightClick(this.showRightMenu);
//daoger_end
this.editStop();
this.lastClicked = null;
this.resized = null;
this.fldSorted = this.r_fldSorted = null;
this.gridWidth = 0;
this.gridHeight = 0;
this.cellWidthPX = new Array(0);
this.cellWidthPC = new Array(0);
if (this.hdr.rows.length > 0) {
this.clearAll(true);
}
...... //方法的以后部分省略

代码

......
this.obj.onmousemove = this._drawTooltip;
//daoger_start
//this.obj.onclick = new Function("e", "this.grid._doClick(e||window.event);if (this.grid._sclE)this.grid.editCell(e||window.event);(e||event).cancelBubble=true;");
//hide right menu when left click
this.obj.onclick = new Function("e", "hideMenu();this.grid._doClick(e||window.event);if (this.grid._sclE)this.grid.editCell(e||window.event);(e||event).cancelBubble=true;");
//daoger_end
if (_isMacOS) {
this.entBox.oncontextmenu = new Function("e", "return this.grid._doContClick(e||window.event);");
}
......

代码

dhtmlXGridObject.prototype._OnSelectionStop = function (event) {
var self = this;
if (this._blsTimer) {
window.clearTimeout(this._blsTimer);
}
this.obj.onmousedown = function (e) {
e = e || event;
//daoger_start
//self._OnSelectionStart(e, this);
//define the different operations of right click and left click
if (e.button == 1) {
self._OnSelectionStart(e, this);//do select
} else {
if (e.button == 2) {
self.showRightMenu();//show right menu
}
}
//daoger_end
return true;
};
this.obj.onmousemove = this.obj.onmmold || null;
document.body.onmouseup = this._oldDMP || null;
if (parseInt(this._selectionObj.style.width) < 2 && parseInt(this._selectionObj.style.height) < 2) {
this._HideSelection();
} else {
var src = this.getFirstParentOfType(event.srcElement || event.target, "TD");
if ((!src) || (!src.parentNode.idd)) {
src = this._endSelectionCell;
}
while (src.tagName.toLowerCase() != "td") {
src = src.parentNode;
}
this._stopSelectionCell = src;
this._selectionArea = this._RedrawSelectionPos(this._startSelectionCell, this._stopSelectionCell);
this.callEvent("onBlockSelected", []);
}
};

2. 表格左侧添加行号
行号其实就是在原有的grid上添加一个列，放置每一行的indexid就可以了；专业版中已经给出了添加列的属性方法。
(1) 声明两个变量：

代码

var lineflag = false;//是否添加行号判定标志
var itemsid = new Array(0);//所有行的id数组

代码

//daoger_start
//create linenumber type of column
function eXcell_linenumber(cell) {
this.base = eXcell_ed;
this.base(cell);
this.editable = false;
this.edit = function () {
};
this.isDisabled = function () {
return true;
};
}
//take on all mothed of ed type
eXcell_linenumber.prototype = new eXcell_ed;
//daoger_end

代码

//daoger_start_addLineNumber
//the mothed of add line number on the first column
dhtmlXGridObject.prototype.addLineNumber = function () {
var linecell = null;
itemsid = this.getAllItemIds().split(",");
if (itemsid.length > 1) {
for (var i = 0; i < itemsid.length; i++) {
linecell = this.cells(itemsid[i], 0);
linecell.setValue(this.getRowIndex(itemsid[i]) + 1);
}
}
};
dhtmlXGridObject.prototype.setLineFlag = function (para) {
if (para) {
lineflag = true;
}
if (lineflag) {
//add line number column at the first index
this.insertColumn(0, " ", "linenumber", 30);
//add line number on this column
this.addLineNumber();
}
};
//daoger_end

代码

//daoger_start
this.xmlLoader = new dtmlXMLLoaderObject(this.doLoadDetails, window, false, this.no_cashe);
//this.xmlLoader = new dtmlXMLLoaderObject(this.doLoadDetails, window, true, this.no_cashe);
//daoger_end