grid里用右键来实现功能菜单

核心提示：在自定义grid中，如果一个grid的列很多，grid里用右键来实现功能菜单，窗口无法显示这么长的内容，且我们一般把grid每一行按操作按钮（如编辑删除按钮）放在每一行的最后一列，整体的思路：create一个div，把grid行最后的按钮内容构造成右键的内容，这时候用户要要操作某一行的数据，如要做“删除&r

在自定义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();