/**
* 扩展两个方法
*/
$.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' : '1px',
'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).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);
options.tipDelayTime = setTimeout(
function() {
showTip(options, that, e);
}, params.delay);
} else {
showTip(options, that, e);
}
}
});
});
}
});
},
/**
* 关闭消息提示功能
* @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;
}
});
}
});
使用事项:
扩展了两个方法,功能的实现基于jQuery的delegate函数,所以请用1.4.2版本之后的jQuery,可以自定义消息框的样式,将参数传入doCellTip方法即可。
onLoadSuccess:function(data){
$('#test').datagrid('doCellTip',{cls:{'background-color':'red'},delay:1000});
}
转载来至:[url] http://www.easyui.info/archives/796.html[/url]
分享到:
相关推荐
5. **事件处理**: DataGrid拥有丰富的事件模型,如ItemCreated、ItemDataBound、Command等,这使得我们可以根据需要在特定时刻执行操作。例如,ItemDataBound事件可用于在数据绑定后进行数据格式化或附加额外逻辑。 ...
为了实现用户输入时实时过滤,可以监听DataGrid的键盘事件或文本输入框的change事件,每当输入变化时,更新过滤条件并重新过滤数据。 ```actionscript textInput.addEventListener(Event.CHANGE, onFilterChange...
本篇将聚焦于如何使用Adobe Flex来实现分页显示功能,特别是通过mx:DataGrid组件。 Flex是一种基于ActionScript和MXML的开源框架,用于构建富互联网应用程序(RIA)。mx:DataGrid是Flex提供的一个强大组件,可以...
2. **监听cellClick事件**:在`DataGrid`中添加事件监听器,如下所示: ```actionscript dataGrid.addEventListener(ListEvent.ITEM_CLICK, handleCellClick); ``` `handleCellClick`函数会处理单元格点击事件。...
ASP.NET中的DataGrid控件是Web开发中常用的数据展示组件,尤其在构建数据密集型的Web应用程序时。本文将深入探讨DataGrid的使用最佳实践,旨在帮助开发者优化性能,提高用户体验,同时保持代码的可维护性和灵活性。 ...
ASP.NET中的DataGrid控件是Web开发中一个非常重要的组件,尤其对于初学者来说,它提供了数据展示的强大功能。在本教程中,我们将深入探讨DataGrid的使用,并遵循最佳实践来提升开发效率和用户体验。 首先,DataGrid...
本文将详细讲解Datagrid键盘事件响应,包括Datagrid整体和单元格两个层面。 首先,我们来看Datagrid上的键盘响应。当Datagrid获得焦点后,用户可以通过键盘进行操作。例如,按下"0-1"、"A-Z"、"Enter"、"Backspace...
DataGrid提供了丰富的事件,如`click`、`doubleClick`、`cellClick`等,可以监听这些事件进行交互处理。例如,监听单元格点击事件: ```actionscript myGrid.addEventListener(DataGridEvent.CELL_CLICK, ...
8. 扩展性:DataGrid控件本身具有很高的可扩展性,可以添加自定义行为和功能,例如,通过编写自定义适配器来处理复杂的数据操作。 在DEMO文件中,你可能会看到一个关于DataGrid 5.9.2版本的示例应用程序,其中展示...
Datagrid 提供了一系列的事件,如 `onLoadSuccess`(数据加载成功时触发)、`onClickRow`(点击行时触发)、`onDblClickRow`(双击行时触发)等,开发者可以通过监听这些事件来实现自定义功能。 6. **自定义模板**...
4. **事件处理**:EasyUI 提供了丰富的事件机制,如 onDblClickRow(双击行事件)、onClickRow(点击行事件)、onLoadSuccess(数据加载成功事件)等,开发者可以通过监听这些事件来扩展 Datagrid 的功能。...
4. **处理数据交互**:一旦DataGrid与数据源关联,你可以监听DataGrid的事件(如SelectionChanged、CellEditEnding等)来处理用户交互,例如更新数据源。 ```csharp dataGrid.SelectionChanged += (sender, e) => {...
- **监听事件**:首先,我们需要为Datagrid的每一行添加`mouseover`和`mouseout`事件监听器。 - **获取行数据**:在`mouseover`事件触发时,我们可以获取当前行的数据,这通常通过`$(this).data()`或`$(this)....
本篇文章将深入探讨如何在Visual Studio 2012中利用`DataGrid`控件实现双击事件处理以及如何从选定的行中获取数据。 首先,我们需要了解`DataGrid`控件的基本用法。`DataGrid`可以与各种数据源绑定,如数组、...
Flex DataGrid 是 Adobe Flex 中一个重要的组件,...在实际应用中,还可以结合事件监听、自定义样式和皮肤等高级特性,使得 DataGrid 更加符合项目需求。对于 Flex 开发者来说,掌握 DataGrid 的使用是非常重要的技能。
4. **事件监听**:我们可以监听DataGrid的各种事件,如itemClick、doubleClick等,以便进行相应的操作。例如: ```actionscript myGrid.addEventListener(ListEvent.ITEM_CLICK, handleItemClick); ``` 接下来,...
在.NET框架中,Datagrid控件是一个非常重要的组件,尤其在ASP.NET环境下,它被广泛用于数据展示和交互。这个控件提供了丰富的功能,能够帮助开发者轻松地在网页上创建表格,显示数据库中的数据,并允许用户进行编辑...
2. **创建自定义 `Datagrid` 子类**:在子类中,你可以重写或扩展渲染器(renderer)的逻辑,渲染器负责显示每个单元格的内容。为了改变行背景色,我们需要自定义行渲染器。 3. **实现行渲染器**:行渲染器通常是 `...
DataGrid控件提供了多种事件,包括ItemDataBound事件,这个事件在每项数据绑定到DataGrid时被触发。在这个事件处理程序中,我们可以对每一行进行自定义操作,如添加JavaScript事件监听器。 以下是实现双击事件的...