1

メイン行とフッター行（ユーザーデータがロードされている）を持つjqgridと、セル内のデータをリンク可能に変更するフォーマッターがあります。本体のセルをクリックすると、onCellSelect イベントがクリックをキャプチャします。ただし、フッター行のデータをクリックしても、onCellSelect イベントが発生しないようです。フッター行で選択/クリック イベントをキャプチャするにはどうすればよいですか? 以下は、jqgrid のスクリプトです。

$('#jqgSummaryResults').jqGrid({
        datatype: 'json',
        mtype: 'GET',
        url: 'some action',
        postData: { 'criteria': function () {
           some function}},
        rowNum: 100,
        rowList: [],
        pager: '#jqgpSummaryResults',
        viewrecords: true,
        sortorder: 'asc',
        sortname: 'DateField',
        width: 1250,
        height: 350,
        shrinkToFit: true,
        gridview: true,
        footerrow: true,
        userDataOnFooter: true,
        onCellSelect: function (rowid, iCol, cellcontent, e) {
            var selectedDate = rowid;
            savedMailDueDateString = rowid;
            var selectedColumn = iCol;
            ...
        },
        loadComplete: function (data) {
            ...
        },
        colNames: ['DateField',
                    'Total Jobs',
                    ...
                    '% Not Mailed'],
        colModel: [
                    { name: 'DateField', index: 'DateField', align: 'left' },
                    { name: 'TotalJobs', index: 'TotalJobs', align: 'left', formatter: hyperlinkColumnFormatter },
                    ...
                    { name: 'PercentNotMailed', index: 'PercentNotMailed', align: 'left', formatter: hyperlinkColumnFormatter },
                    ]
    }).navGrid('#jqgpSummaryResults', {
        excel: false,
        edit: false,
        add: false,
        del: false,
        search: false,
        refresh: false
    });

助けてくれてありがとう。

4

3 に答える 3

2

jqGridを選択（そのフッターが選択可能であるようには見えません）またはクリックに応答させる方法は見当たりませんでした。フッター行は、ui-jqgrid-sdivクラスによって指定されます。以下のように、クリック イベント ハンドラーをアタッチできます。

$('.ui-jqgrid-sdiv').click(function() {alert('Bong')});

編集：フッターイベントを追加するためのGill Batesの質問に応えて、セレクターは次のようになります：

$('.ui-jqgrid-sdiv').find('td[aria-describedby="GridName_ColumnName"]').click(function() { alert("Bong");});

GridName_ColumnName は、すべてのフッター td aria-記述者の形式であり、firebug 要素インスペクター (またはそれに相当するもの) を介して正確な名前を確認できます。

于 2013-01-10T12:33:16.510 に答える
1

jqGridはグリッドのclickメインにイベントを登録しますが、常に呼び出されるわけではありません。まず最初に (ここを参照) いくつかの追加の条件をテストし、条件が失敗した場合は (イベントを無視して) 返します。たとえば、グリッドのグループ化ヘッダーをクリックすると、コールバックは処理されません。<table>onCellSelectclickonCellSelect

グリッドの外側に存在するため、フッター行の問題。メイン<table>要素は の中に配置されていますdiv.ui-jqgrid-bdivが、フッターは の中にある別のテーブルの中にありdiv.ui-jqgrid-sdivます。Internet Explorer、Google Chrome、Firebug などの開発者ツールを使用して、jqGrid の HTML 構造を調べることができます。次のことがわかります。

ここに画像の説明を入力

メイン<table>要素 (<table id="list">上の図で、クラス「ui-jqgrid-btable」を取得) とフッターを持つ別のテーブル要素 (クラス「ui-jqgrid-ftable」を取得) は別のものです。

したがって、あなたの質問に対するマークの最初の答えは正しかったです。ページに複数のグリッドがある場合、次を使用して特定のグリッドのフッターを指定できます

var $grid = $('#jqgSummaryResults'); // one specific grid

.... // here the grid will be created

$grid.closest(".ui-jqgrid-view").find(".ui-jqgrid-sdiv").click(function() {
    // do in case of the footer is clicked.
    var $td = $(e.target).closest("td"),
        iCol = $.jgrid.getCellIndex($td); // or just $td[0].cellIndex,
        colModel = $grid.jqGrid("getGridParam", "colModel");

   // $td - represents the clicked cell
   // iCol - index of column in footer of the clicked cell
   // colModel[iCol].name - is the name of column of the clicked cell
});

PS古い回答では、グリッドの他の多くの要素が説明されています。説明は完全ではありませんが、おそらく役立つでしょう。

于 2013-03-15T18:52:43.193 に答える
0

ここでは、この問題の実装はほとんどありません。jquery と jqgrid は初めてですが、同じ問題があり、@Oleg と @Mark の上記の 2 つの投稿に感謝します。Im はそのようなものを実装しました。

//Raport1Grid - jqgrid の名前
//endusers、adminusers、decretusers - colModel 内の行の名前
//Raport1Grid_endusers - GridName_ColumnName

var endUsers = $("[aria-describedby='Raport1Grid_endusers']").click(function(){
    //remove previous style of selection
    $('.ui-jqgrid-ftable').find('.selecteClass').removeClass('selecteClass');
    //set selection style to cell
    $(endUsers).addClass('selecteClass');    
});

// selectedCell の値も取得できます

 var qwer = $("[aria-describedby='Raport1Grid_endusers']").text();
 alert(qwer);

デモはこちら http://jsfiddle.net/Tobmai/5ju3py83/

于 2015-01-14T09:43:39.940 に答える