How to write bootstrap double-click event-Bootstrap Tutorial-php.cn

Home

Web Front-end

Bootstrap Tutorial

How to write bootstrap double-click event

angryTom

Jul 19, 2019 am 11:03 AM

bootstrap

How to write bootstrap double-click event

Recommended tutorial: Bootstrap tutorial

##bootstrap-treeview is a very cool jQuery multi-level list tree plug-in based on bootstrap. This jQuery plug-in is based on Twitter Bootstrap and displays some inheritance tree structures, such as view trees, list trees, etc., in a simple and elegant way. But I don’t know why this plug-in doesn’t have its own double-click event.

This double-click event solution uses the two events "nodeSelected" and "" that come with bootstrap-treeview nodeUnselected". If you double-click on a treeview node, the selected event and the unselected event will be triggered. Calculating the time interval between these two times can simulate the effect of the double-click event. The interval between each click of the left mouse button in a double-click event is 300 milliseconds for manual operation.

The code is as follows:

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="css/bootstrap.css" rel="stylesheet" />
    </head>
    <body>
        <div id="tree" style="width: 400px;height: 1000px;margin-left: auto;margin-right: auto;"></div>
        <div id="testDate"></div>
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap-treeview.js"></script>
        <script type="text/javascript">
            //获取树形结构列表数据
            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>
    </body></html>

Rendering:

How to write bootstrap double-click event

Key points:

## The most important global variables:

lastSelectedNodeId

,lastSelectedNodeId

The most important method:

clickNode()

The above method is mainly used to determine Whether the target of the selected event and the unchecked event operation is the same and whether the time interval is small enough. Customers who meet these two conditions just want to trigger a double-click event. You can customize business logic in function

customBusiness

. Original article address: https://www.cnblogs.com/chengxuyuanzhilu/p/5114155.html

The above is the detailed content of How to write bootstrap double-click event. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn