当前位置: 首页 > 工具软件 > jqxGrid > 使用案例 >

jqxGrid——cellhover响应及事件处理

广楚
2023-12-01

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

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

 类似资料: