国家  china

如何在Wijmo5的TreeView节点上实现右键菜单

概述

本文详细介绍如何使用Wijmo的最新版本中的menu组件作为右键菜单来使用,文章中主要是以常用的TreeView作为示例,当右键点击到Treeview的节点的时候显示菜单项,让我们一起来学习吧!

第一步:

我们首先要引用必要的js文件:

<link href="styles/vendor/wijmo.min.css" rel="stylesheet" />

<script src="scripts/vendor/wijmo.min.js"></script>

<script src="scripts/vendor/wijmo.nav.min.js"></script>

<script src="scripts/vendor/wijmo.odata.min.js" type="text/javascript"></script>

<script src="scripts/vendor/wijmo.input.min.js"></script>

并且创建右键菜单menu的html元素,以及树形组件

<div id="tvDragDrop" class="custom-tree"></div>

<select id="theMenu" style="display:none">

<option value="option1">Option 1</option>

<option value="option2">Option 2</option>

<option value="option3">Option 3</option>

<option value="option4">Option 4</option>

</select>

第二步:

创建并绑定数据到treeview控件上,并且创建右键menu菜单。

   1:  var tv = new wijmo.nav.TreeView('#tvDragDrop', {
   2:  displayMemberPath: 'header',
   3:  childItemsPath: 'items',
   4:  showCheckboxes: true,
   5:  itemsSource: items
   6:    });
   1:              //defined the context
   2:              var ctxMenu = new wijmo.input.Menu('#theMenu', {
   3:                  itemClicked: function (s, e) {
   4:                      alert('thanks for selecting ' + s.selectedValue);
   5:                  }
   6:              })

关联menu菜单到treeview上

   1:  // attach context menu to tree
   2:              tv.hostElement.addEventListener('contextmenu', function (e) {
   3:                  e.preventDefault();
   4:                  ctxMenu.show(e);
   5:              });

这样我们的右键菜单就大功告成了!

如图:

image

demo下载地址:

如果你有疑问,可以到GCDN获得技术支持:

http://gcdn.gcpowertools.com.cn/showforum-68.html

GCDNhttp://gcdn.gcpowertools.com.cn/

官方网站http://www.gcpowertools.com.cn/

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

不允许评论