Bootstrap 表 - 如何访问数据源对象中的内部元素 [英] Bootstrap tables - how to access inner elements in the data source object

问题描述

假设我的数据源对象如下所示:

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"
   }
}]

这是一个包含 2 个对象的列表(数组)，每个对象中都有kids"键，包含一个带有键等的内部对象.

This is a list (array) containing 2 objects, with the "kids" key in each, holding an inner object with keys and so on.

使用 Bootstrap Tables 时，每一列都连接到源对象中的一个键，例如:

When working with Bootstrap Tables, each column is connected to a key in the source object, for example:

<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>

而且它不起作用.:(

附:

我知道我可以通过实现指定的data-formatter"属性来格式化每列的数据，但在这种情况下，我更喜欢找到一种更直接、更快速的方法来完成我需要的操作.

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.

推荐答案

这个 Bootstrap 插件 bootstrap-table 目前不提供执行此操作的机制.你应该在他们的 github 站点上提出一个问题来请求这个.

This Bootstrap plugin bootstrap-table does not offer the mechanism to do this at the moment. You should raise an issue on their github site to request this.

相反，在将 JSON 加载到表中之前，您每次都必须在插件的响应处理程序中展平 JSON.使用代码从这个问题的已接受答案中将 JSON 展平:扁平化/取消扁平化嵌套 JSON 对象的最快方法，您可以创建一个 responseHandler 如下:

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:

<script>
    function responseHandler(res) {
        var flatArray = [];
        $.each(res, function(i, element) { 
            flatArray.push(JSON.flatten(element));
        });
        return flatArray;
    }
</script>

然后使用属性 data-response-handler="responseHandler" 将响应处理程序添加到您的表中:

And then add the response handler to your table using the attribute 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>

Plunker 示例在此

这篇关于Bootstrap 表 - 如何访问数据源对象中的内部元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！