ブートストラップダブルクリックイベントの書き方-ブートストラップのチュートリアル-php.cn

ブートストラップダブルクリックイベントの書き方

angryTom

リリース： 2019-07-19 11:04:28

オリジナル

2576 人が閲覧しました

ブートストラップダブルクリックイベントの書き方

##bootstrap-treeview は、ブートストラップに基づいた非常にクールな jQuery マルチレベルリストツリープラグインです。この jQuery プラグインは Twitter Bootstrap に基づいており、ビューツリー、リストツリーなどのいくつかの継承ツリー構造をシンプルかつエレガントな方法で表示します。しかし、このプラグインに独自のダブルクリックイベントがない理由はわかりません。

このダブルクリックイベントソリューションでは、bootstrap-treeview nodeUnselected に付属する 2 つのイベント「nodeSelected」と「」を使用します。 "。ツリービューノードをダブルクリックすると、選択したイベントと選択されていないイベントがトリガーされます。これら 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;
            }            
            //初始化树形结构列表            $(&#39;#tree&#39;).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(){                //节点选中时触发                $(&#39;#tree&#39;).on(&#39;nodeSelected&#39;, function(event, data) {
                    clickNode(event, data)
                });                //节点取消选中时触发                $(&#39;#tree&#39;).on(&#39;nodeUnselected&#39;, function(event, data) {
                    clickNode(event, data)
                });
            }            $(document).ready(function() {               customDblClickFun();            });        </script>
    </body></html>

ログイン後にコピー

レンダリング:

ブートストラップダブルクリックイベントの書き方

キーポイント:## 最も重要なグローバル変数:

##lastSelectedNodeId、

lastSelectedNodeId

最も重要なメソッド:

clickNode()

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

元の記事のアドレス: https://www.cnblogs.com/chengxuyuanzhilu/p/5114155.html

以上がブートストラップダブルクリックイベントの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。