2011-01-26 30 views
10

Jqgrid üstbilgi hücrelerine araç ipucu nasıl ekleyebilirim? Aynı sayfada birden fazla ızgara olması durumunda.Yalnızca üstbilgi hücreleri için jqgrid araç ipucu

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> 

Teşekkür'ın In Advance:

Bu benim kodudur.

cevap

23

jqGrid tanımınızda yalnızca headertitles:true seçeneğini belirtin.

GÜNCELLEME: Aşağıdaki yapabileceğiniz sütun başlığını ayarlanan özel ipucu istiyorum ise:

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"); 

Sütun sayısı iColumn 0 tabanlı mutlak indeks olduğunu, dikkate almalı sütun. rownumbers:true, multiselect:true veya seçeneklerinden her biri başlangıçta ek bir sütun içerir, dolayısıyla ilgili iColumn endeksinin artırılması gerekir.

GÜNCEL 2: dalış yapısı hakkında daha fazla bilgi için, iç grid.hDiv elemanları ve jqGrid tarafından kullanılan sınıfları this answer bakınız.

+0

@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); }; 
user590586

+0

@ user590586: Yanıtı, özel araç ipucunu sütun başlığına nasıl ayarlayabileceğinizi göstermek için güncelledim. – Oleg

+0

@Oleg: greate..thank yardımın için :) – user590586

0

Benim durumumda, araç ipucunu ayarlamak istediğim sütunun dizinine sahip değilim. Yukarıdaki yanıtı aşağıdaki gibi @Oleg ile değiştirdim. i başlık ipucunu görebilirsiniz ama neyin inisde bkz: "gerçek headertitles" i eklediğinizde Cevabınız için 's teşekkür:

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

sadece loadcomplete bu Methode çağrı ipucunu eklemek için colNames: [] data, benim soru diğer ipuçları ile tooltip nasıl görüyorum o zaman th colNames içinde ne olduğunu?