EasyUI Datagrid 鼠标悬停显示单元格内容
第一种方式:
.js 定义函数
<script type="text/javascript">
//格式化单元格提示信息
function formatCellTooltip(value){
return "<span title='" + value + "'>" + value + "</span>";
}
</script> 、调用函数
<table class="easyui-datagrid" style="width:400px;height:250px"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'itemid',width:80,halign:'center',formatter:formatCellTooltip">Item ID</th>
</tr>
</thead>
</table>
源码:jquery-easyui-1.3.6.zip 例子是:jquery-easyui-1.3.6\demo\datagrid\formatter.html
第二种方式:
1.html
<table id="dg">
</table>
2.js
$('#dg').datagrid({
fitColumns: true,
nowrap: true,
striped: true,
rownumbers: true,
pagination: true,
singleSelect: true,
columns: [[
{ field: "itemid", title: 'Item ID', width:,halign:'center', formatter: function (value) {
return "<span title='" + value + "'>" + value + "</span>";
}
}]]
});
源码:jquery-easyui-1.3.6.zip 例子是:jquery-easyui-1.3.6\demo\datagrid\formatter2.html
其他方式:
1.例如,扩展 jQuery EasyUI tips
js 文件 Jquery.easyui.tooltip.js:
(function ($) {
function init(target) {
var opt = $.data(target, "tips").options;
var tips = $(".easyui-tips-hover");
if (tips.length == ) {
tips = $("<div/>").css({
"position": "absolute",
"border-radius": "5px",
"-webkit-border-radius": "5px",
"-moz-border-radius": "5px",
"padding": "5px",
"background": "#fff",
"display": "none",
"border": "1px solid gray"
}).hide().addClass("easyui-tips-hover").addClass(opt.cls);
}opt.content </span>= (opt.content || $(target).attr(<span style="color: #800000;">"</span><span style="color: #800000;">tooltip</span><span style="color: #800000;">"</span><span style="color: #000000;">));
tips.appendTo(</span><span style="color: #800000;">"</span><span style="color: #800000;">body</span><span style="color: #800000;">"</span><span style="color: #000000;">); $(target).css(</span><span style="color: #800000;">"</span><span style="color: #800000;">color</span><span style="color: #800000;">"</span><span style="color: #000000;">, opt.wrapColor); $(target).hover(function () {
tips.html(opt.content);
</span><span style="color: #0000ff;">var</span> offset =<span style="color: #000000;"> $(target).offset();
</span><span style="color: #008000;">//</span><span style="color: #008000;">var outerWidth = tips.outerWidth();
</span><span style="color: #008000;">//</span><span style="color: #008000;"> if (outerWidth > 200) {
</span><span style="color: #008000;">//</span><span style="color: #008000;"> tips.width(200);
</span><span style="color: #008000;">//</span><span style="color: #008000;"> }</span>
<span style="color: #0000ff;">var</span> scrollTop =<span style="color: #000000;"> $(document).scrollTop();
</span><span style="color: #0000ff;">var</span> tipsHeight =<span style="color: #000000;"> tips.outerHeight();
</span><span style="color: #0000ff;">var</span> outerWidth =<span style="color: #000000;"> tips.outerWidth(); </span><span style="color: #0000ff;">var</span> targetHeight =<span style="color: #000000;"> $(target).outerHeight();
</span><span style="color: #0000ff;">var</span> top = offset.top -<span style="color: #000000;"> tipsHeight;
</span><span style="color: #0000ff;">var</span> left =<span style="color: #000000;"> offset.left; </span><span style="color: #0000ff;">if</span> ((offset.top - scrollTop) < top || top < <span style="color: #800080;">100</span><span style="color: #000000;">) {
top </span>= offset.top +<span style="color: #000000;"> targetHeight;
}
</span><span style="color: #0000ff;">var</span> bodyClienWidth = $(<span style="color: #800000;">"</span><span style="color: #800000;">body</span><span style="color: #800000;">"</span>)[<span style="color: #800080;">0</span><span style="color: #000000;">].clientWidth;
</span><span style="color: #0000ff;">if</span> ((bodyClienWidth - left) <<span style="color: #000000;"> outerWidth) {
left </span>= bodyClienWidth -<span style="color: #000000;"> outerWidth;
}
tips.css({ top: top, left: left }).show();
}, function () {
tips.hide().width(</span><span style="color: #800000;">"</span><span style="color: #800000;">auto</span><span style="color: #800000;">"</span><span style="color: #000000;">);
});
} $.fn.tips </span>= function (options, <span style="color: #0000ff;">params</span><span style="color: #000000;">) {
</span><span style="color: #0000ff;">if</span> (<span style="color: #0000ff;">typeof</span> options === <span style="color: #800000;">'</span><span style="color: #800000;">string</span><span style="color: #800000;">'</span><span style="color: #000000;">) {
</span><span style="color: #0000ff;">return</span> $(<span style="color: #0000ff;">this</span>).tips.methods[options].call(<span style="color: #0000ff;">this</span>, <span style="color: #0000ff;">params</span><span style="color: #000000;">);
} options </span>= options ||<span style="color: #000000;"> {};
</span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">this</span><span style="color: #000000;">.each(function () {
</span><span style="color: #0000ff;">var</span> opt = $.data(<span style="color: #0000ff;">this</span>, <span style="color: #800000;">"</span><span style="color: #800000;">tips</span><span style="color: #800000;">"</span><span style="color: #000000;">);
</span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (opt) {
$.extend(opt.options, options);
} </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
$.data(</span><span style="color: #0000ff;">this</span>, <span style="color: #800000;">"</span><span style="color: #800000;">tips</span><span style="color: #800000;">"</span><span style="color: #000000;">, {
options: $.extend({}, $.fn.tips.defaults, options)
});
init(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">);
}
});
}; $.fn.tips.defaults </span>=<span style="color: #000000;"> {
cls: </span><span style="color: #800000;">""</span><span style="color: #000000;">,
content: </span><span style="color: #0000ff;">null</span><span style="color: #000000;">,
wrapColor: </span><span style="color: #800000;">"</span><span style="color: #800000;">blue</span><span style="color: #800000;">"</span><span style="color: #000000;">
}; </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> ($.parser) {
$.parser.plugins.push(</span><span style="color: #800000;">'</span><span style="color: #800000;">tips</span><span style="color: #800000;">'</span><span style="color: #000000;">)
}})(jQuery);
使用:
在jquery 的datagrid的onLoadSuccess方法中
html:
<table id="dg"></table>
js :
$(function () {
var _grid = $('#dg').datagrid({
url: 'products.json',
columns: [[
{ field: 'productid', title: 'productid', width: },
{ field: 'productname', title: 'productname', width: },
{ field: 'price', title: 'Price', width: , align: 'right' }
]],
onLoadSuccess: function () {</span><span style="color: #0000ff;">var</span> tableTd = $(<span style="color: #800000;">'</span><span style="color: #800000;">div.datagrid-body td[field="productname"]</span><span style="color: #800000;">'</span>); <span style="color: #008000;">//</span><span style="color: #008000;"><span style="color: #800000;">productname</span>是列名</span>
tableTd.each(function () {
var $this = $(this);
var index = $this.parent('tr').attr('datagrid-row-index');
var rows = _grid.datagrid('getRows');
var currentRow = rows[index];
var content = '<div style=" max-width:700px;word-break: break-all; word-wrap: break-word;">' + currentRow.productname + '</div>'; //productname是列名
$this.tips({ content: content, wrapColor: 'black' });
});
}
});
});
源码:jquery-easyui-1.3.6.zip 例子是:jquery-easyui-1.3.6\demo\datagrid\tips.html
2.当然还有各种jQuery tips插件
</div>
<div class="postDesc">posted @ <span id="post-date">2015-11-19 09:45</span> <a href="http://www.cnblogs.com/xuguanghui/">直钩钓鱼</a> 阅读(<span id="post_view_count">5703</span>) 评论(<span id="post_comment_count">0</span>) <a href="https://i.cnblogs.com/EditPosts.aspx?postid=4976636" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(4976636);return false;">收藏</a></div>
</div>
<script type="text/javascript">var allowComments=true,cb_blogId=167430,cb_entryId=4976636,cb_blogApp=currentBlogApp,cb_blogUserGuid='2c86fefc-4041-e311-8d02-90b11c0b17d6',cb_entryCreatedDate='2015/11/19 9:45:00';loadViewCount(cb_entryId);</script>