问题描述
如何向我的jqgrid标头单元格添加工具提示?如果同一页面中有多个网格.
How can i add tooltip to my jqgrid header cells? in case of multiple grids in the same page.
这是我的代码:
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"> tab1 </a></li>
<li><a href="#tabs-2"> tab2 </a></li>
<li><a href="#tabs-3"> tab3 </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>
感谢提前.
推荐答案
只需包含 headertitles:true 选项.
更新:如果要在列标题上设置自定义工具提示,则可以执行以下操作:
UPDATED: If you want set custom tooltip on a column header you can do following:
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
索引.
You should take in the consideration, that the column number iColumn
is the 0-based absolute index of the column. Every from the options rownumbers:true
, multiselect:true
or subGrid:true
include an additional column at the beginning, so the corresponding iColumn
index should be increased.
更新2 :有关潜水结构,内部grid.hDiv
元素以及jqGrid使用的类的更多信息,请参见.
UPDATED 2: For more information about the structure of dives, internal grid.hDiv
elements and the classes used by jqGrid see this answer.
这篇关于仅用于标头单元格的jqgrid工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!