javascript - 如何在加载时显示特定子行而不点击

Question

当单击相应行上的图标时，我使用以下函数来控制子行的显示。

如何在加载时显示特定的子行而不点击？

$('#example tbody').on('click', 'td.details-control', function () {     
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );

Answer 1

SOLUTION

将 click 事件处理程序的匿名函数替换为命名函数，例如 onRowDetailsClick ，如下所示。

function onRowDetailsClick(table){
   var tr = $(this).closest('tr');
   var row = table.row( tr );

   if ( row.child.isShown() ) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
   } else {
      // Open this row
      row.child( format(row.data()) ).show();
      tr.addClass('shown');
   }
}

// ... skipped ...

// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function (){
    onRowDetailsClick.call(this, table);
});

那么你需要使用initComplete在特定行上调用 onRowDetailsClick 的选项，如下所示:

'initComplete': function(settings){
   var api = new $.fn.dataTable.Api(settings);

   // Open 12th row, zero-based index
   api.$('tr').
      .eq(11)
      .find('td.details-control')
      .each(function(){
         onRowDetailsClick.call(this, api);
      });

/*
   // Open rows with class .open
   api.$('tr.open').
      .find('td.details-control')
      .each(function(){
         onRowDetailsClick.call(this, api);
      });
*/

}

DEMO

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" width="100%">'+
        '<tr>'+
            '<td>Salary:</td>'+
            '<td>'+d[5]+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Start date:</td>'+
            '<td>'+d[4]+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}

function onRowDetailsClick(table){
   var tr = $(this).closest('tr');
   var row = table.row( tr );
 
   if ( row.child.isShown() ) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
   } else {
      // Open this row
      row.child( format(row.data()) ).show();
      tr.addClass('shown');
   }
}

$(document).ready(function() {
  
    var table = $('#example').DataTable( {
        'ajax': 'https://api.myjson.com/bins/qgcu',
        'columns': [
            {
                'className':      'details-control',
                'orderable':      false,
                'data':           null,
                'defaultContent': ''
            },
            { 'data': 0 },
            { 'data': 1 },
            { 'data': 2 },
            { 'data': 3 }
        ],
        'order': [[1, 'asc']],
        'initComplete': function(settings){
           var api = new $.fn.dataTable.Api(settings);
          
           // Open 12th row, zero-based index
           api.$('tr')
              .eq(11)
              .find('td.details-control')
              .each(function(){
                 onRowDetailsClick.call(this, api);
              });
        }
    } );
     
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function (){
       onRowDetailsClick.call(this, table);
    });
} );

td.details-control {
    background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') no-repeat center center;
}

<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>

<table id="example" class="stripe row-border order-column compact">
<thead>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Ext</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Ext</th>
    </tr>
</tfoot>
</table>