如何在jqGrid中检索mouseover事件的单元格信息

Question

这个问题特定于jqGrid.我了解到我们可以使用.jqgrow带mouseover事件的项来检索行信息,如下所示:

gridComplete: function () {
  $('.jqgrow').mouseover(function(e) {
    var rowId = $(this).attr('id');
    console.log('You rolled over ' + rowId);
  });
}

我的问题是如何在这样的事件中检索列信息,单元名称信息和单元格内容信息.提前致谢.

Answer 1

首先,您不需要mouseover在每一行上绑定.它足以在整个网格体上绑定事件一次 .事件的参数具有属性,该属性被初始化为对象,该对象是事件的起源.因此,您可以使用jQuery.closest来查找当前上下文中的元素和元素.在这种方式中,您可以节省内存并提高解决方案的性能.etargetmouseover<td><tr>

该演示展示了jqGrid中的所有工作原理.使用的代码是

var cm = $grid.jqGrid('getGridParam', 'colModel');
$grid.mouseover(function(e) {
    var $td = $(e.target).closest('td'), $tr = $td.closest('tr.jqgrow'),
        rowId = $tr.attr('id'), ci;
    if (rowId) {
        ci = $.jgrid.getCellIndex($td[0]); // works mostly as $td[0].cellIndex
        if (console) {
            console.log('You rolled over the row with id="' + rowId +
               '" in the column ' + cm[ci].name);
        }
    }
});

演示将生成的输出如下所示

LOG: You rolled over the row with id="10" in the column note 
LOG: You rolled over the row with id="10" in the column ship_via 
LOG: You rolled over the row with id="9" in the column ship_via 
LOG: You rolled over the row with id="8" in the column ship_via 
LOG: You rolled over the row with id="8" in the column total 
LOG: You rolled over the row with id="7" in the column total 
LOG: You rolled over the row with id="7" in the column tax 
LOG: You rolled over the row with id="6" in the column tax 
LOG: You rolled over the row with id="6" in the column amount 
LOG: You rolled over the row with id="5" in the column amount 
LOG: You rolled over the row with id="4" in the column amount 
LOG: You rolled over the row with id="4" in the column invdate 
LOG: You rolled over the row with id="3" in the column invdate 
LOG: You rolled over the row with id="3" in the column name 
LOG: You rolled over the row with id="2" in the column name 
LOG: You rolled over the row with id="1" in the column name