在Tree中如何使用右键菜单onContextMenu？
& 在Tree中如何使用右键菜单onContextMenu？
Started by:
Number of posts: 2
我想在Tree上制作右键菜单，但是，使用onContextMenu进行，并没有反应，没有屏蔽掉浏览器的右键菜单。这是为什么呢，谢谢
在Tree中如何使用右键菜单onContextMenu？
&script type="text/javascript"&
$(function(){
$('#treeView').tree({
checkbox: false,
url:contextPath + '/treeView.do?method=distributorTreeNodeShow&test=test',
onClick:function(node){
//$(this).tree('toggle', node.target);
//alert('you dbclick '+node.text);
// var node = $('#tt2').tree('getSelected');
alert(node.text);
onExpand:function(node){
//var node = $('#tt2').tree('getSelected');
onContextMenu:function(e,node){
alert(node.text);
onBeforeExpand:function(node,param){
$('#treeView').tree('options').url = contextPath + '/treeView.do?method=distributorTreeNodeShow&test=test'
$('body').layout();
$('body').css('visibility', 'visible');
上面的onContextMenu中的alert并没有被执行。
希望得到大家的指点，谢谢
Re: 在Tree中如何使用右键菜单onContextMenu？
$('#treeView').tree({
onContextMenu:function(e,node){
e.preventDefault();
Powered by
Unless otherwise stated, the content of this page is licensed under
Click here to edit contents of this page.
Click here to toggle editing of individual sections of the page (if possible).
Watch headings for an &edit& link when available.
Append content without editing the whole page source.
Check out how this page has evolved in the past.
If you want to discuss contents of this page - this is the easiest way to do it.
View and manage file attachments for this page.
A few useful tools to manage this Site.
See pages that link to and include this page.
Change the name (also URL address, possibly the category) of the page.
View wiki source for this page without editing.
View/set parent page (used for creating breadcrumbs and structured layout).
Notify administrators if there is objectionable content in this page.
Something does not work as expected? Find out what you can do.
documentation and help section.
Terms of Service - what you can, what you should not etc.
Privacy Policy.这个ui用的一切都是json数据。树也是如此！
后台需要返回与格式匹配的json数据才能正确加载树。
页面定义一个ui：
JS访问后台：
[javascript]
&&&&$('#messageInfoAddTree').tree({&&&&&&
&&&&&&&&url:&"controller/crmMessageInfo/selectEditTree.json?rid=-1",&&
&&&&&&&&loadFilter:&function(data){&&&&&
&&&&&&&&&&&&return&&&&&&&&&
&&&&&&&&}&&&&&&&
&&&&});&&&
后台实体Bean中需要的属性：
public&class&EmployeeTree&{&&
&&&&private&Integer&&&
&&&&private&String&&
&&&&private&Boolean&checked&=&&
&&&&private&List&EmployeeTree&&&
按照此种格式填充数据就能得到下面的结果：
获取已勾选的节点数据：
[javascript]
var&nodes&=&$('#messageInfoAddTree').tree('getChecked');&&
还有一个功能，就是让tree的所有节点都勾选上或者取消勾选，在api中找了一下有一个方法：
选中指定节点。
那我们只能是选中根节点后，实现全选。
获取根节点，返回节点对象。
[javascript]
var&root&=&$('#messageInfoAddTree').tree('getRoot');&&
$("#messageInfoAddTree").tree('check',root.target);&&
取消选择：
[javascript]
var&root&=&$('#messageInfoAddTree').tree('getRoot');&&
$("#messageInfoAddTree").tree('uncheck',root.target);&&
Jquery easyui tree Api：
Tree（树）
使用$.fn.tree.defaults重写默认值对象。
树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
树控件使用&ul&元素定义。标签能够定义分支和子节点。节点都定义在&ul&列表内的&li&元素中。以下显示的元素将被用作树节点嵌套在&ul&元素中。
&id="tt"&class="easyui-tree"&&
&&&&&&&&Folder&&
&&&&&&&&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&Sub&Folder&1&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&href="#"File&11&&
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&File&12&&
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&File&13&&
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&File&2&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&File&3&&
&&&&&&&&&&&&&&
&&&&&&&&&&
&&&&&&&&File21&&
树控件也可以定义在一个空&ul&元素中并使用Javascript加载数据。
&id="tt"&&
$('#tt').tree({ &&
&&&&url:'tree_data.json'&&
使用loadFilter函数处理来自Web Services的JSON数据。
$('#tt').tree({ &&
&&&&url:&..., &&
&&&&loadFilter:&function(data){ &&
&&&&&&&&if&(data.d){ &&
&&&&&&&&&&&&return&data.d; &&
&&&&&&&&}&else&{ &&
&&&&&&&&&&&&return& &&
&&&&&&&&} &&
树控件数据格式化
每个节点都具备以下属性：
id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，'open'&或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。
一些案例：
&&&&"id":1, &&
&&&&"text":"Folder1", &&
&&&&"iconCls":"icon-save", &&
&&&&"children":[{ &&
&&&&&&&&"text":"File1", &&
&&&&&&&&"checked":true&&
&&&&},{ &&
&&&&&&&&"text":"Books", &&
&&&&&&&&"state":"open", &&
&&&&&&&&"attributes":{ &&
&&&&&&&&&&&&"url":"/demo/book/abc", &&
&&&&&&&&&&&&"price":100 &&
&&&&&&&&}, &&
&&&&&&&&"children":[{ &&
&&&&&&&&&&&&"text":"PhotoShop", &&
&&&&&&&&&&&&"checked":true&&
&&&&&&&&},{ &&
&&&&&&&&&&&&"id":&8, &&
&&&&&&&&&&&&"text":"Sub&Bookds", &&
&&&&&&&&&&&&"state":"closed"&&
&&&&&&&&}] &&
&&&&"text":"Languages", &&
&&&&"state":"closed", &&
&&&&"children":[{ &&
&&&&&&&&"text":"Java"&&
&&&&},{ &&
&&&&&&&&"text":"C#"&&
异步树控件
树控件内建异步加载模式的支持，用户先创建一个空的树，然后指定一个服务器端，执行检索后动态返回JSON数据来填充树并完成异步请求。例子如下：
&class="easyui-tree"&data-options="url:'get_data.php'"&&
树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点，如果节点没有加载子节点，它将会把节点id的值作为http请求参数并命名为'id'，通过URL发送到服务器上面检索子节点。
下面是从服务器端返回的数据。
&&&&"id":&1, &&
&&&&"text":&"Node&1", &&
&&&&"state":&"closed", &&
&&&&"children":&[{ &&
&&&&&&&&"id":&11, &&
&&&&&&&&"text":&"Node&11"&&
&&&&},{ &&
&&&&&&&&"id":&12, &&
&&&&&&&&"text":&"Node&12"&&
&&&&"id":&2, &&
&&&&"text":&"Node&2", &&
&&&&"state":&"closed"&&
节点1和节点2是封闭的，当展开节点1的时候将直接显示它的子节点。当展开节点2的时候它将发送值(2)到服务器获取子节点。
属性名属性值类型描述默认值
检索远程数据的URL地址。
检索数据的HTTP方法。（POST / GET）
定义节点在展开或折叠的时候是否显示动画效果。
定义是否在每一个借点之前都显示复选框。
cascadeCheck
定义是否层叠选中状态。
onlyLeafCheck
定义是否只在末级节点之前显示复选框。
定义是否显示树控件上的虚线。
定义是否启用拖拽功能。
节点数据加载。
$('#tt').tree({
text: 'Item1',
state: 'closed',
children: [{
text: 'Item11'
text: 'Item12'
text: 'Item2'
function(node)
定义如何渲染节点的文本。
代码示例：
$('#tt').tree({
formatter:function(node){
return node.
function(param,success,error)
定义如何从远程服务器加载数据。返回false可以忽略本操作。该函数具备以下参数：
param：发送到远程服务器的参数对象。
success(data)：当检索数据成功的时候调用的回调函数。
error()：当检索数据失败的时候调用的回调函数。
json loader
loadFilter
function(data,parent)
返回过滤过的数据进行展示。返回数据是标准树格式。该函数具备以下参数：
data：加载的原始数据。
parent: DOM对象，代表父节点。
很多事件的回调函数都包含'node'参数，其具备如下属性：
id：绑定节点的标识值。
text：显示的节点文本。
iconCls：显示的节点图标CSS类ID。
checked：该节点是否被选中。
state：节点状态，'open'&或 'closed'。
attributes：绑定该节点的自定义属性。
target：目标DOM对象。
事件名事件参数描述
在用户点击一个节点的时候触发。
代码示例：&
$('#tt').tree({
onClick: function(node){
alert(node.text);
// 在用户点击的时候提示
onDblClick
在用户双击一个节点的时候触发。
onBeforeLoad
node, param
在请求加载远程数据之前触发，返回false可以取消加载操作。
onLoadSuccess
node, data
在数据加载成功以后触发。
onLoadError
在数据加载失败的时候触发，arguments参数和jQuery的$.ajax()函数里面的'error'回调函数的参数相同。
onBeforeExpand
在节点展开之前触发，返回false可以取消展开操作。
在节点展开的时候触发。
onBeforeCollapse
在节点折叠之前触发，返回false可以取消折叠操作。
onCollapse
在节点折叠的时候触发。
onBeforeCheck
node, checked
在用户点击勾选复选框之前触发，返回false可以取消选择动作。（该事件自1.3.1版开始可用）
node, checked
在用户点击勾选复选框的时候触发。
onBeforeSelect
在用户选择一个节点之前触发，返回false可以取消选择动作。
在用户选择节点的时候触发。
onContextMenu
在右键点击节点的时候触发。
代码示例：&
// 右键点击节点并显示快捷菜单
$('#tt').tree({
onContextMenu: function(e, node){
e.preventDefault();
// 查找节点
$('#tt').tree('select', node.target);
// 显示快捷菜单
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
// 右键菜单定义如下：
&div id="mm" class="easyui-menu" style="width:120"&
&div onclick="append()" data-options="iconCls:'icon-add'"&追加&/div&
&div onclick="remove()" data-options="iconCls:'icon-remove'"&移除&/div&
onBeforeDrag
在开始拖动节点之前触发，返回false可以拒绝拖动。（该事件自1.3.2版开始可用）
onStartDrag
在开始拖动节点的时候触发。（该事件自1.3.2版开始可用）
onStopDrag
在停止拖动节点的时候触发。（该事件自1.3.2版开始可用）
onDragEnter
target, source
在拖动一个节点进入到某个目标节点并释放的时候触发，返回false可以拒绝拖动。
target：释放的目标节点元素。
source：开始拖动的源节点。
（该事件自1.3.2版开始可用）
onDragOver
target, source
在拖动一个节点经过某个目标节点并释放的时候触发，返回false可以拒绝拖动。
target：释放的目标节点元素。
source：开始拖动的源节点。
（该事件自1.3.2版开始可用）
onDragLeave
target, source
在拖动一个节点离开某个目标节点并释放的时候触发，返回false可以拒绝拖动。
target：释放的目标节点元素。
source：开始拖动的源节点。
（该事件自1.3.2版开始可用）
onBeforeDrop
target, source, point
在拖动一个节点之前触发，返回false可以拒绝拖动。
target：释放的目标节点元素。
source：开始拖动的源节点。
point：表示哪一种拖动操作，可用值有：'append','top'&或 'bottom'。
（该事件自1.3.3版开始可用）
target, source, point
当节点位置被拖动时触发。
target：DOM对象，需要被拖动动的目标节点。
source：源节点。
point：表示哪一种拖动操作，可用值有：'append','top'&或 'bottom'。
onBeforeEdit
在编辑节点之前触发。
onAfterEdit
在编辑节点之后触发。
onCancelEdit
在取消编辑操作的时候触发。
方法名方法参数描述
返回树控件属性。
读取树控件数据。
获取指定节点对象。
获取指定节点数据，包含它的子节点。
重新载入树控件数据。
获取根节点，返回节点对象。
获取所有根节点，返回节点数组。
获取父节点，'target'参数代表节点的DOM对象。
getChildren
获取所有子节点，'target'参数代表节点的DOM对象。
getChecked
获取所有选中的节点。'state'可用值有：'checked','unchecked','indeterminate'。如果'state'未指定，将返回'checked'节点。
代码示例：
var nodes = $('#tt').tree('getChecked'); // get checked nodes
var nodes = $('#tt').tree('getChecked', 'unchecked'); // 获取未选择节点
var nodes = $('#tt').tree('getChecked', 'indeterminate'); // 获取不确定的节点
译者注：（1.3.4新增获取方式）
var nodes = $('#tt').tree('getChecked', ['unchecked','indeterminate']);
getSelected
获取选择节点并返回它，如果未选择则返回null。
判断指定的节点是否是叶子节点，target参数是一个节点DOM对象。
查找指定节点并返回节点对象。
代码示例：&
// 查找一个节点并选择它
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);
选择一个节点，'target'参数表示节点的DOM对象。
选中指定节点。
取消选中指定节点。
折叠一个节点，'target'参数表示节点的DOM对象。
展开一个节点，'target'参数表示节点的DOM对象。在节点关闭或没有子节点的时候，节点ID的值(名为'id'的参数)将会发送给服务器
请求子节点的数据。
collapseAll
折叠所有节点。
展开所有节点。
打开从根节点到指定节点之间的所有节点。
滚动到指定节点。（该方法自1.3.4版开始可用）
追加若干子节点到一个父节点，param参数有2个属性：
parent：DOM对象，将要被追加子节点的父节点，如果未指定，子节点将被追加至根节点。
data：数组，节点数据。
代码示例：
// 追加若干个节点并选中他们
var selected = $('#tt').tree('getSelected');
$('#tt').tree('append', {
parent: selected.target,
text: 'node23'
text: 'node24',
state: 'closed',
children: [{
text: 'node241'
text: 'node242'
打开或关闭节点的触发器，target参数是一个节点DOM对象。
在一个指定节点之前或之后插入节点，'param'参数包含如下属性：
before：DOM对象，在某个节点之前插入。
after：DOM对象，在某个节点之后插入。
data：对象，节点数据。
下面的代码展示了如何将一个新节点插入到选择的节点之前：
var node = $('#tt').tree('getSelected');
if (node){
$('#tt').tree('insert', {
before: node.target,
text: 'node text'
译者注：（1.3.4新增获取方式）
var node = $('#tt').tree('getSelected');
if (node){
$('#tt').tree('insert', {
before: node.target,
&&&&id: 23,
&&&&text: 'node23'
&&&&&&&&&&&&&&&&},{
&&&& &&&&text: 'node24',
&&&&&&&&&&&&&&&&&&& state: 'closed',
&&&&children: [{
text: 'node241'
text: 'node242'
&&&&&&&&&&&&&&&&}]
移除一个节点和它的子节点，'target'参数是该节点的DOM对象。
移除一个节点和它的子节点，该方法跟remove方法一样，不同的是它将返回被移除的节点数据。
更新指定节点。'param'参数包含以下属性：
target(DOM对象，将被更新的目标节点)，id，text，iconCls，checked等。
代码示例：
// 更新选择的节点文本
var node = $('#tt').tree('getSelected');
if (node){
$('#tt').tree('update', {
target: node.target,
text: 'new text'
启用拖拽功能。
disableDnd
禁用拖拽功能。
开始编辑一个节点。
结束编辑一个节点。
cancelEdit
取消编辑一个节点。
阅读(...) 评论()jQuery EasyUI API 中文文档 - Tree树使用介绍
用 $.fn.tree.defaults 重写了 defaults。 依赖 draggable droppable 用法 Tree 能在 &ul& 元素里定义，此标记可以定义为叶节点和子节点。下面是一个示例：
代码如下: &ul id="tt"& &li& &span&Folder&/span& &ul& &li& &span&Sub Folder 1&/span& &ul& &li& &span&&a href="#"&File 11&/a&&/span& &/li& &li& &span&File 12&/span& &/li& &li& &span&File 13&/span& &/li& &/ul& &/li& &li& &span&File 2&/span& &/li& &li& &span&File 3&/span& &/li& &/ul& &/li& &li& &span&File21&/span& &/li& &/ul&
Tree 也可以在一个空的 &ul& 元素里定义。 &ul id="tt"&&/ul&
代码如下: $('#tt').tree({ url:'tree_data.json' });
树数据的格式（Tree data format） 每个节点可以包含下列特性： id：节点的 id，它对于加载远程数据很重要。 text：显示的节点文字。 state：节点状态， 'open' 或 'closed'，默认是 'open'。当设为 'closed' 时，此节点有子节点，并且将从远程站点加载它们。 checked：指示节点是否被选中。 Indicate whether the node is checked selected. attributes：给一个节点追加的自定义属性。 children：定义了一些子节点的节点数组。 示例：
代码如下: [{ "id":1, "text":"Folder1", "iconCls":"icon-save", "children":[{ "text":"File1", "checked":true },{ "text":"Books", "state":"open", "attributes":{ "url":"/demo/book/abc", "price":100 }, "children":[{ "text":"PhotoShop", "checked":true },{ "id": 8, "text":"Sub Bookds", "state":"closed" }] }] },{ "text":"Languages", "state":"closed", "children":[{ "text":"Java" },{ "text":"C#" }] }]
获取远程数据的 URL 。
获取数据的 http method 。
定义当节点展开折叠时是否显示动画效果。
定义是否在每个节点前边显示 checkbox 。
cascadeCheck
定义是否级联检查。
onlyLeafCheck
定义是否只在叶节点前显示 checkbox 。
定义是否启用拖放。
加载的节点数据。
很多事件的回调函数需要 'node' 函数，它包含下列特性：
id：绑定到节点的标识值。
text：显示的文字。
checked：是否节点被选中。
attributes：绑定到节点的自定义属性。
target：目标的 DOM 对象。
当用户点击一个节点时触发， node 参数包含下列特性：id：节点的 idtext：节点的文字checked：节点是否被选中attributes：节点自定义属性target：被点击目标的 DOM 对象
onDblClick
当用户双击一个节点时触发。
onBeforeLoad
node, param
当加载数据的请求发出前触发，返回 false 就取消加载动作。
onLoadSuccess
node, data
当数据加载成功时触发。
onLoadError
当数据加载失败时触发， arguments 参数与 jQuery.ajax 的'error' 函数一样。.
onBeforeExpand
节点展开前触发，返回 false 就取消展开动作。
当节点展开时触发。
onBeforeCollapse
节点折叠前触发，返回 false 就取消折叠动作。
onCollapse
当节点折叠时触发。
node, checked
当用户点击 checkbox 时触发。
onBeforeSelect
节点被选中前触发，返回 false 就取消选择动作。
当节点被选中时触发。
onContextMenu
当右键点击节点时触发。
target, source, point
当节点被拖拽施放时触发。target：DOM 对象，拖放的目标节点。source：源节点。point：表示拖放操作，可能是值是： 'append'、'top' 或 'bottom'。
onBeforeEdit
编辑节点前触发。
onAfterEdit
编辑节点后触发。
onCancelEdit
当取消编辑动作时触发。
返回树的 options。
加载树的数据。
获取指定的节点对象。
获取指定的节点数据，包括它的子节点。
重新加载树的数据。
获取根节点，返回节点对象。
获取根节点们，返回节点数组。
获取父节点， target 参数指节点的 DOM 对象。
getChildren
获取子节点， target 参数指节点的 DOM 对象。
getChecked
获取所有选中的节点。
getSelected
获取选中的节点并返回它，如果没有选中节点，就返回 null。
把指定的节点定义成叶节点， target 参数表示节点的 DOM 对象。
找到指定的节点并返回此节点对象。
选中一个节点， target 参数表示节点的 DOM 对象。
把指定节点设置为勾选。
把指定节点设置为未勾选。
折叠一个节点， target 参数表示节点的 DOM 对象。
展开一个节点， target 参数表示节点的 DOM 对象。
collapseAll
折叠所有的节点们。
展开所有的节点们。
从指定节点的根部展开。
追加一些子节点们到一个父节点， param 参数有两个特性：parent：DOM 对象，追加到的父节点，如果没有分配，则追加为根节点。data：数组，节点们的数据。
切换节点的展开/折叠状态， target 参数表示节点的 DOM 对象。
在指定节点的前边或后边插入一个节点， param 参数包含下列特性：before：DOM 对象，前边插入的节点。after：DOM 对象，后边插入的节点。data：对象，节点数据。
移除一个节点和它的子节点们， target 参数表示节点的 DOM 对象。
弹出一个节点和它的子节点们，此方法和 remove 一样，但是返回了移除的节点数据。
跟心指定的节点， param 参数有下列特性：target（DOM 对象，被更新的节点）、id、text、iconCls、checked、等等。
启用拖放功能。
disableDnd
禁用拖放功能。
开始编辑节点。
结束编辑节点。
cancelEdit
取消编辑节点。
顶一下(0) 踩一下(0)
热门标签：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&