jqgridヘッダーセルのツールチップのみ

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>

は、事前にのをありがとうございます。

出典

2011-01-26 user590586

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インデックスを増やす必要があります。

UPDATED 2：ダイブの構造の詳細については、内部grid.hDiv要素とjqGridによって使用されるクラスthis answerを参照してください。

出典

2011-01-26 15:52:21 Oleg

@Oleg：、お返事の感謝、私は「headertitles：true」を追加したとき、私は、ヘッダーのツールチップを見ることができますが、いただきました！inisdeなるほどcolNames：[]データの、私の質問はどのように私はcolNamesの内側にある他のデータとツールチップを見ることができますか？ – user590586

@ user590586：私は自分の答えを更新して、列頭にカスタムツールチップを設定する方法を示しました。 – Oleg

@Oleg：greate ..あなたの助けに感謝します:) – user590586

私の場合、私はツールチップを設定したい列のインデックスを持っていません。私は以下のように上記の答えを@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); 
};

出典

2017-05-09 14:03:19 Charasala

だけloadcompleteにこのMethodeのを呼び出すツールチップを追加するには：

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

出典

2017-06-09 05:16:38

jqgridヘッダーセルのツールチップのみ

答えて

関連する問題