EasyUI Datagrid 鼠标悬停显示单元格内容
2017-02-13 23:53
1151 查看
EasyUI Datagrid 鼠标悬停显示单元格内容
第一种方式: 1.js 定义函数 <script type="text/javascript"> //格式化单元格提示信息 function formatCellTooltip(value){ return "<span title='" + value + "'>" + value + "</span>"; } </script> 2、调用函数
<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.例如,
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
扩展 jQuery EasyUI tips
js 文件 Jquery.easyui.tooltip.js:(function ($) {使用:在jquery 的datagrid的onLoadSuccess方法中html:
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);
<table id="dg"></table>js :
$(function () {2.当然还有各种jQuery tips插件
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
相关文章推荐
- EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码
- EasyUI Datagrid 鼠标悬停显示单元格内容
- EasyUI Datagrid 鼠标悬停显示单元格内容
- EasyUI Datagrid 鼠标悬停显示单元格内容
- easyui datagrid columns 鼠标悬停显示内容
- [easyui]datagrid鼠标移动显示单元格内容
- easyUI 鼠标悬停显示内容
- GridView中的每个单元格文本长度的控制,鼠标悬停时,显示单元格所有的内容
- EXTJS 4.2 实现 gridpanel 鼠标悬停单元格以提示信息的方式显示单元格内容。
- 扩展:easyui datagrid鼠标经过提示单元格内容
- Easyui 表格datagrid 的单元格内容显示方式扩展
- easyUI 鼠标悬停显示内容
- easyui扩展:datagrid鼠标经过提示单元格内容(6)
- easyUi datagrid鼠标经过提示单元格内容
- 这样控制DataGrid的单元格内内容自动隐藏,鼠标移上时显示全部
- EasyUI datagrid 列包含超链接以及鼠标经过提示单元格内容
- JQuery-EasyUI Datagrid数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
- (亲测兼容360、IE、谷歌、火狐等浏览器)鼠标悬停显示页面被截取字段的全部内容
- ligerui实现鼠标滑过行,显示单元格内容
- 扩展:datagrid鼠标经过提示单元格内容