bootstrap-treeview カスタムダブルクリックイベント実装メソッド

bootstrap-treeview カスタムダブルクリックイベント実装メソッド_JavaScript スキル

WBOY

リリース： 2016-05-16 15:20:46

オリジナル

1576 人が閲覧しました

bootstrap-treeview は、ブートストラップに基づいた非常に優れた jQuery マルチレベルリストツリープラグインです。この jQuery プラグインは Twitter Bootstrap に基づいており、ビューツリー、リストツリーなどのいくつかの継承ツリー構造をシンプルかつエレガントな方法で表示します。しかし、このプラグインに独自のダブルクリックイベントがない理由はわかりません。
多くのテストを行った結果、メソッド $('#tree').dblclick( function () {}) もメソッド $('#tree').on('dblclick', function(){}) も機能しませんでした。困惑した。結局私が助けに来て問題は解決しましたが、あまり優雅とは言えませんでしたが、それでも結局仕事はできました。
このソリューションでは、bootstrap-treeview に付属する 2 つのイベント「nodeSelected」と「nodeUnselected」を使用します。ツリービューノードをダブルクリックすると、選択されたイベントと選択されていないイベントがトリガーされます。これら 2 つのイベント間の時間間隔を計算できます。ダブルクリックイベントの効果をシミュレートします。ダブルクリックイベントでのマウスの左ボタンの各クリック間隔は、手動操作の場合は 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()

上記の方法は主に、選択したイベントと未チェックのイベントの動作の対象が同じであるか、時間間隔が十分に小さいかどうかを判断するために使用されます。これら 2 つの条件を満たす顧客は、ダブルクリックイベントをトリガーしたいだけです。ビジネスロジックは関数customBusinessでカスタマイズできます。

以上がこの記事の詳細な内容です。皆様の学習のお役に立てれば幸いです。