2

いくつかの表示列（名、姓）と1つの非表示列（id）を持つDataTableがあります。DataTableの行選択の例を使用して、ユーザーが選択した行を強調表示しています。ボタンを押すと、選択した行の非表示の列に値を表示できます。私が理解しようとしているのは、その非表示の値をフォームの入力変数として別のページに投稿する方法です。

これが私のボタンが呼び出す関数です。これは、投稿したい非表示のID列を表示するだけです。

$('#select').click( function() {

   var anSelected = fnGetSelected( oTable );

   if ( anSelected.length == 0 ) {
      alert('Please make a selection');
   } else {

      // Get data from the selected row                    
      var aRow = anSelected[0];
      var sFirstName = oTable.fnGetData( aRow, 0 );
      var sLastName = oTable.fnGetData( aRow, 1 );
      var sID = oTable.fnGetData( aRow, 2 );

      alert('You have selected ' + sID);
   }
} );

この値をフォームの入力変数として投稿する方法がわかりません。

これに対処しようとする例も見つけましたが、実際に値を投稿する方法を示していません。

$(document).ready(function() {

   var oTable;

   $('#form').submit( function() {
      var sData = $('input', oTable.fnGetNodes()).serialize();
      alert( "The following would have been submitted to the form: \n\n"+sData );
      return true;
   } );

   oTable = $('#example').dataTable();

} );

ご想像のとおり、私はjQueryとDataTablesを初めて使用します。:)

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

4

2 に答える 2

3

私は、この問題に対する 2 つの異なる解決策を思いつきました。これらは、役立つと思われる他の人のために投稿しています。基本的な考え方は次のとおりです。

(a) ユーザーが選択した行を知る (b) その行の非表示の列の値を読み取る (c) 非表示のフォーム フィールドに値を割り当てる

2 つのソリューションの違いは、値が割り当てられるときです。最初のソリューションでは、ユーザーが送信ボタンを押したときに値が割り当てられます。2 番目のソリューションでは、ユーザーが行をクリックするたびに値が割り当てられます。

解決策 #1: これは、以前に投稿したコードに基づいています。ここでは、アラート ダイアログ ボックスを、getElementById 関数を使用して非表示のフォーム フィールドに非表示の値を割り当てるステートメントに置き換えただけです。

$('#select').click( function() {

   var anSelected = oTable.$('tr.row_selected');

   if ( anSelected.length == 0 ) {
      alert('Please make a selection');
   } else { 
      // Get data from the selected row                    
      var aRow = anSelected[0];
      var sFirstName = oTable.fnGetData( aRow, 0 ); // Don't need this anymore
      var sLastName = oTable.fnGetData( aRow, 1 ); // Don't need this anymore
      var sID = oTable.fnGetData( aRow, 2 ); // Hidden column

      document.getElementById('hiddenUserID').value = sID;
   }
} );

私のフォームには、非表示の入力フィールドと、上記の関数を呼び出す送信ボタンがあります。

<input type="hidden" name="user_id" id="hiddenUserID" value="" />
<button id="select" type="submit">Select User</button>

解決策 #2: この解決策では、ユーザーが行を選択するたびに値を割り当てています。このコードは、次の DataTables の行選択の例から借用しています。

http://datatables.net/release-datatables/examples/api/select_single_row.html

/* Add a click handler to the rows */
$("#example tbody tr").click( function( e ) {

    if ( $(this).hasClass('row_selected') ) {
        $(this).removeClass('row_selected');
    } else {
        oTable.$('tr.row_selected').removeClass('row_selected');
        $(this).addClass('row_selected');

        // Get the data from the selected row
        var sID = oTable.fnGetData( this, 2 );
        document.getElementById('hiddenUserID').value = sID;
    }
});

私のフォームには、上記と同じ非表示の入力フィールドがあります。私の送信ボタンも最初のソリューションで関数を呼び出しますが、行が選択されていることを確認するためだけです。

どちらのソリューションもうまく機能します。どちらを使用するかは、個人の好みやニーズによって異なると思います。

于 2012-07-22T04:06:16.400 に答える
1

私は基本的にあなたと同じニーズを持っています、これが私の解決策です：

fnCreatedRow1) カスタムコールバックを渡す dataTable を作成します。コールバックは、作成された各行にクリック リスナーを追加するために使用されます。

var options = {
    fnCreatedRow: createdRow,
    ...
};

var dataTable = element.dataTable(options);

2) リスナーの作成中に、行インデックスを実際のリスナーに転送するようにしてください。

function createdRow(nRow, aData, iDataIndex) {
    $(nRow).on('click', {dataIndex: iDataIndex}, rowClickListener);
}

3) クリック リスナーで、インデックスを使用して行の実際のデータ(HTML ではなく JS オブジェクト) を取得し、dataTable オブジェクトで「fnGetData」API を呼び出します。

function rowClickListener (evt) {
    var rowData = dataTable.fnGetData(evt.data.dataIndex);

    console.log(rowData.lastName + ' ' rowData.firstName);
}

この功績はユーザーspascoにも贈られます。

于 2013-03-06T14:18:07.960 に答える