5

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

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

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

4

5 回答 5

16

首先，您不需要绑定每一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
于 2012-08-01T17:05:47.153 回答
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;
});
于 2012-08-01T15:42:24.023 回答
1

编辑

好的，没看到，您使用的是jQuery 网格插件。

所有列都有一个属性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);
});
于 2012-08-01T15:46:14.127 回答
1 
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/

于 2012-08-01T15:47:19.747 回答
0

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

var col=$('#grid').jqGrid('getCell',rowId,columnName);

这将为该列提供数据。

于 2012-08-01T15:44:22.963 回答