bootstrap双击事件怎么写-Bootstrap教程-PHP中文网

bootstrap双击事件怎么写

angryTom

发布： 2019-07-19 11:03:30

原创

2730人浏览过

bootstrap双击事件怎么写

　　bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。但是不知为什么这个插件没有自带双击事件。

　　这个双击事件的解决方案中使用到了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>

登录后复制

效果图：