grid里用右键来实现功能菜单
2009-09-16 00:00:00 来源:WEB开发网在自定义grid中,如果一个grid的列很多,窗口无法显示这么长的内容,且我们一般把grid每一行按操作按钮(如编辑删除按钮)放在每一行的最后一列。这时候用户要要操作某一行的数据,如要做“删除”操作时,就要用鼠标拉动水平滚动条,拉动到能看到最后一列的时候再进行点击操作。这就显得比较麻烦了。这时候,右键某一行,把这行最后的按钮内容构造成右键的显示内容,就可以方便地进行操作了。
整体的思路:create一个div,把grid行最后的按钮内容构造成右键的内容,执行最后一行的按钮的onclick事件即可。
主要的代码如下:
Js代码
/**
* 构造grid的右键菜单
* author:liugx
*/
//orgCellColor存放点击行的原始颜色值
ConRightMenu.orgCellColor = "";
ConRightMenu.clickRow = "";
function ConRightMenu(){
}
ConRightMenu.prototype ={
cancelRight:function(){
event.returnValue=false;
event.cancelBubble=true;
},
getEventElement:function(clickObject){
var evt = Event.getEvent();
return (evt)?(event.target || event.srcElement):clickObject;
},
getTrObj:function(){
var oCh = "";
try {
if(DOMModel.type()==1){
oCh = conRightMenu.getEventElement().parentElement;
}else if(DOMModel.type()==2){
oCh = Event.findElement(evt,"tr");
}
}catch(e){
_alert(e.message);
return "";
}
return oCh;
},
changeClassForTD:function(trObj){
//先清空其它的td底色
if(trObj.parentElement){
var allTDObj = trObj.parentElement.getElementsByTagName("TD");
for(var j=0;j<allTDObj.length;j++){
if(allTDObj[j].style.backgroundColor.toUpperCase()=='#DCDCDC'.toUpperCase()){
allTDObj[j].style.backgroundColor = ConRightMenu.orgCellColor;
}
}
}
var trChildNodes = trObj.childNodes;
//设置tr的底色
for(var i=0;i<trChildNodes.length;i++){
if(i==0){
ConRightMenu.orgCellColor = trChildNodes[i].style.backgroundColor;
}
trChildNodes[i].style.backgroundColor = '#DCDCDC';
}
},
buttonClickFun:function(itemId){
var trObj = $(ConRightMenu.clickRow);
if(trObj){
var childNodes = trObj.lastChild.childNodes;
for(var i=0;i<childNodes.length;i++){
if(childNodes[i].id == itemId){
childNodes[i].fireEvent("onclick");
}
}
}
},
consButtonHtml:function(trObj){
var result = "";
result += "<table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";
var childNodes = trObj.lastChild.childNodes;
var childNodesLen = childNodes.length;
for(var i=0;i<childNodesLen;i++){
var outerHtml = childNodes[i].outerHTML;
var onclickHtml = outerHtml.substring(outerHtml.indexOf("onclick"),outerHtml.length-1);
var itemId = childNodes[i].id;
result += "<tr onmouseover='this.className=\"mouseOverGrid\";' onmouseout='this.className=\"mouseOutGrid\";'";
result += " onclick='conRightMenu.buttonClickFun(\""+itemId+"\");";
result += "$(\"right_reslut_div\").style.display=\"none\"'><td>";
var tdImg = document.createElement('img');
var tdImgUrl = childNodes(i).currentStyle.backgroundImage.replace("url(\"","");
tdImgUrl = tdImgUrl.replace("\")","");
tdImg.src = tdImgUrl;
result += tdImg.outerHTML;
result += "</td><td>"+childNodes[i].title+"</td></tr>";
if(i<childNodesLen-1){
result += "<tr><td colspan='2'><div class='rowSplit'></div></td></tr>";
}
}
result += "</table>";
return result;
},
buildRightMenu:function(){
conRightMenu.cancelRight();
var trObj = conRightMenu.getTrObj();
if(trObj){
ConRightMenu.clickRow = trObj.id;
var buttonHtml = conRightMenu.consButtonHtml(trObj);
if(!$("right_reslut_div")){
var right_res_div = document.createElement('div');
right_res_div.id = "right_reslut_div";
}else{
right_res_div = $("right_reslut_div");
}
right_res_div.innerHTML = buttonHtml;
right_res_div.style.background = '#DCDCDC';
right_res_div.style.padding = "1 1 1 1";
right_res_div.style.border = "solid #C0C0C0 1px";
right_res_div.style.position = 'absolute';
right_res_div.style.left = event.clientX + geometry.getHorizontalScroll() + 'px';
right_res_div.style.top = event.clientY + geometry.getVerticalScroll() + 'px';
right_res_div.style.width = 100 +'px';
right_res_div.style.height = trObj.lastChild.childNodes.length*18 +'px';
if(!$("right_reslut_div")){
document.body.appendChild(right_res_div);
}
right_res_div.style.display = '';
conRightMenu.changeClassForTD(trObj);
}
},
display_right_div:function(){
if($("right_reslut_div")){
if($("right_reslut_div").style.display==''){
$("right_reslut_div").innerHTML = '';
$("right_reslut_div").style.display = 'none';
}
}
}
}
var conRightMenu = new ConRightMenu();
更多精彩
赞助商链接