bootstrap-treeview implémentation d'événement de double-clic personnalisé compétences method

bootstrap-treeview implémentation d'événement de double-clic personnalisé compétences method_javascript

WBOY

Libérer： 2016-05-16 15:20:46

original

1575 Les gens l'ont consulté

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.
Après de nombreux tests, ni la méthode $('#tree').dblclick( function() {}) ni la méthode $('#tree').on('dblclick', function(){}) ne fonctionnent ! Perplexe. Finalement, je suis venu à la rescousse et le problème a été résolu, mais cela ne m'a pas semblé très élégant, mais j'ai finalement pu confier le travail.
Cette solution utilise les deux événements "nodeSelected" et "nodeUnselected" fournis avec bootstrap-treeview. Si vous double-cliquez sur un nœud treeview, l'événement sélectionné et l'événement non sélectionné seront déclenchés. Vous pouvez calculer l'intervalle de temps entre ces deux. fois. Simule l’effet d’un événement de 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 spécifique 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;
      }
      
      //初始化树形结构列表
      $('#tree').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(){
        //节点选中时触发
        $('#tree').on('nodeSelected', function(event, data) {
          clickNode(event, data)
        });
        //节点取消选中时触发
        $('#tree').on('nodeUnselected', function(event, data) {
          clickNode(event, data)
        });
      }
      $('#tree').dblclick( function () { alert("Hello World!"); });
      $(document).ready(function() {
        //customDblClickFun();
      });
    </script>
  </body>

</html>

Copier après la connexion

Explication du filtrage grossier :

Les variables globales les plus importantes : lastSelectedNodeId, lastSelectedNodeId

La méthode principale : clickNode()

La méthode ci-dessus est principalement utilisée pour déterminer si la cible de l'événement sélectionné et l'opération d'événement non vérifiée sont les mêmes et si l'intervalle de temps est suffisamment petit. Les clients qui remplissent ces deux conditions souhaitent simplement déclencher un événement de double-clic. Vous pouvez personnaliser la logique métier dans la fonction customBusiness.

Ce qui précède est le contenu détaillé de cet article, j'espère qu'il sera utile à l'étude de chacun.