Jqgrid表头提示功能

最新推荐文章于 2022-01-28 17:25:21 发布

InJra_p

最新推荐文章于 2022-01-28 17:25:21 发布

阅读量705

点赞数

文章标签： jqgrid javascript jquery 前端 bootstrap

本文链接：https://blog.youkuaiyun.com/InJra_p/article/details/106790310

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给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)
                })