显示隐藏字段的 Bootstraptable 详细信息格式化程序
Bootstraptable detail formatter showing hidden fields
我正在尝试为我的 table 实现一个详细格式化程序，但我看到许多字段带有下划线，例如：
_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>
我不太明白这种格式是如何工作的。我想对字段有更多的控制，而不仅仅是迭代整个对象并打印键值对。这可能吗？
实现上述目标的一种方法是使用 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>
我正在尝试为我的 table 实现一个详细格式化程序，但我看到许多字段带有下划线，例如：
_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>
我不太明白这种格式是如何工作的。我想对字段有更多的控制，而不仅仅是迭代整个对象并打印键值对。这可能吗？
实现上述目标的一种方法是使用 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>