显示隐藏字段的可引导详细信息格式化程序答案

【问题标题】：Bootstraptable detail formatter showing hidden fields显示隐藏字段的可引导详细信息格式化程序
【发布时间】：2021-03-31 10:53:21
【问题描述】：

我正在尝试为我的表格实现一个详细格式化程序，但我看到许多带有下划线的字段：

_id: undefined
_class: undefined    
_data: [object Object]

当我按下加号按钮时。

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">  
    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/extensions/filter-control/bootstrap-table-filter-control.css">
      </head>
      <body>
        <div class="container">
                    <table id="table"
                        data-toggle="table"
                        data-filter-control="true"
                        data-show-search-clear-button="true"
                        data-sortable="true"
                        classes="table-sm"
                        data-pagination="true"
                        data-show-columns="true"
                        data-show-columns-toggle-all="true"
                        class="table-responsive"
                        
                        data-toolbar="#toolbar"
                        data-search="true"
                        data-show-refresh="true"
                        data-show-toggle="true"
                        data-show-fullscreen="true"
                        data-show-columns="true"
                        data-show-columns-toggle-all="true"
                        data-detail-view="true"
                        data-show-export="true"
                        data-click-to-select="true"
                        data-detail-formatter="detailFormatter"
                        data-minimum-count-columns="2"
                        data-show-pagination-switch="true"
                        data-pagination="true"
                        data-id-field="id"
                        data-page-list="[5, 25, 50, 100, all]"
                        data-show-footer="true"
                        >
                        <thead>
                            <tr>
                                <!--special characters and spaces not allowed in data-field name-->
                                <th data-field="columnA" data-filter-control="input" data-sortable="true">column A</th>
                                <th data-field="columnB" data-filter-control="select" data-sortable="true">column B</th>
                                <th data-field="columnC" data-filter-control="input" data-sortable="true" data-visible="false">column C</th>
                            </tr>
                        </thead>
                        <tbody>
                          
                          <tr>
                              <!--special characters and spaces not allowed in data-field name-->
                              <td data-field="columnA">a</td>
                              <td data-field="columnB">2</td>
                              <td data-field="columnC"> f </td>
                          </tr>
                          <tr>
                            <!--special characters and spaces not allowed in data-field name-->
                            <td>f</td>
                            <td> 4</td>
                            <td>d</td>
                        </tr>
                        <tr>
                            <!--special characters and spaces not allowed in data-field name-->
                            <td>f</td>
                            <td>1</td>
                            <td>h</td>
                        </tr>
                        <tr>
                            <!--special characters and spaces not allowed in data-field name-->
                            <td>f</td>
                            <td>1</td>
                            <td>h</td>
                        </tr>
                        <tr>
                            <!--special characters and spaces not allowed in data-field name-->
                            <td>f</td>
                            <td>1</td>
                            <td>h</td>
                        </tr>
                        </tbody>
                    </table>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script>
        function detailFormatter(index, row) {
            var html = []
            
            $.each(row, function (key, value) {
              html.push('<p><b>' + key + ':</b> ' + value + '</p>')
            })
            
            return html.join('')
          }
        </script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
        <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
    </body>
    </html>

我不太明白这种格式的工作原理。我希望对字段有更多的控制，而不仅仅是迭代整个对象并打印键值对。这可能吗？

【问题讨论】：

嗨，您只需要显示列值吗？不是 id 和所有？因为你没有给你的 tds 提供 id 或类，它给你 undefined 的原因
嗨@Swati 感谢您的评论！是的，我只是想显示列内容和一些其他信息，我将把它放在隐藏列中。我认为不需要更多。

标签： javascript ajax bootstrap-4 bootstrap-table

【解决方案1】：

实现上述目标的一种方法是使用th 数据字段值从row 仅获取列名，然后使用相同的值从中获取所需值。另外，正如你所拥有的 data-visible="false" in tr for column C 所以它们不存在于您的 DOM 中，因此无法使用 $("th:eq(" + (indexs + 1) + ")").data("field") 获得其值。如果您知道隐藏列的 data-field 值，您可以使用 html.push('<p><b> yourcolumnfieldname :</b> ' + row['yourcolumnfieldname'] + '</p>') 。

演示代码：

function detailFormatter(index, row) {
  var html = []
  var indexs = 0

  $.each(row, function(key, value) {
    //index +1 because first column is for `+`
    //and data-field is column a ,column b..etc
    var columns = $("th:eq(" + (indexs + 1) + ")").data("field")
    if (columns != undefined) {
      html.push('<p><b>' + columns + ':</b> ' + row[columns] + '</p>')
      indexs++;
    }
  })
  //here columnC matches with data-field value.
   html.push('<p><b> columnC :</b> ' + row['columnC'] + '</p>')
  return html;
}

<html>

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">
  <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/extensions/filter-control/bootstrap-table-filter-control.css">
</head>

<body>
  <div class="container">
    <table id="table" data-toggle="table" data-filter-control="true" data-show-search-clear-button="true" data-sortable="true" classes="table-sm" data-pagination="true" data-show-columns="true" data-show-columns-toggle-all="true" class="table-responsive"
      data-toolbar="#toolbar" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-fullscreen="true" data-show-columns="true" data-show-columns-toggle-all="true" data-detail-view="true" data-show-export="true" data-click-to-select="true"
      data-detail-formatter="detailFormatter" data-minimum-count-columns="2" data-show-pagination-switch="true" data-pagination="true" data-id-field="id" data-page-list="[5, 25, 50, 100, all]" data-show-footer="true">
      <thead>
        <tr>
          <!--special characters and spaces not allowed in data-field name-->
          <th data-field="columnA" data-filter-control="input" data-sortable="true">column A</th>
          <th data-field="columnB" data-filter-control="select" data-sortable="true">column B</th>
          <th data-field="columnC" data-filter-control="input" data-sortable="true" data-visible="false">column C</th>
        </tr>
      </thead>
      <tbody>

        <tr>
          <td data-field="columnA">a</td>
          <td data-field="columnB">2</td>
          <td data-field="columnC"> f </td>
        </tr>
        <tr>

          <td>f</td>
          <td>4</td>
          <td>d</td>
        </tr>
        <tr>
          <td>f</td>
          <td>1</td>
          <td>h</td>
        </tr>

      </tbody>
    </table>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
</body>

</html>

【讨论】：