国家  china

Wijmo FlexGrid的上下文菜单

概述

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

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

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

image

实现步骤如下

首先,我们需要实例化两个控件,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的上下文菜单。

更多信息请参照:

Wijmo产品网站:http://wijmo.gcpowertools.com.cn/products/wijmo-5/

Wijmo中文文档:http://wijmo.gcpowertools.com.cn/5/docs/

Wijmo中文学习教程:http://demo.gcpowertools.com.cn/wijmo5/learningwijmo/

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/Wijmo-FlexGrid-ContextMenu.aspx

不允许评论