自定义树节点双击事件

Posted StephenCurry

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义树节点双击事件相关的知识,希望对你有一定的参考价值。

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

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

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

以上是关于自定义树节点双击事件的主要内容,如果未能解决你的问题,请参考以下文章

◆◆1OO ALV-单击事件,双击事件,添加自定义按钮事件(EVENT)实例

如何让自定义视图观察包含片段的生命周期事件而不是活动?

使用动态组件和自定义事件时的 VueJS 警告

用户自定义TreeView控制双击冒泡事件WPF MVVM问题,怎么解决

wpf 自定义treeview 如何获得树节点集合

第二十二篇 -- 事件与信号(自定义label信号的双击功能)