bootstrap-treeview自定義雙擊事件實現(xiàn)方法

更新時間：2016年01月09日 08:48:08 作者：程序員之路

這篇文章主要介紹了bootstrap-treeview自定義事件雙擊事件實現(xiàn)方法,需要的朋友可以參考下

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多級列表樹插件。該jQuery插件基于Twitter Bootstrap，以簡單和優(yōu)雅的方式來顯示一些繼承樹結構，如視圖樹、列表樹等等。但是不知為什么這個插件沒有自帶雙擊事件。
經過多次測試，使用方法$('#tree').dblclick( function () {})和方法$('#tree').on('dblclick',function(){})都不起作用！百思不得其解。最后救助大神，問題解決了，但是好像不太優(yōu)雅但最終還是可以交差了。

這個解決方案中使用到了bootstrap-treeview自帶的兩個事件"nodeSelected"和"nodeUnselected".如果在treeview的節(jié)點上雙擊一定會觸發(fā)選中事件和取消選中事件，計算這兩個時間的時間間隔就可以模擬出雙擊事件的效果了。雙擊事件每次點擊鼠標左鍵的間隔，人為操作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()
   });
   
   //最后一次觸發(fā)節(jié)點Id
   var lastSelectedNodeId = null;
   //最后一次觸發(fā)時間
   var lastSelectTime = null;
   
   //自定義業(yè)務方法
   function customBusiness(data){
    alert("雙擊獲得節(jié)點名字： "+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(){
    //節(jié)點選中時觸發(fā)
    $('#tree').on('nodeSelected', function(event, data) {
     clickNode(event, data)
    });
    //節(jié)點取消選中時觸發(fā)
    $('#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()

上面這個方法主要用來判斷選中事件和取消選中事件操作的目標是否是一個且時間間隔是否足夠小。符合這兩個條件客戶就是想觸發(fā)雙擊事件?？梢栽俸瘮礳ustomBusiness中自定義業(yè)務邏輯。

如果大家還想深入學習，可以點擊這里進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程 Bootstrap實戰(zhàn)教程

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

您可能感興趣的文章: