概述
本文详细介绍如何使用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: });
这样我们的右键菜单就大功告成了!
如图:
demo下载地址:
如果你有疑问,可以到GCDN获得技术支持:
http://gcdn.grapecity.com.cn/showforum-68.html
GCDN:http://gcdn.grapecity.com.cn/
官方网站:/developer