jqgrid - jqGrid-jqGridの列を右クリックして列の名前を決定します

Question

jqGridの列ヘッダーを右クリックしたときの列の名前が必要です。任意のコードをいただければ幸いです。

Answer 1

contextmenuイベントをすべての列ヘッダーにバインドできます。すべてのヘッダーは<th>要素であるため、そのDOMはcellIndexプロパティをサポートします。cellIndexプロパティは、列ヘッダーのインデックスを提供します。で同じインデックスを使用する場合colModelは、列の定義を取得します。nameプロパティは列名を示します。

対応するコードは次のとおりです。

var cm = $grid.jqGrid("getGridParam", "colModel");
$("th.ui-th-column", $grid[0].grid.hDiv).bind('contextmenu', function(e) {
    var $th = $(e.currentTarget).closest("th");
    if ($th.length > 0) {
        alert("the header of the column '" + cm[$th[0].cellIndex].name +
            "' was clicked");
        e.preventDefault(); // don't display standard context menu
    }
});

デモではコードを使用します。列ヘッダーを右クリックするだけで、結果が表示されます。

Answer 2

すべてのjqGridセルには、aria-described-byで構成されるプロパティがありgridId_columnnameます。これを使用して、列名を取得できます。

グリッドセルの場合。

var cellName = $(e.target).closest('td').attr('aria-described-by');
var gridId = 'list1';

var columnName = cellName.substr(gridId.length - 1);

列ヘッダーの場合、Olegの回答に加えて、これを行うことができます。

var header = $(e.target).closest('th')
var gridId = 'list1';

var columnName = header.attr('id').substr(gridId.length - 1);