5

この質問はjqGridに固有のものです。.jqgrowitem with mouseovereventを使用して、次のような行情報を取得できることを学びました。

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

私の質問は、そのようなイベントで列情報、セル名情報、およびセルコンテンツ情報をどのように取得できるかということです。前もって感謝します。

4

5 に答える 5

16

まず、すべての行mouseoverにバインドする必要はありません。グリッド本体全体でイベントを 1 回バインドするだけで十分です。イベントのパラメータには、イベントの発生元であるオブジェクトに初期化されるプロパティがあります。したがって、 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 に答える