引导表-如何访问数据源对象中的内部元素

Question

假设我的数据源对象看起来像这样：

[{
   "id": 123,
   "name": "blabla1",
   "kids": {
      "id": "kid1",
      "name": "kk1"
   }
},{
   "id": 456,
   "name": "blabla2",
   "kids": {
      "id": "kid2",
      "name": "kk2"
   }
}]

这是一个包含2个对象的列表（数组），每个对象带有“ kids”键，其中包含一个带有键的内部对象，依此类推。

使用引导表时，每一列都连接到源对象中的键，例如：

<th data-field="id">ID</th>

这里的问题是如何定义要连接到源对象中的内部键的列？

我尝试了以下操作（适用于上面的示例数据）：

<th data-field="kids.id">Inner ID</th>

而且它不起作用。:(

PS：

我知道我可以通过实现指定的“数据格式器”属性来格式化每一列的数据，但是在这种情况下，我更喜欢找到一种更直接，更快速的方法来完成所需的工作。

Answer 1

该Bootstrap插件bootstrap-table目前不提供执行此操作的机制。您应该在他们的github网站上提出一个问题，以请求此操作。

相反，您每次必须在插件的响应处理程序中将JSON展平，然后再将其加载到表中。使用代码从以下问题的公认答案中拉平JSON：拉平/取消拉平嵌套JSON对象的最快方法，您可以按以下方式创建responseHandler：

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

然后使用属性将响应处理程序添加到表中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>

这里的柱塞示例