bootstrap-treeview自訂雙擊事件實作方法_javascript技巧-js教程-PHP中文網

bootstrap-treeview自訂雙擊事件實作方法_javascript技巧

WBOY

發布： 2016-05-16 15:20:46

原創

1576 人瀏覽過

bootstrap-treeview是一款效果非常酷的基於bootstrap的jQuery多層列表樹插件。這個jQuery外掛程式基於Twitter Bootstrap，以簡單和優雅的方式來顯示一些繼承樹結構，如視圖樹、列表樹等等。但不知為什麼這個插件沒有自備雙擊事件。
經過多次測試，使用方法$('#tree').dblclick( function () {})和方法$('#tree').on('dblclick',function(){})都不行！百思不得其解。最後救助大神，問題解決了，但是好像不太優雅但最後還是可以交差了。
這個解決方案中使用到了bootstrap-treeview自帶的兩個事件"nodeSelected"和"nodeUnselected".如果在treeview的節點上雙擊一定會觸發選中事件和取消選中事件，計算這兩個時間的時間間隔就可以模擬出雙擊事件的效果了。雙擊事件每次點擊滑鼠左鍵的間隔，人為操作300毫秒足夠。
具體程式碼如下：

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

登入後複製

粗濾講解：

最主要的全域變數：lastSelectedNodeId，lastSelectedNodeId

最主要的方法：clickNode()

上面這個方法主要用來判斷選取事件和取消選取事件操作的目標是否是一個且時間間隔是否夠小。符合這兩個條件客戶就是想觸發雙擊事件。可以再函數customBusiness中自訂業務邏輯。

以上就是本文的詳細內容，希望對大家的學習有所幫助。