开发学院网页设计JavaScript grid里用右键来实现功能菜单 阅读

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

 2009-09-16 00:00:00 来源:WEB开发网   
核心提示:在自定义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();

1 2 3 4  下一页

Tags:grid 实现 功能

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
更多精彩
    赞助商链接

    热点阅读
      焦点图片
        最新推荐
          精彩阅读