jqxGrid——cellhover响应及事件处理

jqxGrid——cellhover响应及事件处理

要求：单元格hover及时响应，获取单元格对应的信息，弹出消息提示。

实现 cellhover 响应

获取被hover的单元格所在的row以及column，加载对应的信息

弹出消息提示，使用 gritter-notice

1、 实现cellhover响应

查看官网API jqxGrid官网DEMO API 查找cellhover，得到如下信息：

Set the cellhover property.

$('#jqxGrid').jqxGrid({ cellhover: function (cellhtmlElement, x, y) {  }});

Get the cellhover proper

var cellhover = $('#jqxGrid').jqxGrid('cellhover');

//对应的表格初始化设置中添加cellhover函数
jQuery("#jqxgrid").jqxGrid(
{
width: "98%",
source: dataadapter,
theme: theme,
selectionmode: "singlecell" ,
....
cellhover: function(Obj,x,y)
{
f_hovershow(Obj);
},
columns:[
...
}

//写个测试
f_hovershow(Obj){
f_info(Obj.innerHTML);//hover测试最好不用alert, 可以写个块插入Obj内容测试
}

我悲剧地发现，无论我鼠标这么移动都不能做出反应，后来下载官网js，给js换了次血，终于出来了。

2、获取被hover的单元格所在的row以及column，加载对应的信息

用obj.getElementByTagName根据标签获取对应的id还有value

f_hovershow(Obj){
/*此处的Obj是hover所在的元素指针
* 要根据元素获得单元格的行以及列，需要先在元素中隐含row和column信息。
* 查询了官方给的API找不到通过hover 直接获取行列信息，因此，笔者加载中给hover列写了个hidden input用来标识对应的id
* 然后再使用getElementByTagName获得row和column。
*/
var element = Obj.getElementsByTagName("input");
var id = element[0].getAttribute("id");
var column = element[0].getAttribute("val");
}

3、弹出消息提示，使用 gritter-notice

使用了现成的gritter-notice的js，自己封装了一下，方便调用

function f_info(mess) {
jQuery.gritter.add({
// (string | mandatory) the heading of the notification
title: '提示',
// (string | mandatory) the text inside the notification
text: mess,
class_name: 'gritter-success gritter-light'
});
}

以上乃个人拙见，欢迎指正，若有更好的解决方法，希望能留言交流 : )