bootstrap-treeview 自訂實現雙擊事件，bootstraptreeview

最後更新：2016-01-09 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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)                });            }            $(document).ready(function() {               customDblClickFun();            });        </script>    </body></html>

效果如下：

粗濾講解：

最主要的全域變數：

lastSelectedNodeId，lastSelectedNodeId

最主要的方法：

clickNode()

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

最後描述下：本人這種解決方案一定不是最好的，可以相互交流。特意感謝下我們公司的牛人。

附加相關資源地址：

jQuery : http://jquery.com/

Bootstrap : http://v3.bootcss.com/

Bootstrap-treeview ： http://www.htmleaf.com/jQuery/Menu-Navigation/201502141379.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More