Question

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

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

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

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

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

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

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

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

它不起作用。：（

P.S：

我知道我可以通过实现指定的“data-formatter”属性来格式化每个列的数据，但我更愿意找到一种更直接，更快捷的方法来完成我在这种情况下所需的内容。

Answer 1

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

相反，在将插件加载到表中之前，您必须每次在插件的响应处理程序中展平JSON。使用代码将JSON从对此问题的接受答案中展平：Fastest way to flatten / un-flatten nested JSON objects，您可以按如下方式创建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>

Plunker example here

Answer 2

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

当一个表附加到提供JSON数据的链接时，引导表会自动填充它。

如果有人想要访问表中填充的数据（即采用JSON格式），则执行以下操作非常简单。

第1步 ：将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. }添加到HTML表格属性中。

第2步 ：编写如下函数：

＆＃13;

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

＆＃13;

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

＆＃13;

JSON数据如下：

＆＃13;

responseHandler(res)

＆＃13;

第3步 ：在函数- (void)startStandardUpdates { // Create the location manager if this object does not // already have one. if (nil == locationManager) locationManager = [[CLLocationManager alloc] init]; locationManager.delegate = self; locationManager.desiredAccuracy = kCLLocationAccuracyKilometer; // Set a movement threshold for new events. locationManager.distanceFilter = 500; // meters [locationManager startUpdatingLocation]; }中，您可以对数据执行任何操作。就像我发出警报一样。

Answer 3

使用数据格式化程序。这对我有用

function showDescription(cell, row) {
  return cell.id;
}

<th data-field="kids" data-formatter="KidsIdFormatter">Inner ID</th>

Answer 4

使用responseHandler，我认为它对我不好，因为我的响应数据非常大，每次重新加载表时，它都会解析我所有的json，当我只需要一些嵌套字段时。我已经通过使用数据格式化器解决了我的问题，我希望它能帮助某人。

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

添加data-formatter属性后。请添加更多javascript功能：

function KidsIdFormatter(value, row){
//row contains the returned object which applied to current row.
return row.kids.id;
}

Answer 5

尝试访问内部元素：kids.name它为我工作; 您的DataTable dichiaration应该是这样的：

 $('#data-table').DataTable( {
    ...
    columns: [
        { data: "kids.id" },
        { data: "kids.name" },
        { data: "name" }
        ...
    ],
    ...
} );

检查DataTable文档：https://editor.datatables.net/examples/advanced/deepObjects.html

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

5 个答案: