2

我有一个带有一些可见列（名字、姓氏）和一个隐藏列（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

我想出了两个不同的解决方案来解决这个问题，我将它们发布给其他可能觉得它们有用的人。基本思想是：

(a) 知道用户选择了哪一行 (b) 读取该行的隐藏列的值 (c) 将值分配给隐藏的表单字段

两种解决方案之间的区别在于分配值的时间。在第一个解决方案中，当用户点击提交按钮时分配值。在第二种解决方案中，每次用户单击一行时都会分配该值。

解决方案#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

我基本上有你同样的需求，这是我对解决方案的看法：

1）创建传递自定义fnCreatedRow回调的dataTable。回调将用于在每个创建的行上添加一个单击侦听器。

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

var dataTable = element.dataTable(options);

2）在创建监听器时，确保将行索引转发给实际监听器

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

3) 在点击监听器中，使用索引获取行的实际数据（即 JS 对象，而不是 HTML），调用 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 回答