zoukankan      html  css  js  c++  java
  • 自定义树节点双击事件

    目前项目收尾,开始对之前的,之前用的一个树节点的插件,只可以使用单击事件,无法使用双击事件,于是百度一下,自定义了一个双击事件,原理是通过两次时间差来定义,代码如下:

     1                 //最后一次触发节点Id
     2                 var lastSelectedNodeId = null;
     3                 //最后一次触发时间
     4                 var lastSelectTime = null;
     5 
     6         //在这里自定义双击需要实现的功能
     7                 function doubliclick(data){
     8                    
     9                 }
    10 
    11                 //clicknode单击事件
    12                 function clickNode(event, data) {
    13                     if (lastSelectedNodeId && lastSelectTime) {
    14                         var time = new Date().getTime();
    15                         var t = time - lastSelectTime;
    16                         if (lastSelectedNodeId === data.nodeId && t < 500) {
    17                             customBusiness(data);
    18                         }
    19                     }
    20                     lastSelectedNodeId = data.nodeId;
    21                     lastSelectTime = new Date().getTime();
    22 
    23                 }
    24 
    25                 //自定义双击事件
    26                 function customDblClickFun() {
    27                     //节点选中时触发
    28                     $('#nodeselect').on('nodeSelected', function (event, data) {
    29                         clickNode(event, data)
    30                     });
    31                     //节点取消选中时触发
    32                     $('#nodeselect').on('nodeUnselected', function (event, data) {
    33                         clickNode(event, data)
    34                     });
    35                 }
    36 
    37                 //调用双击事件的播放方法
    38                 $(document).ready(function () {
    39                     doubliclick();
    40                 });
    自定义双击实现的功能

    写好了这个方法之后,发现和原生的单击方法有冲突,以我用的插件为例,我发现虽然单双击功能有冲突,但是在选中的时候背景依旧会变色,于是找到插件的js文件,以click和selected为关键字查找,打上断点,调试,找到单击的事件

    Tree.prototype.setSelectedState = function (node, state, options) {
    
            if (state === node.state.selected) return;
    
            if (state) {
    
                // If multiSelect false, unselect previously selected
                if (!this.options.multiSelect) {
                    $.each(this.findNodes('true', 'g', 'state.selected'), $.proxy(function (index, node) {
                        this.setSelectedState(node, false, options);
                    }, this));
                }
    
                // Continue selecting node
                node.state.selected = true;
                if (!options.silent) {
                    this.$element.trigger('nodeSelected', $.extend(true, {}, node));
                }
            }
            else {
    
                // Unselect node
                node.state.selected = false;
                if (!options.silent) {
                    this.$element.trigger('nodeUnselected', $.extend(true, {}, node));
                }
            }
        };
    原JS文件里的单击事件

    在单击事件里加上想要实现的单击功能即可

  • 相关阅读:
    Mac下tomcat的安装与配置
    jquery中的属性和css
    jquery中的选择器
    数组对象元素的添加,String对象,BOM对象以及文档对象的获取
    js中的函数,Date对象,Math对象和数组对象
    js中的循环语句
    js中的运算符和条件语句
    js中的数据类型及其转换
    js的意义,引用方法及变量
    移动端网页项目总结
  • 原文地址:https://www.cnblogs.com/Liu30/p/7851235.html
Copyright © 2011-2022 走看看