Question

如何将工具提示添加到我的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>

感谢提前。

Answer 1

只需在jqGrid定义中包含headertitles:true选项。

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

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的绝对索引。选项rownumbers:true，multiselect:true或subGrid:true中的每一个都在开头包含一个附加列，因此应增加相应的iColumn索引。

更新2 ：有关潜水结构的详细信息，内部grid.hDiv元素和jqGrid使用的类请参阅this answer。

Answer 2

在我的情况下，我没有要为其设置工具提示的列的索引。我已经通过@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);
};

Answer 3

要添加工具提示，只需在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]);
    }
}

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

3 个答案: