Tree Context Menu

Right click on a node to display context menu.

My Documents
- Photos
- Program Files
  - Intel
  - Java
  - Microsoft Office
  - Games
- index.html
- about.html
- welcome.html

源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tree Context Menu - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Tree Context Menu</h2>
<p>Right click on a node to display context menu.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul id="tt" class="easyui-tree" data-options="
url: 'tree_data1.json',
method: 'get',
animate: true,
onContextMenu: function(e,node){
e.preventDefault();
$(this).tree('select',node.target);
$('#mm').menu('show',{
left: e.pageX,
top: e.pageY
});
}
"></ul>
</div>
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
<div onclick="removeit()" data-options="iconCls:'icon-remove'">Remove</div>
<div class="menu-sep"></div>
<div onclick="expand()">Expand</div>
<div onclick="collapse()">Collapse</div>
</div>
<script type="text/javascript">
function append(){
var t = $('#tt');
var node = t.tree('getSelected');
t.tree('append', {
parent: (node?node.target:null),
data: [{
text: 'new item1'
},{
text: 'new item2'
}]
});
}
function removeit(){
var node = $('#tt').tree('getSelected');
$('#tt').tree('remove', node.target);
}
function collapse(){
var node = $('#tt').tree('getSelected');
$('#tt').tree('collapse',node.target);
}
function expand(){
var node = $('#tt').tree('getSelected');
$('#tt').tree('expand',node.target);
}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/telwanggs/p/4533272.html

Tree Context Menu相关推荐

ABAP：为Table Control创建Context Menu
1,创建一个GUI Status 在SE80中点击程序名,并点击右键的创建,找到GUI Status. 它与普通菜单栏的定义没什么不同,但是Status Type必须选择Context Menu,假设 ...
手机浏览器中屏蔽img的系统右键菜单context menu
我们知道通过oncontextmenu事件可以屏蔽浏览器右键菜单 $('img').on("contextmenu",function(E){E.preventDefault(); ...
context menu
android的菜单有三种: Options Menu 当用户按下menu button按钮时显示的菜单 Context Menu 当用户长久按住屏幕,即被注册显示上下文菜单的视图时显示的菜单 Sub ...
Sublime text 3安装时，add to explorer context menu是什么意思?
上下文菜单(context menu),Windows操作系统中任何地方右击鼠标会出现俗称的"右键菜单",其实就是指上下文菜单.因为上下文菜单根据鼠标位置来判断弹出什么的菜单(如桌 ...
sublime text 3安装-add to explorer context menu意思
sublime text 3安装-add to explorer context menu意思正文在sublime text 3安装完成之后,会出现 "add to explorer c ...
Select: Maven-Update Project... from the project context menu or use Quick Fix. spark-MT line 1
Description Resource Path Location Type Project configuration is not up-to-date with pom.xml. Select ...
5.4 Android 的上下文菜单: Context Menu,registerForContextMenu(getListView())
Android 的上下文菜单: Context Menu,registerForContextMenu(getListView()) Android 的上下文菜单类似于 PC 上的右键菜单.当为一个视 ...
Android 上下文菜单（Context Menu）
一.概述 Android中,上下文菜单是通过onLongClick(...)事件访问的.在事件触发后显示菜单项. 在使用上下文菜单时,通常在onCreate(...)方法中,先行注册上下文菜单.在实现 ...
EasyUI(1) 使用方法、引入、创建组件、LinkButton、panel、tree、Menu
第一步:点击去官网下载EasyUI 第二步:项目中导入easyui所需东西第三步:引入EasyUI <link rel="style ...

Tree Context Menu

Tree Context Menu相关推荐

最新文章

热门文章