jqgrid工具提示仅适用于标题单元格

如何将工具提示添加到jqgrid标题单元格？如果同一页面中有多个网格

这是我的代码：

var initialized = [false,false,false];
    $('#tabs').tabs
    (
        {
            show: function(event, ui)
                {
                    if(ui.index == 0 && !initialized[0])
                    {
                        init_confirm_payment();
                        initialized[0] = true;
                    }
                    else if(ui.index == 1 && !initialized[1])
                    {
                        init_signatory1_payment();
                        initialized[1] = true;
                    }
                    else if(ui.index == 2 && !initialized[2])
                    {
                        init_signatory2_payment();
                        initialized[2] = true;
                    }
                }
        }
    );



        function init_table1()
        {
            jQuery("#cpayment").jqGrid({
                url:'loadgrid.jsp?type=1',
                datatype: "xml",
                loadonce:true ,
                direction:"rtl",
                height: '100%',
                width: '100%',
                headertitles: true ,
                colNames:['col11','col22','col33','col44'],
                colModel:[
                    {name:'col11',xmlmap:'col11', width:80, align:"right",sorttype:"int"},
                    {name:'col22',xmlmap:'col22', width:70, align:"right",sorttype:"int"},
                    {name:'col33',xmlmap:'col33', width:120, align:"right",sorttype:"string"},
                    {name:'col44:'col44', width:60, align:"right",sorttype:"float"},                        
                ],                  
                multiselect: false,
                autowidth: true,
                forceFit: false,
                shrinkToFit: false,
                loadonce:true              
            });


        }

        function init_table2()
        {
            jQuery("#payment1").jqGrid({
                url:'loadgrid.jsp?type=2',
                datatype: "xml",
                direction:"rtl",
                height: '100%',
                width: '100%',
                headertitles: true ,
                colNames:['col111','col222','col333','col444'],
                colModel:[
                    {name:'col111',xmlmap:'col111', width:80, align:"right",sorttype:"int"},
                    {name:'col222',xmlmap:'col222', width:70, align:"right",sorttype:"int"},
                    {name:'col333',xmlmap:'col333', width:120, align:"right",sorttype:"string"},
                    {name:'col444',xmlmap:'col444', width:60, align:"right",sorttype:"float"},                        
                ],                  
                multiselect: false,
                autowidth: true,
                forceFit: false,
                shrinkToFit: false,
                loadonce:true              
            });
        }

        function init_table3()
        {
            jQuery("#payment2").jqGrid({
                url:'loadgrid.jsp?type=3',
                datatype: "xml",
                direction:"rtl",
                height: '100%',
                width: '100%',
                headertitles: true ,
                colNames:['col1','col2','col3','col4'],
                colModel:[
                    {name:'col1',xmlmap:'col1', width:80, align:"right",sorttype:"int"},
                    {name:'col2',xmlmap:'col2', width:70, align:"right",sorttype:"int"},
                    {name:'col3',xmlmap:'col3', width:120, align:"right",sorttype:"string"},
                    {name:'col4xmlmap:'col4', width:60, align:"right",sorttype:"float"},                        
                ],                  
                multiselect: false,
                autowidth: true,
                forceFit: false,
                shrinkToFit: false,
                loadonce:true                    
            });
        }

        function test()
        {
            var thd = jQuery("thead:first", $("#cpayment").hdiv)[0];
            jQuery("tr th:eq(" + 3 + ")", thd).attr("title", "bla bla");

            var thd1 = jQuery("thead:first", $("#payment1").hdiv)[0];
            jQuery("tr th:eq(" + 3 + ")", thd1).attr("title", "bla bla1");
        }
    </script>


</head>
<body>
<form>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">&nbsp;tab1&nbsp;</a></li>
            <li><a href="#tabs-2">&nbsp;tab2&nbsp;</a></li>
            <li><a href="#tabs-3">&nbsp;tab3&nbsp;</a></li>
        </ul>

        <div id="tabs-1">
            <table id="cpayment"></table>
        </div>

        <div id="tabs-2">
            <table id="payment1"></table>
        </div>

        <div id="tabs-3">
            <table id="payment2"></table>
        </div>
    </div>
    <input type="button" onClick="test()">
</form>        
</body>

var initialized=[false，false，false]；
$（'#制表符'）。制表符
(
{
显示：功能（事件、用户界面）
{
如果（ui.index==0&&！已初始化[0]）
{
初始确认付款（）；
已初始化[0]=真；
}
如果（ui.index==1&&！已初始化[1]）
{
初始签名付款（）；
已初始化[1]=真；
}
else if（ui.index==2&&！已初始化[2]）
{
初始签名付款（）；
初始化[2]=真；
}
}
}
);
函数init_table1（）
{
jQuery（“#cpayment”）.jqGrid({
url:'loadgrid.jsp？type=1'，
数据类型：“xml”，
有一次：是的，
方向：“rtl”，
高度：“100%”，
宽度：“100%”，
头像：是的，
colname:['col11'、'col22'、'col33'、'col44']，
colModel：[
{name:'col11'，xmlmap:'col11'，宽度：80，对齐：“right”，排序类型：“int”}，
{name:'col22'，xmlmap:'col22'，宽度：70，对齐：“right”，排序类型：“int”}，
{name:'col33'，xmlmap:'col33'，宽度：120，对齐：“right”，排序类型：“string”}，
{name:'col44:'col44'，width:60，align:“right”，sorttype:“float”}，
],                  
多选：错，
自动宽度：正确，
forceFit:false，
shrinkToFit：错，
loadonce：对
});
}
函数init_table2（）
{
jQuery（“#payment1”）.jqGrid({
url:'loadgrid.jsp？type=2'，
数据类型：“xml”，
方向：“rtl”，
高度：“100%”，
宽度：“100%”，
头像：是的，
colNames:['col111'、'col222'、'col333'、'col444']，
colModel：[
{name:'col111'，xmlmap:'col111'，宽度：80，对齐：“right”，排序类型：“int”}，
{name:'col222'，xmlmap:'col222'，宽度：70，对齐：“right”，排序类型：“int”}，
{name:'col333'，xmlmap:'col333'，宽度：120，对齐：“right”，排序类型：“string”}，
{name:'col444'，xmlmap:'col444'，宽度：60，对齐：“right”，排序类型：“float”}，
],                  
多选：错，
自动宽度：正确，
forceFit:false，
shrinkToFit：错，
loadonce：对
});
}
函数init_table3（）
{
jQuery（“#payment2”）.jqGrid({
url:'loadgrid.jsp？type=3'，
数据类型：“xml”，
方向：“rtl”，
高度：“100%”，
宽度：“100%”，
头像：是的，
colname:['col1'、'col2'、'col3'、'col4']，
colModel：[
{name:'col1'，xmlmap:'col1'，宽度：80，对齐：“right”，排序类型：“int”}，
{name:'col2'，xmlmap:'col2'，宽度：70，对齐：“right”，排序类型：“int”}，
{name:'col3'，xmlmap:'col3'，宽度：120，对齐：“right”，排序类型：“string”}，
{name:'col4xmlmlmap:'col4'，宽度：60，对齐：“right”，排序类型：“float”}，
],                  
多选：错，
自动宽度：正确，
forceFit:false，
shrinkToFit：错，
loadonce：对
});
}
功能测试（）
{
var thd=jQuery（“thead:first”，$（“#cpayment”）.hdiv）[0]；
jQuery（“tr-th:eq（“+3+”），thd）.attr（“title”，“bla-bla”）；
var thd1=jQuery（“thead:first”，$（“#payment1”）.hdiv）[0]；
jQuery（“tr-th:eq（+3+”），thd1.attr（“title”，“bla-bla1”）；
}

提前感谢。

只需在jqGrid定义中包含选项即可

更新：如果要在列标题上设置自定义工具提示，可以执行以下操作：

var setTooltipsOnColumnHeader = function (grid, iColumn, text) {
    var thd = jQuery("thead:first", grid[0].grid.hDiv)[0];
    jQuery("tr.ui-jqgrid-labels th:eq(" + iColumn + ")", thd).attr("title", text);
};

setTooltipsOnColumnHeader($("#list"), 1, "bla bla");

您应该考虑到，列编号

iColumn

是该列基于0的绝对索引。选项

rowNumber:true

，

multiselect:true

或

subGrid:true

中的每一行在开头都包含一个附加列，因此相应的

iColumn

索引应该增加

---

更新2：有关潜水、内部

grid.hDiv

元素和jqGrid使用的类的更多信息，请参阅。

在我的情况下，我没有要设置工具提示的列的索引。 我已通过@Oleg修改了上述答案，如下所示

   //grid object, column id, tooltip text
var setTooltipsOnColumnHeader = function (grid, iColumn, text) {
    var thd = jQuery("thead:first", grid[0].grid.hDiv)[0];    
    jQuery("tr.ui-jqgrid-labels", thd).find("[id='"+iColumn+"']").attr("title",text);
};

---

要添加工具提示，只需在loadcomplete上调用此方法：

addToolTipForColumnheader('YourGridID');

function addToolTipForColumnheader(gridID){
    var columnNameList=$('#'+gridID)[0].p.colNames;
    for (var i = 0; i < columnNameList.length; i++){
        var columnName=$('#'+gridID)[0].p.colModel[i].name;
        $('#'+gridID+'_'+columnName).attr("title", $('#'+gridID)[0].p.colNames[i]);
    }
}

addToolTipForColumnheader（'YourGridID'）；
函数addToolTipForColumnheader（gridID）{
var columnNameList=$（'#'+gridID）[0].p.colNames；
对于（变量i=0；i

@Oleg:谢谢您的回复，当我添加“headertitles:true”时，我可以看到标题工具提示，但我可以看到colNames:[]数据的含义，我的问题是如何