A-A+

jquery easyui树形菜单调用点击事件例子

2016年01月08日 web前端设计 暂无评论 阅读 8 views 次

easyui可以让我们非常简单方便的实现各种效果了,并且easyui可以让我们程序员做出非常漂亮的ui出来,下面来看一个easyui树形菜单调用点击事件例子。

翻了api文档好像没找到类似的点击事件和示例demo

于是想自己写额,刚开始是这样的,代码如下:

  1. $("#munes ul li").live("click",function(){  
  2.                 alert(1)  
  3. });  

发现没用我用的是 jquery easyui 1.4.1 改成其他的也没效果。好吧我百度了下找到了正确的答案,代码如下:

  1. $("#munes ul").tree({  
  2.                 onClick:function(node){  
  3.            alert(node)  
  4.      }  
  5. });  

node里面有你需要的所有这个菜单的信息。你要怎么搞就怎么搞了。

Jquery EasyUI中树菜单控件tree 默认隐藏:

node属性中有个state,默认是open,传数据的时候设置为closed就可以了。

类似于如下代码:

  1. {  
  2. “text”:”Languages”,  
  3. “state”:”closed”,  
  4. “children”:[{  
  5. "text":"Java"  
  6. },{  
  7. "text":"C#"  
  8. }]  
  9. }  

鼠标双击树形菜单展开隐藏的子菜单代码:

  1. $("#munes ul").tree({  
  2.                 onClick:function(node){  
  3.                     if(node.attributes.url!="javascript:;") addTab(node.text,node.attributes.url);  
  4.                 },  
  5.             onDblClick: function(node) {  
  6.             $(this).tree(node.state === 'closed' ? 'expand' : 'collapse', node.target);  
  7.             node.state = node.state === 'closed' ? 'open' : 'closed';  
  8.               }  
  9. });  

注意里面的双击事件

树形菜单判断是否是子节点,代码如下:

  1. $(‘#tt’).tree({  
  2. onClick: function(node){  
  3. if($(‘#tt’).tree(‘isLeaf’,node.target)){//判断是否是叶子节点  
  4. }  
  5. }  
  6. });  

附参考:

onClick

当用户点击节点时触发,node参数包含如下属性:

id:节点id。

text:显示在节点上的文本。

checked:节点是否被选择。

attributes:节点的自定义属性。

target:被点击的目标DOM对象。

onDblClick node 当用户双击节点时触发。

onBeforeLoad node, param 在请求载入数据之前触发,返回false将取消载入。

onLoadSuccess node, data 当数据载入成功时触发。

onLoadError arguments 当数据载入失败时触发,arguments参数跟jQuery.ajax的’error’函数一样。

onBeforeExpand node 在节点打开之前触发,返回false将取消打开。

onExpand node 在节点被打开时触发。

onBeforeCollapse node 在节点被关闭之前触发,返回false将取消关闭。

onCollapse node 当节点被关闭时触发。

onCheck node, checked 当用户点击复选框时触发。

onBeforeSelect node 在节点被选择之前触发,返回false将取消选择。

onSelect node 当节点被选择时触发。

onContextMenu e, node 当节点被鼠标右键点击时触发。

onDrop target, source, point 当节点位置被(拖动)更换时触发。

target:DOM对象,需要被拖动动的目标节点。

source:原始节点。

point:指明拖动方式,可选值:’append’,’top’或者’bottom’。

onBeforeEdit node 在编辑节点之前触发。

onAfterEdit node 在编辑节点之后触发。

onCancelEdit node 当取消编辑时触发。

标签:

给我留言