javascript:SpreadSheet.js

最新推荐文章于 2026-05-02 08:00:07 发布

原创最新推荐文章于 2026-05-02 08:00:07 发布 · 2.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #function #null #table #callback

编程小贴士专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种在网页表格中实现右键上下文菜单的方法，包括显示菜单、隐藏指定列的功能，以及如何通过JavaScript处理点击事件来控制表格单元格的可见性和样式。

//*************************************************//
//*********From here, are the part for ContextMenu
//*********Here are the menu list
//*********Switch
//************************************************//

var fn_rowColor = true;
var fn_rowColor_color1 = "";
var fn_rowColor_color2 = "";

function SalSpreadSheet(ssId)
{
    this.sectionId = ssId;
    this.fn_multipleColumnsSort = false;
    this.fn_singleColumnSort = false;
    this.fn_columnsHide = true;

    this.fn_rowColor = false;
    this.fn_rowColor_color1 = "red";
    this.fn_rowColor_color2 = "white";

    this.fn_changeWidth = false;
    this.fn_columnDraggable = false;
    this.fn_rowDraggable = false;

    this.fn_scroll = false;
}

SalSpreadSheet.prototype.initialize = function()
{
var table = document.getElementById(this.sectionId);
if(this.fn_columnsHide)
    {
        init_ContextMenu(table);
        //document.getElementById(this.sectionId + "_SELECT").style.display = "inline";
        //document.getElementById(this.sectionId + "_BtnShow").style.display = "inline";
    }

//makeRowColor(table);
//if(this.fn_changeWidth) init_Change_Columns_Width(table);
}

function init_ContextMenu(tableObj){
var objtableRows = tableObj.rows;

var menuskin = "contextskin1";
var display_url = 0;
var hiddenObj =null;
var currentSectionID = null;
var showObj = null;
var showIndex = null;

function showContextMenu()
{
var e = null;
var contextmenu = document.getElementById("contextmenu");
var containerID = null;
var container = null;
var strIframeID = "menuback1";

e = window.event;

if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;

hiddenObj = targ;
while(hiddenObj.tagName!="TD"){
     hiddenObj = hiddenObj.parentElement;
}

hiddenTrObj=hiddenObj;
while(hiddenTrObj.tagName!="TR"){
     hiddenTrObj = hiddenTrObj.parentElement;
}

    var tmpTarg = targ;
while(tmpTarg.tagName!="TABLE"){
     tmpTarg = tmpTarg.parentElement;
}

var objhiddenmenu=document.getElementById("hiddenmenuitem");
    if (objhiddenmenu) objhiddenmenu.style.display = "inline";

document.body.appendChild(ifrm);
}

// window.status = tmpTarg.offsetLeft + " " + tmpTarg.offsetTop;
// contextmenu.style.left = targ.offsetLeft + targ.offsetWidth/2 - document.mainform.scrollLeft;
// contextmenu.style.top = 250 + targ.offsetHeight/2 - document.mainform.scrollTop;

    var intWindowHeight = document.documentElement.clientHeight - 25;
var intWindowWidth = document.documentElement.clientWidth - contextmenu.offsetWidth;
//calculate where the menu can be displayed
if(event.clientY < intWindowHeight)
{
     contextmenu.style.top = e.clientY + document.body.scrollTop;//document.documentElement.scrollTop
     document.getElementById('menuback1').style.top = e.clientY + document.body.scrollTop + 1;
}
else
{
     contextmenu.style.top = e.clientY + document.body.scrollTop - 25;
     document.getElementById('menuback1').style.top = e.clientY + document.body.scrollTop - 25 + 1;
}
if(event.clientX < intWindowWidth)
{
     contextmenu.style.left = e.clientX + document.body.scrollLeft+25;
     document.getElementById('menuback1').style.left = e.clientX + document.body.scrollLeft+25+ 1;

}
else
{
     contextmenu.style.left = e.clientX + document.body.scrollLeft +25 - contextmenu.offsetWidth;
     document.getElementById('menuback1').style.left = e.clientX + document.body.scrollLeft +25 - contextmenu.offsetWidth + 1;
    }

    //do not let menu out of the window ---by kid
    var rightedge = document.body.clientWidth - event.clientX;
    var bottomedge = document.body.clientHeight - event.clientY;

    if (rightedge < contextmenu.offsetWidth)
        contextmenu.style.left = document.body.scrollLeft + event.clientX - contextmenu.offsetWidth;//left one width
    else
        contextmenu.style.left = document.body.scrollLeft + event.clientX;

    if (bottomedge < contextmenu.offsetHeight)
        contextmenu.style.top = document.body.scrollTop + event.clientY - contextmenu.offsetHeight;//up one height
    else
        contextmenu.style.top = document.body.scrollTop + event.clientY;

    ifrm.style.top = contextmenu.offsetTop;
    ifrm.style.left = contextmenu.offsetLeft;
    ifrm.style.width = contextmenu.offsetWidth;
    ifrm.style.height = contextmenu.offsetHeight;

contextmenu.style.visibility = "visible";

return false;
}

function hideContextMenu() {
contextmenu.style.visibility = "hidden";
var frameback=document.getElementById('menuback1');
if(frameback)document.body.removeChild(frameback);
}

function highlightContextMenu() {
if (event.srcElement.className == "salSpv_menuitems")
{
    event.srcElement.style.backgroundColor = "highlight";
    event.srcElement.style.color = "white";

    if (display_url)window.status = event.srcElement.url;
}
}

function lowlightContextMenu() {
if (event.srcElement.className == "salSpv_menuitems")
{
    event.srcElement.style.backgroundColor = "";
    event.srcElement.style.color = "black";
    window.status = "";
}
}

function jumptoContextMenu() {
var seltext=window.document.selection.createRange().text;

if (event.srcElement.className == "salSpv_menuitems") //contextskin0 salSpv_menuitems
{
    if (event.srcElement.getAttribute("target") != null)
      window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
    else
      window.location = event.srcElement.url;
}
return;
}

function updHidden(ssId)
{
if(hiddenObj){
hideCol(ssId);
//updHidden_callback({value:"success"});
}
}

function updShow(showButton)
{
   var selectObjId = null;
   var selectObj = null;
   var selectedCol = null;
   var cIndex = null;

   currentSectionID = getSectionID(showButton);

   selectObjId = currentSectionID +"_SELECT";
   selectObj = document.getElementById(selectObjId);

   // remind user when user didn't select any column.
   if ( selectObj.options.selectedIndex <= 0 ) {
     alert("Please select a column to display!");
     return;
   }

     tableObj = document.getElementById(currentSectionID);

    // remove option when select this item.
    for (var i=0; i < selectObj.options.length; i++){
         if(selectObj.options[i].selected){
            selectedCol = selectObj.options[i].text;
            selectObj.remove(i);
         }
    }

    // show the select column and initial the column width
    var objtableRows = tableObj.rows;
    for(var j=0; j< objtableRows.length; j++)
    {
        var strinstid = objtableRows[j].getAttribute("instanceid");
        if(strinstid=="headerinstance")
        {
             var objtableColumns = objtableRows[j].getElementsByTagName("TD");
             var columnNum = objtableColumns.length;
             for(var i = 0; i< columnNum; i++)
             {
                 if (objtableRows[j].cells[i].firstChild.nodeValue.trim() == selectedCol){
                  showIndex = objtableRows[j].cells[i].cellIndex;
                  initialColWidth(objtableRows[j].cells[i],tableObj);
                  showObj = objtableRows[j].cells[i];
                  break;
             }
        }
    }

   if(showObj){
    updShow_callback({value:"success"});
   }
}

function updShow_callback(result)
{
    if(result.value == "success")
    {
        showCol();
    }else{
        alert("Error");
        return false;
    }
}

/**************************************************************
*
* Change Column Width
*
***************************************************************/

function getPosition(obj)
{
var left = 0;
var top = 0;

    while (obj.offsetParent){
    left += obj.offsetLeft;
    top += obj.offsetTop;
    obj = obj.offsetParent;
    }
    left += obj.offsetLeft;
    top += obj.offsetTop;
    return {x:left, y:top};
}

}