SpreadJS是一个JavaScript的电子表格和网格功能控件,基于HTML5和jQuery技术,通过画布呈现在客户端。SpreadJS使用Canvas绘制表格,默认情况下没有右键菜单,本文主要介绍如何使用JavaScript创建一个右键菜单。
1.添加一个spreadContextMenu菜单
<body>
<div id="ss" style="width: 500px; height: 300px; border: 1px solid gray">
</div>
<ul id="spreadContextMenu" class="dropdown-menu" role="menu" style="display: none">
<li><a class="localize" data-action="cut">剪切</a></li>
<li><a class="localize" data-action="copy">复制</a></li>
<li><a class="localize" data-action="paste">粘贴</a></li>
<li class="context-header divider"></li>
<li class="context-header"><a class="localize" data-action="insert">插入</a></li>
<li class="context-header"><a class="localize" data-action="delete">删除</a></li>
<li class="context-cell divider"></li>
<li class="context-cell context-merge"><a class="localize" data-action="merge">合并</a></li>
<li class="context-cell context-unmerge"><a class="localize" data-action="unmerge">取消合并</a></li>
</ul>
</body>
2.右键单击的事件
//右键点击触发
function processSpreadContextMenu(e)
{
// move the context menu to the position of the mouse point
var sheet = spread.getActiveSheet(),
target = getHitTest(e.pageX, e.pageY, sheet),
hitTestType = target.hitTestType,
row = target.row,
col = target.col,
selections = sheet.getSelections();
var isHideContextMenu = false;
if (hitTestType === GcSpread.Sheets.SheetArea.colHeader)
{
if (getCellInSelections(selections, row, col) === null)
{
sheet.setSelection(-1, col, sheet.getRowCount(), 1);
}
if (row !== undefined && col !== undefined)
{
$(".context-header").show();
$(".context-cell").hide();
}
} else if (hitTestType === GcSpread.Sheets.SheetArea.rowHeader)
{
if (getCellInSelections(selections, row, col) === null)
{
sheet.setSelection(row, -1, 1, sheet.getColumnCount());
}
if (row !== undefined && col !== undefined)
{
$(".context-header").show();
$(".context-cell").hide();
}
} else if (hitTestType === GcSpread.Sheets.SheetArea.viewport)
{
if (getCellInSelections(selections, row, col) === null)
{
sheet.clearSelection();
sheet.endEdit();
sheet.setActiveCell(row, col);
updateMergeButtonsState();
}
if (row !== undefined && col !== undefined)
{
$(".context-header").hide();
$(".context-cell").hide();
showMergeContextMenu();
} else
{
isHideContextMenu = true;
}
} else if (hitTestType === GcSpread.Sheets.SheetArea.corner)
{
sheet.setSelection(-1, -1, sheet.getRowCount(), sheet.getColumnCount());
if (row !== undefined && col !== undefined)
{
$(".context-header").hide();
$(".context-cell").show();
}
}
var $contextMenu = $("#spreadContextMenu");
$contextMenu.data("sheetArea", hitTestType);
if (isHideContextMenu)
{
hideSpreadContextMenu();
} else
{
$contextMenu.css({ left: e.pageX, top: e.pageY });
$contextMenu.show();
$(document).on("click.contextmenu", function ()
{
if ($(event.target).parents("#spreadContextMenu").length === 0)
{
hideSpreadContextMenu();
}
});
}
}
3.给菜单处理方法
//右键菜单点击触发
function processContextMenuClicked()
{
var action = $(this).data("action");
var sheet = spread.getActiveSheet();
var sheetArea = $("#spreadContextMenu").data("sheetArea");
hideSpreadContextMenu();
switch (action)
{
case "cut":
GcSpread.Sheets.SpreadActions.cut.call(sheet);
break;
case "copy":
GcSpread.Sheets.SpreadActions.copy.call(sheet);
break;
case "paste":
GcSpread.Sheets.SpreadActions.paste.call(sheet);
break;
case "insert":
if (sheetArea === GcSpread.Sheets.SheetArea.colHeader)
{
sheet.addColumns(sheet.getActiveColumnIndex(), 1);
} else if (sheetArea === GcSpread.Sheets.SheetArea.rowHeader)
{
sheet.addRows(sheet.getActiveRowIndex(), 1);
}
break;
case "delete":
if (sheetArea === GcSpread.Sheets.SheetArea.colHeader)
{
sheet.deleteColumns(sheet.getActiveColumnIndex(), 1);
} else if (sheetArea === GcSpread.Sheets.SheetArea.rowHeader)
{
sheet.deleteRows(sheet.getActiveRowIndex(), 1);
}
break;
case "merge":
var sel = sheet.getSelections();
if (sel.length > 0)
{
sel = sel[sel.length - 1];
sheet.addSpan(sel.row, sel.col, sel.rowCount, sel.colCount, GcSpread.Sheets.SheetArea.viewport);
}
updateMergeButtonsState();
break;
case "unmerge":
var sels = sheet.getSelections();
for (var i = 0; i < sels.length; i++)
{
var sel = getActualCellRange(sels[i], sheet.getRowCount(), sheet.getColumnCount());
for (var r = 0; r < sel.rowCount; r++)
{
for (var c = 0; c < sel.colCount; c++)
{
var span = sheet.getSpan(r + sel.row, c + sel.col, GcSpread.Sheets.SheetArea.viewport);
if (span)
{
sheet.removeSpan(span.row, span.col, GcSpread.Sheets.SheetArea.viewport);
}
}
}
}
updateMergeButtonsState();
break;
default:
break;
}
}
4.将事件初始化
$(document).ready(function ()
{
spread = new GcSpread.Sheets.Spread($("#ss").get(0), {
sheetCount: 3
});
$("#ss").bind("contextmenu", processSpreadContextMenu);
$("#spreadContextMenu a").click(processContextMenuClicked);
$(document).on("contextmenu", function ()
{
event.preventDefault();
return false;
});
});
效果截图:
示例下载:
这就是你想要的SpreadJS,快来官网了解并下载它吧!