Of Stack

bootstrap treeview custom double click event implementation method

  • 2020-11-26 18:40:58
  • OfStack

bootstrap-treeview is a very cool jQuery multilevel list tree plug-in based on bootstrap. The jQuery plug-in, based on Twitter Bootstrap, displays 1 inheritance tree structures such as view trees, list trees, and so on in a simple and elegant way. But for some reason this plug-in doesn't come with a double-click event.
After many tests, use $(' # tree). dblclick (function () {}) and method of $(' # tree). on (' dblclick, function () {}) doesn't work! I'm scratching my head. Finally, the great God is rescued, and the problem is solved, but it doesn't seem very elegant, but it can be crossed in the end.

The solution USES the two events that come with ES19en-ES20en, "nodeSelected" and "nodeUnselected". If you double-click 1 on an treeview node, the selected event and the de-selected event will be triggered. The effect of the double-click event can be simulated by calculating the interval between the two times. Double - click events the interval between each click of the left mouse button, 300 milliseconds is enough for human manipulation.

The specific 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">
   // Gets the tree structure list data 
   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;
   }
   
   // Initializes the list of tree structures 
   $('#tree').treeview({
    data: getTree()
   });
   
   // The last 1 Secondary trigger node Id
   var lastSelectedNodeId = null;
   // The last 1 Secondary trigger time 
   var lastSelectTime = null;
   
   // Customize the business method 
   function customBusiness(data){
    alert(" Double-click to get the node name:  "+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();
   }
   
   // Customize the double-click event 
   function customDblClickFun(){
    // Triggered when a node is selected 
    $('#tree').on('nodeSelected', function(event, data) {
     clickNode(event, data)
    });
    // Triggered when a node is unchecked 
    $('#tree').on('nodeUnselected', function(event, data) {
     clickNode(event, data)
    });
   }
   $('#tree').dblclick( function () { alert("Hello World!"); });
   $(document).ready(function() {
    //customDblClickFun();
   });
  </script>
 </body>

</html>

Rough filtering explanation:

Most important global variables: lastSelectedNodeId, lastSelectedNodeId

The main method: clickNode()

The above method is mainly used to determine whether the target of the selected and unselected event operation is 1 and whether the time interval is small enough. The client who meets these two criteria wants to trigger a double-click event. You can customize the business logic in the customBusiness function.

If you want to learn more, you can click here to learn more, and there are two wonderful projects for you: Bootstrap learning tutorial Bootstrap Practical tutorial

Above is the detailed content of this article, hope to be helpful to your study.

Related articles: