EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码

EasyUI Datagrid 鼠标悬停显示单元格内容

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
EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码

其他方式:

1.例如,扩展 jQuery EasyUI tips

EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码
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 &gt; 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) &lt; top || top &lt; <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) &lt;<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);

EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码

使用:

在jquery 的datagrid的onLoadSuccess方法中

html:

<table id="dg"></table>

js :

EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码
$(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

EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码

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>

posted @
2017-05-05 13:33 
星朝 
阅读(...) 
评论(...) 
编辑 
收藏
上一篇:IO模型介绍


下一篇:logstash日志采集工具的安装部署