自定义树节点双击事件

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

 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文件里的单击事件

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

时间: 2024-11-11 21:55:10

自定义树节点双击事件的相关文章

DOM树节点和事件

一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点    DOM节点分为三大类: 元素节点,属性节点,文本节点     文本节点,属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:     可以使用getElement系列方法,取到元素节点 .      1.查看元素节点      getElementById: 通过ID取到唯一节点.如果id重名,则id只能取到第一个      ge

AppBox中main树节点单击事件JS(还有叶子的节点的页面链接)

AppBox中main.aspx.csif (menu.IsTreeLeaf) {                        node.Leaf = true;                    }                    else                    {                        node.SingleClickExpand = true;                    }---如果node.SingleClickExpand

bootstrap-treeview 自定义实现双击事件

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等.但是不知为什么这个插件没有自带双击事件. 本人经过多次测试,使用方法$('#tree').dblclick( function () {})和方法$('#tree').on('dblclick',function(){})都不起作用!百思不得其解.最后救助大神,问题解决了,

Android 自定义View实现单击和双击事件

自定义View, 1. 自定义一个Runnable线程TouchEventCountThread ,  用来统计500ms内的点击次数 2. 在MyView中的 onTouchEvent 中调用 上面的线程 3. 自定义一个Handler, 在TouchEventHandler 中 处理 统计到的点击事件, 单击, 双击, 三击, 都可以处理 核心代码如下: public class MyView extends View { ...... // 统计500ms内的点击次数 TouchEvent

C#实现自定义双击事件

本文以一个简单实例讲述了C#实现自定义双击事件的方法,分享给大家供大家参考之用.具体方法如下: 主要功能代码如下: public partial class Form1 : Form,IMessageFilter { public Form1() { InitializeComponent(); Application.AddMessageFilter(this); } private int WM_LBUTTONDBLCLK = 0x0203; public bool PreFilterMes

[前端][自定义DOM事件]不使用setTimeout实现双击事件或n击事件

使用setTimeout实现双击事件 例如,这样: let div = document.getElementById("div"); doubleClick(div, function (event) { console.log('双击') }) function doubleClick(ele, fn) { // 省略参数合法性的判断 let event = new Event("doubleClick"); // 自定义双击事件(可以使用CustomEvent

避免 C# TreeView NodeMouseDoubleClick 双击事件的节点错位的错误行为

在使用WinForm标准的TreeView控件的过程中,添加了如下类似的节点 parentNode1 ---childNode1 ---childNode2 parentNode2 ---childNode1 ---childNode2 当parentNode2收起的时候,双击parentNode2,节点会自动展开,并且 NodeMouseDoubleClick事件会发生响应,在响应NodeMouseDoubleClick事件的时候,参数TreeNodeMouseClickEventArgs e

jquery 单击和双击事件冲突解决方案

本人需要给bootstrap-treeview的树节点添加双击事件.而该插件原生方法中不带双击事件功能.该插件的节点默认绑定的单击事件,由此引起了单击事件和双击事件的冲突. 编写测试代码 引起冲突的代码: 问题效果展示: 每一次触发双击事件都会引起两次单击事件 解决冲突的代码: 解决问题效果展示: 完美解决单击事件和双击事件冲突问题 这里主要用到两个HTML DOM Window对象中函数,settimeout(),clearTimeout() 我这里两个单击事件触发的时间间隔设置在等于300毫

TreeView 树节点的处理

TreeView 树节点的处理 1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Data; 5 using System.Drawing; 6 using System.Linq; 7 using System.Text; 8 using System.Threading.Tasks; 9 using System.Windows.Forms; 10