Comment écrire un événement de double-clic bootstrap-Tutoriel d'amorçage-php.cn

Comment écrire un événement de double-clic bootstrap

angryTom

Libérer： 2019-07-19 11:04:28

original

2590 Les gens l'ont consulté

Comment écrire un événement de double-clic bootstrap

Tutoriels recommandés : Tutoriel Bootstrap

bootstrap-treeview est un plug-in d'arborescence de liste multi-niveaux jQuery très cool basé sur bootstrap. Ce plug-in jQuery est basé sur Twitter Bootstrap et affiche certaines structures arborescentes d'héritage, telles que les arborescences de vues, les arborescences de listes, etc., de manière simple et élégante. Mais je ne sais pas pourquoi ce plug-in n’a pas son propre événement de double-clic.

Cette solution d'événement de double-clic utilise les deux événements "nodeSelected" et "" fournis avec bootstrap-treeview nodeUnselected ". Si vous double-cliquez sur un nœud arborescent, l'événement sélectionné et l'événement non sélectionné seront déclenchés. Le calcul de l'intervalle de temps entre ces deux instants peut simuler l'effet de l'événement double-clic. L'intervalle entre chaque clic du bouton gauche de la souris lors d'un événement de double-clic est de 300 millisecondes pour une opération manuelle.

Le code est le suivant :

<!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>

Copier après la connexion

Rendu :

Comment écrire un événement de double-clic bootstrap

Points clés :

Les variables globales les plus importantes :

　　　　lastSelectedNodeId, lastSelectedNodeId

La méthode la plus importante :

　　　　clickNode()

La méthode ci-dessus est principalement utilisée pour déterminer si la cible de l'événement sélectionné et le non sélectionné le fonctionnement de l'événement est le même et le temps est-il suffisamment petit ? Les clients qui remplissent ces deux conditions souhaitent simplement déclencher un événement de double-clic. La logique métier peut être personnalisée en fonction customBusiness.

Adresse originale de l'article : https://www.cnblogs.com/chengxuyuanzhilu/p/5114155.html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!