Bootstrap-Treeview benutzerdefinierte Doppelklick-Ereignisimplementierungsmethode

Bootstrap-Treeview benutzerdefinierte Doppelklick-Ereignisimplementierungsmethode_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:20:46

Original

1576 Leute haben es durchsucht

bootstrap-treeview ist ein sehr cooles jQuery-Plug-in für mehrstufige Listenbäume, das auf Bootstrap basiert. Dieses jQuery-Plugin basiert auf Twitter Bootstrap und zeigt einige Vererbungsbaumstrukturen wie Ansichtsbäume, Listenbäume usw. auf einfache und elegante Weise an. Aber ich weiß nicht, warum dieses Plug-in kein eigenes Doppelklick-Ereignis hat.
Nach vielen Tests funktionieren weder die Methode $('#tree').dblclick( function () {}) noch die Methode $('#tree').on('dblclick', function(){})! Verwirrt. Schließlich kam ich zu Hilfe und das Problem wurde gelöst, aber es schien nicht sehr elegant zu sein, aber am Ende konnte ich die Arbeit übergeben.
Diese Lösung verwendet die beiden Ereignisse „nodeSelected“ und „nodeUnselected“, die mit Bootstrap-Treeview geliefert werden. Wenn Sie auf einen Treeview-Knoten doppelklicken, werden das ausgewählte Ereignis und das nicht ausgewählte Ereignis ausgelöst. Sie können das Zeitintervall zwischen diesen beiden berechnen Simuliert den Effekt eines Doppelklick-Ereignisses. Das Intervall zwischen jedem Klick der linken Maustaste bei einem Doppelklick-Ereignis beträgt bei manueller Bedienung 300 Millisekunden.
Der spezifische Code lautet wie folgt:

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

Nach dem Login kopieren

Erklärung zur Grobfilterung:

Die wichtigsten globalen Variablen: lastSelectedNodeId, lastSelectedNodeId

Die Hauptmethode: clickNode()

Die obige Methode wird hauptsächlich verwendet, um zu bestimmen, ob das Ziel des ausgewählten Ereignisses und des ungeprüften Ereignisvorgangs dasselbe ist und ob das Zeitintervall klein genug ist. Kunden, die diese beiden Bedingungen erfüllen, möchten lediglich ein Doppelklick-Ereignis auslösen. Sie können die Geschäftslogik in der Funktion customBusiness anpassen.

Das Obige ist der detaillierte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.