chú giải công cụ jqgrid cho ô tiêu đề chỉ

Làm cách nào để thêm chú giải công cụ vào các ô tiêu đề jqgrid của tôi? trong trường hợp có nhiều lưới trong cùng một trang.chú giải công cụ jqgrid cho ô tiêu đề chỉ

Đây là mã của tôi:

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>

Thank của Trong Advance.

Nguồn

2011-01-26 user590586

Chỉ bao gồm tùy chọn headertitles:true trong định nghĩa jqGrid của bạn.

CẬP NHẬT: Nếu bạn muốn thiết lập tooltip tùy chỉnh trên một tiêu đề cột bạn có thể làm như sau:

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

Bạn nên dùng trong việc xem xét, rằng số lượng cột iColumn là chỉ số tuyệt đối 0 dựa trên cột. Mọi tùy chọn từ các tùy chọn rownumbers:true, multiselect:true hoặc subGrid:true bao gồm một cột bổ sung ngay từ đầu, vì vậy chỉ số iColumn tương ứng sẽ được tăng lên.

CẬP NHẬT 2: Để biết thêm thông tin về cấu trúc lặn, nội bộ grid.hDiv yếu tố và các lớp được sử dụng bởi jqGrid xem this answer.

Nguồn

2011-01-26 15:52:21 Oleg

@Oleg: cảm ơn cho trả lời của bạn, khi tôi thêm "headertitles: true" tôi có thể thấy các tooltip tiêu đề nhưng tôi xem whats inisde của colNames: [] dữ liệu, câu hỏi của tôi là làm thế nào tôi có thể nhìn thấy tooltip với các dữ liệu khác sau đó những gì là bên trong colNames thứ? – user590586

@ user590586: Tôi đã cập nhật câu trả lời của mình để cho biết cách bạn có thể đặt chú giải công cụ tùy chỉnh trên đầu cột. – Oleg

@Oleg: greate..thank vì sự giúp đỡ của bạn :) – user590586

Trong trường hợp của tôi, tôi không có chỉ mục của cột mà tôi muốn đặt chú giải công cụ. Tôi đã sửa đổi câu trả lời ở trên bằng @Oleg như dưới đây.

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

Nguồn

2017-05-09 14:03:19 Charasala

Để thêm tooltip chỉ cần gọi tole này trên 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]); 
    } 
}

Nguồn

2017-06-09 05:16:38

chú giải công cụ jqgrid cho ô tiêu đề chỉ

Trả lời

Các vấn đề liên quan