Question

以下是我要做的事情：

上面的图片显示了我想要的内容，但我希望它能永久显示，而不仅仅是在某些设备上显示。基本上我想要创建一个包含1-3个数据的子行。我试着看看DataTable的方法，但是，如果我是诚实的，Javascript就在我头上。

到目前为止，这是我的代码：

<table id="query" class="table table-striped table-bordered table-condensed center-table dt-responsive nowrap" cellspacing="0" width="100%" style="display:none">
    <thead>
        <tr class = "info">
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
            <th>Header 5 </th>
            <th>Header 6 </th>
            <th>Sub-header 1 </th>
            <th>Sub-header2 </th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>Value 1</td>
                <td>Value 1</td>
                <td>Value 1</td>
                <td>Value 1</td>
                <td>Value 1</td>
                <td>Value 1</td>
                <td>Sub Value 1</td>
                <td>Sub Value 2</td>                
            </tr>
        </tbody>
    </table>

我想要的是当用户点击“+”时始终显示的子标题和子值。我也对任何其他有助于实现此目的的建议持开放态度，即使它是指向教程的链接。谢谢。

Answer 1

我认为你正在寻找的是Bootstraps的Collapse-Elements。看看这里了解它们： Bootstrap-Collaps

我认为，他们正是你想要的。

Answer 2

我仍然认为jQuery DataTables是最好的方法。

我试着看看DataTable的方法，但是，如果我是诚实的，Javascript就在我头上。

这是 DataTable的方法 for Dummies 。 ;）

第1步：让我们创建一个模板视图，我们的表格将包含所有数据。

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th> <!-- expand/collapse .details-control header column -->
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

td.details-control {
    background: url('../resources/details_open.png') no-repeat center center;
    cursor: pointer;
}

tr.shown td.details-control {
   background: url('../resources/details_close.png') no-repeat center center;
}

请注意，我们没有<tbody></tbody>。这是因为我们将从JavaScript代码生成它。所以，让我们来看看。

第2步：让我们为子部分提供外观和感觉。

function format ( dataObject ) {
  return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
      '<tr>'+
          '<td>Full name:</td>'+
          '<td>'+dataObject.name+'</td>'+
      '</tr>'+
      '<tr>'+
          '<td>Extension number:</td>'+
          '<td>'+dataObject.extn+'</td>'+
      '</tr>'+
      '<tr>'+
          '<td>Extra info:</td>'+
          '<td>And any further details here (images etc)...</td>'+
      '</tr>'+
  '</table>';
}

所以我们将dataObject传递给我们的函数。 dataObject基本上是一个数据结构......在点击的行的列上携带值。

第3步：（a.k.a有趣的部分）我们将填充表格并为用户点击某行时添加事件监听器。

在$('document').ready(function() {...});

中

使用数据填充表 - 通过将表对象绑定到DataTable对象;从服务器获取数据并将其填入。

var table = $('#example').DataTable( {
   "ajax": "../ajax/data/objects.txt",
   "columns": [
       {
           "className":      'details-control',
           "orderable":      false,
           "data":           null,
           "defaultContent": ''
       },
       { "data": "name" },
       { "data": "position" },
       { "data": "office" },
       { "data": "salary" }
    ],
    "order": [[1, 'asc']]
 } );

事件监听器 - 检查子部分是否显示并切换其视图。

// Add event listener for opening and closing details
$('#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');
    }
  });
});

有没有办法总是让bootstrap为我的一些元素创建子行？

2 个答案: