bootstrap雙擊事件如何寫

發(fā)布時間：2020-09-21 11:16:44 來源：億速云閱讀：139 作者：小新欄目：web開發(fā)

小編給大家分享一下bootstrap雙擊事件如何寫，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

　　bootstrap-treeview是一款效果非?？岬幕赽ootstrap的jQuery多級列表樹插件。該jQuery插件基于Twitter Bootstrap，以簡單和優(yōu)雅的方式來顯示一些繼承樹結(jié)構(gòu)，如視圖樹、列表樹等等。但是不知為什么這個插件沒有自帶雙擊事件。

　　這個雙擊事件的解決方案中使用到了bootstrap-treeview自帶的兩個事件"nodeSelected"和"nodeUnselected".如果在treeview的節(jié)點(diǎn)上雙擊一定會觸發(fā)選中事件和取消選中事件，計算這兩個時間的時間間隔就可以模擬出雙擊事件的效果了。雙擊事件每次點(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ā)時間
            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)選中時觸發(fā)                $('#tree').on('nodeSelected', function(event, data) {
                    clickNode(event, data)
                });                //節(jié)點(diǎn)取消選中時觸發(fā)                $('#tree').on('nodeUnselected', function(event, data) {
                    clickNode(event, data)
                });
            }            $(document).ready(function() {               customDblClickFun();            });        </script>
    </body></html>

效果圖：

bootstrap雙擊事件如何寫

重點(diǎn)：

　　最主要的全局變量：

　　　　lastSelectedNodeId，lastSelectedNodeId

　　最主要的方法：

　　　　clickNode()

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

看完了這篇文章，相信你對bootstrap雙擊事件如何寫有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

bootstrap雙擊事件如何寫

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽