jqgrid-tooltip für den header-Zellen nur

Wie kann ich das hinzufügen von QuickInfos zu meinen jqgrid header-Zellen? im Falle der mehrere Netze auf der gleichen Seite.

Dies ist mein code:

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>

Vielen Dank Im Voraus.

InformationsquelleAutor user590586 | 2011-01-26

jqgrid

23

Nur headertitles:true option in Ihrem jqGrid definition.

AKTUALISIERT: Wenn Sie möchten, legen Sie benutzerdefinierte QuickInfo auf die Kopfzeile einer Spalte können Sie die folgenden:
```
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");
```
Sollte man in der überlegung, dass sich die Spalte Anzahl iColumn ist die 0-basierte absolute index der Spalte. Jeder von den Optionen, die rownumbers:true, multiselect:true oder subGrid:true enthalten eine zusätzliche Spalte am Anfang, so dass die entsprechenden iColumn index erhöht werden sollte.

AKTUALISIERT 2: Für weitere Informationen über die Struktur der Tauchgänge, interne grid.hDiv Elemente und die Klassen von jqGrid sehen diese Antwort.

vielen Dank für Ihre Antwort, wenn ich "headertitles:true," ich kann sehen, dass die header-tooltip, aber ich sehen, was Insider der colNames:[] data, meine Frage ist, wie kann ich sehen tooltip mit anderen Daten, dann, was ist in th colNames?
Ich aktualisiert meine Antwort um zu zeigen, wie Sie festlegen können, tooltip auf der Spalte Kopf.
Super..danke für deine Hilfe 🙂
Ich aktualisierte den code des setTooltipsOnColumnHeader: sollte man grid[0].grid.hDiv als Kontext. Sie code, den Sie geschrieben hat viele syntax-Fehler wie name:'col44:'col44' statt name:'col44',xmlmap:'col44', name:'col4xmlmap:'col4' statt name:'col4',xmlmap:'col4', Kommas am Ende colModel definition (,]) und so weiter. Look at ok-soft-gmbh.com/jqGrid/ToolTipInTab.htm. Es zeigt zumindest die richtige tooltips für die Tabelle headres.
Ich bin froh zu Lesen, dass. Sie sind herzlich willkommen!

InformationsquelleAutor Oleg

In meinem Fall habe ich nicht den index der Spalte, auf die ich möchte den tooltip.
Ich modifizierte die obige Antwort von @Oleg, wie unten beschrieben.

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

InformationsquelleAutor Charasala

Hinzufügen tooltip rufen Sie diese methode auf 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]);
    }
}

InformationsquelleAutor Tushar Tibude

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.