jqxGrid——cellhover响应及事件处理

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'
    });
}

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