bootstrap双击事件怎么写

百变鹏仔 1个月前 (11-14) #bootstrap

文章标签双击

推荐教程：Bootstrap教程

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。但是不知为什么这个插件没有自带双击事件。

这个双击事件的解决方案中使用到了bootstrap-treeview自带的两个事件"nodeSelected"和"nodeUnselected".如果在treeview的节点上双击一定会触发选中事件和取消选中事件，计算这两个时间的时间间隔就可以模拟出双击事件的效果了。双击事件每次点击鼠标左键的间隔，人为操作300毫秒足够。

代码如下：

nbsp;html&gt;            <meta>        <title></title>        <link>                <div></div>        <div></div>        <script></script>        <script></script>        <script>            //获取树形结构列表数据            function getTree() {                var tree = [{                    text: "Parent 1",                    nodes: [{                        text: "Child 1",                        nodes: [{                            text: "Grandchild 1"                        }, {                            text: "Grandchild 2"                        }]                    }, {                        text: "Child 2"                    }]                }, {                    text: "Parent 2"                }, {                    text: "Parent 3"                }, {                    text: "Parent 4"                }, {                    text: "Parent 5"                }];                return tree;            }                        //初始化树形结构列表            $(&#39;#tree&#39;).treeview({                data: getTree()            });                        //最后一次触发节点Id            var lastSelectedNodeId = null;            //最后一次触发时间            var lastSelectTime = null;                        //自定义业务方法            function customBusiness(data){                alert("双击获得节点名字： "+data.text);            }            function clickNode(event, data) {                if (lastSelectedNodeId && lastSelectTime) {                    var time = new Date().getTime();                    var t = time - lastSelectTime;                    if (lastSelectedNodeId == data.nodeId && t < 300) {                        customBusiness(data);                    }                }                lastSelectedNodeId = data.nodeId;                lastSelectTime = new Date().getTime();            }                        //自定义双击事件            function customDblClickFun(){                //节点选中时触发                $(&#39;#tree&#39;).on(&#39;nodeSelected&#39;, function(event, data) {                    clickNode(event, data)                });                //节点取消选中时触发                $(&#39;#tree&#39;).on(&#39;nodeUnselected&#39;, function(event, data) {                    clickNode(event, data)                });            }            $(document).ready(function() {               customDblClickFun();            });        </script>

效果图：

重点：

最主要的全局变量：

lastSelectedNodeId，lastSelectedNodeId

最主要的方法：

clickNode()

上面这个方法主要用来判断选中事件和取消选中事件操作的目标是否是一个且时间间隔是否足够小。符合这两个条件客户就是想触发双击事件。可以再函数customBusiness中自定义业务逻辑。

原文章地址:https://www.cnblogs.com/chengxuyuanzhilu/p/5114155.html

文章推荐

bootstrap双击事件怎么写

学习bootstrap需要什么基础

bootstrap模态框有什么用

bootstrap是什么意思啊

bootstrap是什么时间开源的

bootstrap怎么实现响应式