EasyUI Datagrid 鼠标悬停显示单元格内容
第一种方式: 1.js 定义函数 <script type="text/javascript"> //格式化单元格提示信息 function formatCellTooltip(value){ return "<span title='" + value + "'>" + value + "</span>"; } </script>2、调用函数
<table class="easyui-datagrid" style="400px;height:250px"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'itemid',80,halign:'center',formatter:formatCellTooltip">Item ID</th>
</tr>
</thead>
</table>
源码:jquery-easyui-1.3.6.zip 例子是:jquery-easyui-1.3.6demodatagridformatter.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', 80,halign:'center', formatter: function (value) { return "<span title='" + value + "'>" + value + "</span>"; } }]] });
源码:jquery-easyui-1.3.6.zip 例子是:jquery-easyui-1.3.6demodatagridformatter2.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 == 0) { 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', 100 }, { field: 'productname', title: 'productname', 100 }, { field: 'price', title: 'Price', 100, 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-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.6demodatagrid ips.html
2.当然还有各种jQuery tips插件
java中getAttribute和getParameter的区别
修改tomcat默认的编码方式
jQuery遮罩插件jQuery.blockUI.js简介
Sql Server 2008 Management studio安装教程
评论字数限制和字数显示
如何将表单元素封装
DWR原理探秘
linux命令详解:pgrep命令
使用Nginx实现灰度发布
Copyright © 2011-2022 走看看