bootstrap-treeview custom double-click event implementation method

bootstrap-treeview custom double-click event implementation method_javascript skills

WBOY

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

Original

1514 people have browsed it

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.
After many tests, neither the method $('#tree').dblclick( function () {}) nor the method $('#tree').on('dblclick', function(){}) works! Puzzled. Finally, I came to the rescue and the problem was solved, but it didn't seem very elegant, but in the end I was able to hand over the work.
This solution uses the two events "nodeSelected" and "nodeUnselected" that come with bootstrap-treeview. If you double-click on a treeview node, the selected event and unselected event will be triggered. You can calculate the time interval between these two times. Simulates the effect of a 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 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">
      //获取树形结构列表数据
      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>

Copy after login

Coarse filtering explanation:

The most important global variables: lastSelectedNodeId, lastSelectedNodeId

The main 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 the function customBusiness.

The above is the detailed content of this article, I hope it will be helpful to everyone’s study.