概述

本文主要讲述在FlexGrid中如何引用Menu菜单作为右键菜单（上下问菜单）

您可以使用菜单控件创建上下文菜单.

例如，这个示例创建一个FlexGrid的上下文菜单，并处理几个元素上的“上下文菜单”事件，以在用户请求时显示菜单，如图

实现步骤如下

首先，我们需要实例化两个控件，flexgrid、Menu，在flexgrid上我们使用“.has-ctx-menu“来绑定我们的上下文菜单

Html:

   1:  <h3>

   2:     FlexGrid与ContextMenu

   3:  </h3>

   4:  <div id="theGrid" class="has-ctx-menu"></div>

Js:

   1:  onload = function() {

2:

   3:    // create the menu

   4:    var div = document.createElement('div');

   5:    var menu = new wijmo.input.Menu(div, {

   6:      displayMemberPath: 'header',

   7:      selectedValuePath: 'cmd',

   8:      dropDownCssClass: 'ctx-menu',

   9:      itemsSource: [

  10:          { header: '<span class="glyphicon glyphicon-asterisk"></span>&nbsp;&nbsp;New', cmd: 'NEW' },

  11:        { header: '<span class="glyphicon glyphicon-folder-open"></span>&nbsp;&nbsp;Open', cmd: 'OPEN' },

  12:        { header: '<span class="glyphicon glyphicon-floppy-disk"></span>&nbsp;&nbsp;Save', cmd: 'SAVE' },

  13:        { header: '<span class="wj-separator"></span>' },

  14:        { header: '<span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;Exit', cmd: 'EXIT' },

  15:          ],

  16:      itemClicked: function(s, e) {

  17:        alert('Executing **' + menu.selectedValue + '** for element **' + menu.owner.id + '**');

  18:      }

  19:    });

20:

  21:    // use it as a context menu for one or more elements

  22:    var els = document.querySelectorAll('.has-ctx-menu');

  23:    for (var i = 0; i < els.length; i++) {

  24:      els[i].addEventListener('contextmenu', function(e) {

  25:        menu.owner = wijmo.closest(e.target, '.has-ctx-menu');

  26:        if (menu.owner) {

  27:            e.preventDefault();

  28:            menu.show(e);

  29:        }

  30:      }, true);

  31:    }

32:

  33:    var theGrid = new wijmo.grid.FlexGrid('#theGrid', {

  34:        itemsSource: getData()

  35:    });

36:

  37:    // create some random data

  38:    function getData() {

  39:      var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),

  40:        data = [];

  41:      for (var i = 0; i < countries.length; i++) {

  42:        data.push({

  43:          id: i,

  44:          country: countries[i % countries.length],

  45:          sales: Math.random() * 100000,

  46:          expenses: Math.random() * 50000

  47:        });

  48:      }

  49:      return data;

  50:    }

  51:  }

Css:

   1:  .owners:after {

   2:    content: "";

   3:    clear: both;

   4:    display: block;

   5:  }

   6:  .owners > div {

   7:    float: left;

   8:    margin: 20px;

   9:    padding: 20px;

  10:  }

就可以得到我们的flexgrid的上下文菜单。