jqxGrid——cellhover响应及事件处理

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

1. 实现 cellhover 响应
2. 获取被hover的单元格所在的row以及column，加载对应的信息
3. 弹出消息提示，使用 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'    });}

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