Подсказка jqgrid только для ячеек заголовка

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

Просто включите заголовочные заголовки:true в ваше определение 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 абсолютный индекс столбца. Каждый из вариантов rownumbers:true, multiselect:true или же subGrid:true включите дополнительный столбец в начале, поэтому соответствующий iColumn Индекс должен быть увеличен.

ОБНОВЛЕНО 2: Для получения дополнительной информации о структуре погружений, внутренние grid.hDiv элементы и классы, используемые jqGrid, видят этот ответ.

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]);
    }
}