Question

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

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

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

Answer 1

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

The demo显示了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

Answer 2

它与.jqgrow类无关。

这与事件有关，该事件会将this设置为事件发生的dom element。

这意味着如果这是HTML：

<div class="jqgrow" data-id="232" id="blabla">Text</div>

然后this将是鼠标悬停时的HTML。你可以随便做些什么。

$('.jqgrow').mouseover(function(e) {
  var id = $(this).attr('id');
  var dataId = $(this).data('id');
  var html = this;
});

Answer 3

修改

好的，没看到，你正在使用 jQuery grid plug-in 。

所有列都有一个属性role="gridcell"，因此您可以使用基于属性的选择器来选择所有单元格：

// untested
$('td[role*="gridcell"]').hover();

第一个答案

这个答案更像是对这个问题的普遍回答。

我假设你有一张这样的桌子：

<table>
        <tr class="jqgrow">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
</table>

您可以通过以下方式获取有关悬停行中列的信息：

$('.jqgrow').mouseover(function(e) {
    // get all child elements (td, th) in an array
    var cols    = $(this).children();
    console.log('All cols: ' + cols);
    // to retrieve a single column as a jQuery object use '.eq()' - it's like every array redo-indexed 
    console.log('HTML from col 2: ' + cols.eq(1).html());
});

这也适用于任何其他结构：

<div class="jqrow">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

如果您希望将鼠标悬停在.jqrow的每个子元素上，则可以将其直接附加到子项：

$('.jqgrow').children().mouseover(function(e) {
    // gets the current 'column'
    var $this = $(this);
});

Answer 4

var cm = jQuery("#list1″).jqGrid("getGridParam", "colModel");
var colName = cm[iCol];

来源：http://www.trirand.com/blog/?page_id=393/help/get-column-index-name-oncellselect-event-after-column-reorder/

Answer 5

如果您可以获得行ID，那么获取单元格信息并不困难。

var col = $（'＃grid'）。jqGrid（'getCell'，rowId，columnName）;

这将为该列提供数据。

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

5 个答案:

修改

第一个答案