twitter-bootstrap Bootstrap 表 - 如何访问数据源对象中的内部元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26084422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap tables - how to access inner elements in the data source object
提问by TheCuBeMan
Let's say my data source object looks something like this:
假设我的数据源对象如下所示：
[{
"id": 123,
"name": "blabla1",
"kids": {
"id": "kid1",
"name": "kk1"
}
},{
"id": 456,
"name": "blabla2",
"kids": {
"id": "kid2",
"name": "kk2"
}
}]
This is a list (array) containing 2 objects, with the "kids" key in each, holding an inner object with keys and so on.
这是一个包含 2 个对象的列表（数组），每个对象中都有“kids”键，包含一个带有键的内部对象等等。
When working with Bootstrap Tables, each column is connected to a key in the source object, for example:
使用 Bootstrap 表时，每一列都连接到源对象中的一个键，例如：
<th data-field="id">ID</th>
The question here is how can I define a column to be connected to an inner key in the source object??
这里的问题是如何定义要连接到源对象中的内部键的列？
I've tried the following thing (suited for the example data above):
我尝试了以下事情（适用于上面的示例数据）：
<th data-field="kids.id">Inner ID</th>
And it doesn't work. :(
它不起作用。:(
P.S:
PS：
I know that I can format each column's data by implementing the designated "data-formatter" attribute, but I prefer to find a more direct and faster way to accomplish what I need in this case.
我知道我可以通过实现指定的“data-formatter”属性来格式化每列的数据，但我更喜欢找到一种更直接、更快的方法来完成我在这种情况下需要的东西。
回答by mccannf
This Bootstrap plugin bootstrap-tabledoes not offer the mechanism to do this at the moment. You should raise an issue on their github site to request this.
此 Bootstrap 插件bootstrap-table目前不提供执行此操作的机制。你应该在他们的 github 站点上提出一个问题来请求这个。
Instead, you will have to flatten the JSON every time in the plugin's response handler before loading it into the table. Using the code to flatten JSON from the accepted answer to this question: Fastest way to flatten / un-flatten nested JSON objects, you can create a responseHandler as follows:
相反，您必须每次在插件的响应处理程序中将 JSON 展平，然后再将其加载到表中。使用代码从这个问题的已接受答案中展平 JSON：展平/取消展平嵌套 JSON 对象的最快方法，您可以创建一个 responseHandler 如下：
<script>
function responseHandler(res) {
var flatArray = [];
$.each(res, function(i, element) {
flatArray.push(JSON.flatten(element));
});
return flatArray;
}
</script>
And then add the response handler to your table using the attribute data-response-handler="responseHandler":
然后使用属性将响应处理程序添加到您的表中data-response-handler="responseHandler"：
<table data-url="data.json" data-toggle="table" data-height="299" data-response-handler="responseHandler">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="kids.id">Kids Id</th>
<th data-field="kids.name">Kids Name</th>
</tr>
</thead>
</table>
回答by sirshendu
How to access inner elements in the data source object of a table
如何访问表的数据源对象中的内部元素
When a table attached to a link which provides the JSON data, the bootstrap table automatically populates it.
当表附加到提供 JSON 数据的链接时，引导表会自动填充它。
If anyone wants to access the table populated data, (i.e. which is in JSON format) it is simple to do the following.
如果有人想访问表中填充的数据（即 JSON 格式），执行以下操作很简单。
Step 1: Add data-response-handler="responseHandler"to the HTML table attribute.
第 1 步：添加data-response-handler="responseHandler"到 HTML 表格属性。
Step 2: Write the function as follows:
第 2 步：编写函数如下：
function responseHandler(res)
{
var str = JSON.stringify(res, undefined, 2);
$(document.body).append(str); //this print the whole json data to your page body
alert(res[0].empno); //this is however a single value of the jason data.
}<table id="emp_ltc_approved_list_table" data-toggle="table" data-method="post" data-url="getallemployeeapprovedlist.htm" data-response-handler="responseHandler" class="table table-bordered table-condensed table-hover panel-body">
<thead class="bg-primary">
<tr>
<th data-field="empno">Employee Code</th>
<th data-field="dep_name">Employee Name</th>
<th data-field="slno">SL NO</th>
</tr>
</thead>
</table>The JSON data is as follows:
JSON数据如下：
[
{
"empno": "74271",
"dep_name": "ARJUN ROUTH",
"block": "2014-2017",
"subblock": "2014-2015",
"slno": "6",
"journey_type": "LTC",
"place_of_visit": "VIZAG",
"status": "APPROVED",
"application_date": "15-06-2015",
"journey_status": "APPROVED"
},
{
"empno": "92039",
"dep_name": "ARINDAM MONDAL",
"block": "2014-2017",
"subblock": "2014-2015",
"slno": "1",
"journey_type": "HTC",
"place_of_visit": "VIZAG",
"status": "APPROVED",
"application_date": "12-06-2015",
"journey_status": "APPROVED"
}
]Step 3: Within the function responseHandler(res), you can do any operation with the data. Just like how I made an alert.
步骤3：在函数内responseHandler(res)，您可以对数据进行任何操作。就像我发出警报一样。
回答by nguyenhoai890
Using responseHandler, I think it does not good to me, because my responded data is very large and every times I reload table, it will parse all my json when I only need some nested fields. I have resolved my problem by using data-formatter, I hope it will help someone.
使用responseHandler，我觉得对我来说不太好，因为我的响应数据非常大，每次我重新加载表时，当我只需要一些嵌套字段时，它会解析我的所有json。我已经通过使用数据格式化程序解决了我的问题，我希望它会对某人有所帮助。
<th data-field="kids.id" data-formatter="KidsIdFormatter">Inner ID</th>
After added data-formatter attribute. Please add more javascript function:
添加数据格式化程序属性后。请添加更多javascript函数：
function KidsIdFormatter(value, row){
//row contains the returned object which applied to current row.
return row.kids.id;
}
回答by naamadheya
Use data-formatter. This worked for me
使用数据格式化程序。这对我有用
function showDescription(cell, row) {
return cell.id;
}
<th data-field="kids" data-formatter="KidsIdFormatter">Inner ID</th>
回答by Tiziano Bruschetta
Try to access inner element like this: kids.nameit's worked for me;
Your DataTable dichiaration should be like this:
尝试像这样访问内部元素：kids.name它对我有用；您的 DataTable dichiaration 应该是这样的：
$('#data-table').DataTable( {
...
columns: [
{ data: "kids.id" },
{ data: "kids.name" },
{ data: "name" }
...
],
...
} );
check DataTable docs: https://editor.datatables.net/examples/advanced/deepObjects.html
检查数据表文档：https: //editor.datatables.net/examples/advanced/deepObjects.html
