JQuery EasyUI(46)

最新推荐文章于 2021-07-01 16:53:17 发布

翻译最新推荐文章于 2021-07-01 16:53:17 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了EasyUI Tree组件的事件列表，包括点击、双击、加载、展开、折叠等事件及其回调函数参数，适合EasyUI初学者及开发者深入理解Tree组件交互逻辑。

第三十六章： Tree（数）组件【3】

学习要点：

事件列表

一、事件列表：

很多事件的回调函数都包含“node”参数，其具备以下属性：

属性名	说明
id	绑定节点的标识值。
text	显示节点的文本。
iconCls	显示的节点图标CSS类ID。
checked	该节点是否被选中。
state	节点状态。'closed'或'open'。
attributes	绑定该节点的状态属性。
target	目标DOM对象。

Tree事件
事件名	参数	说明
onClick	node	在用户点击一个节点的时候触发。
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	在节点折叠的时候触发。
onBeforeCheck	node,checked	在用户点击勾选复选框之前触发，返回false可以取消勾选操作。
onCheck	node,checked	在用户点击勾选复选框的时候触发。
onBeforeSelect	node	在用户选择一个节点之前触发，返回false可以取消选择操作。
onSelect	node	在用户选择一个节点的时候触发。
onContextMenu	e,node	在右键点击节点的时候触发。
onBeforeDrag	node	在开始拖动节点之前触发，返回false可以拒绝拖动。
onStartDrag	node	在开始拖动节点的时候触发。
onStopDrag	node	在停止拖动节点的时候触发。
onDragEnter	target,source	在拖动一个节点进入到某个目标节点并释放的时候触发，返回false可以拒绝拖动。target：释放的目标节点元素。source：开始拖动的源节点。
onDragOver	target,source	在拖动一个节点经过某个目标节点并释放的时候触发，返回false可以拒绝拖动。target：释放的目标节点元素。source：开始拖动的源节点。
onDragLeave	target,source	在拖动一个节点离开某个目标节点并释放的时候触发，返回false可以拒绝拖动。target：释放的目标节点元素。source：开始拖动的源节点。
onBeforeDrag	target,source,point	在拖动一个节点之前触发，返回false可以拒绝拖动。target：释放目标的节点元素。source：开始拖动的源节点。point：表示哪一种拖动操作，可用值有：'append'，'top'，'bottom'。
onbeforeEdit	node	在编辑节点之前触发。
onAfterEdit	node	在编辑节点之后触发。
onCancelEdit	node	在取消编辑操作的时候触发。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>  
    <style>
        .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       }
    </style>            
</head>
  <body>
   <ul id="box"></ul>
   <div id="mune" class="easyui-mune" style="width:120px;display:none;">
        <div onClick="" iconCls="icon-add">添加</div>
        <div onClick="" iconCls="icon-remove">删除</div>
        <div onClick="" iconCls="icon-Edit">修改</div>
   </div>   
  </body>
</html>

$(function(){
    $('#box').tree({
       url:'tree.php',
       animate:ture,
       checkbox:true,
       cascadeCheck:false,
       onlyLeafCheck:true,
       lines:true,
       dnd:true,

     /*
      onClick:function(node){
         console.log(node);
     }

      onDblClick:function(node){
         console.log(node);
     }

      onBeforeLoad:function(node,param){
        console.log(node);
        console.log(param);
     }

      onLoadError:function(arg){
        console.log(arg.status);

     }

      onBeforeExpand:function(node){
        console.log(node);
     }

      onBeforeCollapse:function(node){
        console.log(node);
     }

      onBeforeCheck:function(node,checked){
        console.log(node);
        console.log(checked);
     }     

      onBeforeSelect:function(node,checked){
        console.log(node);
        console.log(checked);
     } 

      onContextMune:function(e,node){
        e.preventDefault();
        //查找节点
       $('#box').tree('select',node.target);
       //显示快捷菜单
       $('#mune').mune('show',{
            left:e.pageX,
            top:e.pageY,
         });
     } 

      onDragEnter:function(target,source){
        console.log(target);
        console.log(source);
     }

      onBeforeDrag:function(node){
        console.log(node);
     }

      onBeforeDrop:function(target,source,point){
        console.log(target);
        console.log(source);
        console.log(point);

     }
     */

  });
});

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/103803428

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载