添加 SpreadJS 上下文菜单

本文将要介绍如何向 SpreadJS 中添加上下文菜单。实现起来十分简单,不需要捕获鼠标点击事件,不需要进行复杂的定位,仅仅需要指定 WijMenu 目标控件并且弹出即可。以下即为使用 WijMenu 作为 SpreadJS 上下文菜单的详细实现代码。<div style="width:400px;height:200px;overflow:hidden"><img style="display: inline" title="Demo1" alt="Demo1" src="http://www.grapecity.com.cn/image.ashx?picture=Demo1_thumb_19.gif" width="607" height="236"></div>

发布于 2014/01/23 00:00

ComponentOne Enterprise

本文将要介绍如何向 SpreadJS 中添加上下文菜单。实现起来十分简单,不需要捕获鼠标点击事件,不需要进行复杂的定位,仅仅需要指定 WijMenu 目标控件并且弹出即可。

以下即为使用 WijMenu 作为 SpreadJS 上下文菜单的详细实现代码。

首先,我们需要创建 HTML 页面,然后添加 JavaScript 库和 CSS 引用,再添加用于生成 SpreadJS 的 HTML 标记。资源添加请参考 Wijmo CDN 地址

以下代码用于初始化 SpreadJS 和 Wijmo Menu。

  1: $("#ss").wijspread();
  2: $("#contextMenu").wijmenu({
  3:     trigger: "#ss",
  4:     triggerEvent: "rtclick",
  5:     orientation: "vertical",
  6:     select: function (e, data) {
  7:         // process menu item click here
  8:     }
  9: });

 

我们需要 contextmenu 事件中定位菜单位置,并且在 canvas 元素的 keydown 事件中关闭菜单。

  1: $("canvas").mousedown(function (e) {
  2:     // hide context menu when the mouse down on SpreadJS
  3:     $("#contextMenu").wijmenu("hideAllMenus", e)
  4: });
  5: $("#ss").bind('contextmenu', function (e) {
  6:     // move the context menu to the position of the mouse point
  7:     $("#contextMenu").wijmenu("option", "position", { of: e });
  8:   return false;
  9: });

 

好了,SpreadJS 上下文菜单已经添加完成了。以下是效果图:

Demo1

 

Demo 页面:点击进入

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商,以“赋能开发者”为使命,致力于通过表格控件、低代码和BI等各类软件开发工具和服务,一站式满足开发者需求,帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年,40余年来始终聚焦软件开发技术,有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态,与超过3000家合作伙伴紧密合作,产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。

相关产品
推荐相关案例
关注微信
葡萄城社区二维码

关注“葡萄城社区”

活字格低代码二维码

关注“活字格低代码”

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态