此文章是基于 EasyUI+Knockout实现经典表单的查看、编辑
一. jquery.cellTip.js
/**
* 扩展两个方法
*/
using('datagrid', function(){
$.extend($.fn.datagrid.methods, {
/**
* 开打提示功能
* @param {} jq
* @param {} params 提示消息框的样式
* @return {}
*/
doCellTip: function(jq, params){
function showTip(data, td, e){
if ($(td).text() == "")
return;
data.tooltip.text($(td).text()).css({
top: (e.pageY + 10) + 'px',
left: (e.pageX + 20) + 'px',
'z-index': $.fn.window.defaults.zIndex,
display: 'block'
});
};
return jq.each(function(){
var grid = $(this);
var options = $(this).data('datagrid');
if (!options.tooltip) {
var panel = grid.datagrid('getPanel').panel('panel');
var defaultCls = {
'border': '1px solid #333',
'padding': '2px',
'color': '#333',
'background': '#f7f5d1',
'position': 'absolute',
'max-width': '200px',
'border-radius' : '4px',
'-moz-border-radius' : '4px',
'-webkit-border-radius' : '4px',
'display': 'none'
}
var tooltip = $("<div id='celltip'></div>").appendTo('body');
tooltip.css($.extend({}, defaultCls, params.cls));
options.tooltip = tooltip;
panel.find('.datagrid-body').each(function(){
var delegateEle = $(this).find('> div.datagrid-body-inner').length ? $(this).find('> div.datagrid-body-inner')[0] : this;
$(delegateEle).find('td').each(function(i){
var ele = $(this).parent();
// 适用于treegrid
if($(this).find('td').length > 0)
ele = $(this);
$(ele).undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove').delegate('td', {
'mouseover': function(e){
if (params.delay) {
if (options.tipDelayTime)
clearTimeout(options.tipDelayTime);
var that = this;
options.tipDelayTime = setTimeout(function(){
showTip(options, that, e);
}, params.delay);
}
else {
showTip(options, this, e);
} },
'mouseout': function(e){
if (options.tipDelayTime)
clearTimeout(options.tipDelayTime);
options.tooltip.css({
'display': 'none'
});
},
'mousemove': function(e){
var that = this;
if (options.tipDelayTime)
clearTimeout(options.tipDelayTime);
//showTip(options, this, e);
options.tipDelayTime = setTimeout(function(){
showTip(options, that, e);
}, params.delay);
}
});
}); }); } });
},
/**
* 关闭消息提示功能
*
* @param {}
* jq
* @return {}
*/
cancelCellTip: function(jq){
return jq.each(function(){
var data = $(this).data('datagrid');
if (data.tooltip) {
data.tooltip.remove();
data.tooltip = null;
var panel = $(this).datagrid('getPanel').panel('panel');
panel.find('.datagrid-body').undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove')
}
if (data.tipDelayTime) {
clearTimeout(data.tipDelayTime);
data.tipDelayTime = null;
}
});
}
});
});
二. 测试页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>datagrid鼠标经过提示单元格内容</title>
<%@ include file="/common/head.jsp"%>
</head>
<body>
<div style="margin:10px 0;">
<a href="#" onclick="doCellTip()">显示提示消息</a>
<a href="#" onclick="cancelCellTip()">禁止消息显示</a>
<div id="info"></div>
</div> <table id="test" class="easyui-datagrid" style="width:100%;height:520px;" data-options="fitColumns:true, singleSelect:true, rownumbers:true">
<thead>
<tr>
<th data-options="field:'direction', width:150, align:'center'">direction</th>
</tr>
</thead>
</table> <%@ include file="/common/foot.jsp"%>
<script type="text/javascript" src="content/js/jquery-plugin/cellTip/jquery.cellTip.js"></script>
<script type="text/javascript">
function doCellTip(){
$('#test').datagrid('doCellTip', {'cls':{'max-width':'200px'}});
}
function cancelCellTip(){
$('#test').datagrid('cancelCellTip');
} $(function(){
var data = ${data};
ko.bindingViewModel(new viewModel(data));
});
using(['messager', 'datagrid'], function(){
$('#test').datagrid({
onLoadSuccess: function(data){
$(this).datagrid('doCellTip', {'cls':{'max-width':'600px'}, 'delay':500});
}
});
});
</script>
</body>
</html>
testGrid.jsp