快捷導(dǎo)航

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

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

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

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

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

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

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程

以上就是本文的詳細(xì)內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: