1

私は、些細な要件であるべきだと思うものが必要であることに気づきました。各行にカスタムボタンを追加したjqGridがあります。クライアント側のクリック イベントを関連付けることができるようになりましたが、カスタム ボタンがクリックされた行のキー値 (Id) を知りたいので、この ID を使用して続行し、やりたいことを実行できます。行う。

jqGridの私のコードは以下の通りです

jQuery("#JQGrid").jqGrid({
        url: 'http://localhost:55423/JQGrid/JQGridHandler.ashx',
        datatype: "json",
        colNames: ['', 'Id', 'First Name', 'Created Date', 'Member Price', 'Non Member Price', 'Complete', 'customButton'],
        colModel: [
                    { name: '', index: '', width: 20, formatter: "checkbox", formatoptions: { disabled: false} },
                    { name: 'Id', index: 'Id', width: 20, stype: 'text', sortable: true, key: true },
                    { name: 'FirstName', index: 'FirstName', width: 120, stype: 'text', sortable: true },
                    { name: 'CreatedDate', index: 'CreatedDate', width: 120, editable: true, sortable: true, hidden: true, editrules: { edithidden: true} },
                    { name: 'MemberPrice', index: 'MemberPrice', width: 120, editable: true, sortable: true },
                    { name: 'NonMemberPrice', index: 'NonMemberPrice', width: 120, align: "right", editable: true, sortable: true },
                    { name: 'Complete', index: 'Complete', width: 60, align: "right", editable: true, sortable: true },
                    { name: 'customButton', index: 'customButton', width: 60, align: "right" }
                  ],
        rowNum: 10,
        loadonce: true,
        rowList: [10, 20, 30],
        pager: '#jQGridPager',
        sortname: 'Id',
        viewrecords: true,
        sortorder: 'desc',
        caption: "List Event Details",
        gridComplete: function () {
            jQuery(".jqgrow td input", "#JQGrid").click(function () {
                //alert(options.rowId);
                alert("Capture this event as required");
            });
        }
    });

    jQuery('#JQGrid').jqGrid('navGrid', '#jQGridPager',
               {
                   edit: true,
                   add: true,
                   del: true,
                   search: true,
                   searchtext: "Search",
                   addtext: "Add",
                   edittext: "Edit",
                   deltext:"Delete"
               },
        {/*EDIT EVENTS AND PROPERTIES GOES HERE*/ },
        {/*ADD EVENTS AND PROPERTIES GOES HERE*/},
            {/*DELETE EVENTS AND PROPERTIES GOES HERE*/},
        {/*SEARCH EVENTS AND PROPERTIES GOES HERE*/}
 );

ヘルプまたはポインタをいただければ幸いです。

4

2 に答える 2

2

次の問題の主な解決策: たとえばe、clickハンドルのコールバックにパラメーターを含める必要があります。パラメータには、ターゲットプロパティを含むEvent オブジェクトタイプがあります。または、ほとんどの場合に使用できます。あなたができることは、最も近い親要素に行くことができます。それはあなたが必要とする値です：thise.target<tr>id

jQuery(this).find(".jqgrow td input").click(function (e) {
    var rowid = $(e.target).closest("tr").attr("id");
    alert(rowid);
});

さらに、いくつかのバグを修正するために、コードにその他の変更を加える必要があります。の使用法

name: '', index: ''

で間違っていcolModelます。空でない一意の名前を指定する必要があります。たとえばname: 'mycheck'。

次に、 からすべてのプロパティを削除することをお勧めします。使用する場合は、対応する値と同じ値を持つプロパティを使用する必要があります。プロパティを指定しないと、コードが小さくなり、読みやすくなります。プロパティの対応する値は、対応する値から jqGrid によって内部的にコピーされます。同様に、どの値がデフォルト値であるかなどのプロパティを削除できます (ドキュメントの列を参照)indexcolModelloadonce: trueindexnameindexindexnamestype: 'text', sortable: trueDefault

次の問題は、おそらくサーバーからの JSON 応答に HTML データを含めることです。customButton(たとえば、フォーマッタは表示されません)。良くない。グリッドのテキストに特別な HTML シンボルが含まれていると、問題が発生する可能性があります。サーバーからの JSON 応答で純粋なデータを使用することをお勧めします。クライアント側でフォーマッター、カスタムフォーマッターなどを使用できます。この場合autoencode: true、グリッドに表示されるすべてのテキストを HTML エンコードする jqGrid のオプションを使用できます。そうすれば、インジェクションを許可しないより安全なコードが得られます (たとえば、データの編集中に JavaScript コードを含めないなど)。

次の発言: の使用はお勧めしませんgridComplete。の使い方loadCompleteがベターです。件名に関する私の古い回答を参照してください。

最後の重要な発言。clickグリッド内に配置されたボタンのイベントを処理するために、すべてのボタンに個別のハンドルをバインドする必要はありませんclick。その代わりにone beforeSelectRowまたはonCellSelectcallback を使用できます。eの答えとこれはこれを説明しています。回答<a>はカスタムフォーマッターで使用されますが、<input>まったく同じように機能します。

于 2013-08-31T07:54:17.937 に答える
0

カスタム ボタンがクリックされた行の ID を取得するために使用できる別の方法は、カスタム ボタンの列にフォーマッタを追加することです。

{ name: 'customButton', index: 'customButton', width: 60, align: "right", 
  formatter: function ( cellvalue, options, rowObject ) {

    return "<input type='button' class='custom-button' id='custom"+ rowObject.id +"'/>";
  } 
}

すべてのボタンに行 ID が割り当てられるようになりました

$('input[id^="custom"]').click(function() {
  var id = this.attr('id').replace("custom", ""); // required row ID
});
于 2013-09-07T18:56:40.950 に答える