第一種方式:1.js 定義函數(shù) <script type="text/javascript"> //格式化單元格提示信息 function formatCellTooltip(value){ return "<span title='" + value + "'>" + value + "</span>"; } </script> 2、調(diào)用函數(shù)
<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:80,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.例如,擴(kuò)展 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 = (opt.content || $(target).attr("tooltip")); tips.appendTo("body"); $(target).css("color", opt.wrapColor); $(target).hover(function () { tips.html(opt.content); var offset = $(target).offset(); //var outerWidth = tips.outerWidth(); // if (outerWidth > 200) { // tips.width(200); // } var scrollTop = $(document).scrollTop(); var tipsHeight = tips.outerHeight(); var outerWidth = tips.outerWidth(); var targetHeight = $(target).outerHeight(); var top = offset.top - tipsHeight; var left = offset.left; if ((offset.top - scrollTop) < top || top < 100) { top = offset.top + targetHeight; } var bodyClienWidth = $("body")[0].clientWidth; if ((bodyClienWidth - left) < outerWidth) { left = bodyClienWidth - outerWidth; } tips.css({ top: top, left: left }).show(); }, function () { tips.hide().width("auto"); }); } $.fn.tips = function (options, params) { if (typeof options === 'string') { return $(this).tips.methods[options].call(this, params); } options = options || {}; return this.each(function () { var opt = $.data(this, "tips"); if (opt) { $.extend(opt.options, options); } else { $.data(this, "tips", { options: $.extend({}, $.fn.tips.defaults, options) }); init(this); } }); }; $.fn.tips.defaults = { cls: "", content: null, wrapColor: "blue" }; if ($.parser) { $.parser.plugins.push('tips') }})(jQuery);
使用:
在jquery 的datagrid的onLoadSuccess方法中
html:
<table id="dg"></table>
js :
$(function () { var _grid = $('#dg').datagrid({ url: 'products.json', columns: [[ { field: 'productid', title: 'productid', width: 100 }, { field: 'productname', title: 'productname', width: 100 }, { field: 'price', title: 'Price', width: 100, align: 'right' } ]], onLoadSuccess: function () { var tableTd = $('div.datagrid-body td[field="productname"]'); //productname是列名 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.當(dāng)然還有各種jQuery tips插件
聯(lián)系客服