Jqgrid表头提示功能

原创于 2020-06-16 16:52:01 发布 · 753 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jqgrid #javascript #jquery #前端 #bootstrap

本文介绍了如何利用BootStrap3的组件为jqGrid实现表头提示功能，通过添加特定的HTML代码，如span标签并设置class为'glyphicon glyphicon-info-sign'，可以达到预期效果。

给jqgrid增加表头提示功能，效果如下：
在这里插入图片描述
功能实现增加以下代码：

<a tabindex="0" rel="popover" data-content="testtesttest"><span class="glyphicon glyphicon-info-sign"></span></a>

span标签的class：glyphicon glyphicon-info-sign。请参考BootStrap3的组件
在这里插入图片描述

            $("[rel=popover]").popover({
                    trigger: "manual",
                    html: true,
                    animation: false,
                    container: "body",
                    placement: "top"
                })
                .on("mouseenter", function () {
                    var _this = this;
                    $(this).popover("show");
                    $(".popover").on("mouseleave", function () {
                        $(_this).popover('hide')
                    })
                }).on("mouseleave", function () {
                    var _this = this;
                    setTimeout(function () {
                        if (!$(".popover:hover").length) {
                            $(_this).popover("hide")
                        }
                    }, 300)
                })