如何根据数据表角度中的 JSON 动态填充表值？

Posted 2023-05-07

【中文标题】如何根据数据表角度中的 JSON 动态填充表值？

【英文标题】：How to populate table values dynamically based on JSON in datatable angular?

【发布时间】：2016-12-11 19:39:21

【问题描述】：

我正在使用Angular-Datatables。我需要能够根据返回的数据动态创建表。换句话说，我不想指定列标题。

示例：

json 数据：

[
 
  "id": "2",
  "city": "Baltimore",
  "state": "MD",
 ,
 
  "id": "5",
  "city": "Boston",
  "state": "MA",
 ,
 
  "id": "8",
  "city": "Malvern",
  "state": "PA",
 ,
]

列标题：

身份证，城市，州

有人可以帮忙吗？

【问题讨论】：

指定列标题很棒。

【参考方案1】：

这实际上是一个好问题！使用传统的 jQuery dataTables 不是问题，但是我们有一个不同类型的 angular dataTables 声明性设置，使得分离各种任务变得更加困难。我们可以使用fromFnPromise 延迟数据填充，但不能阻止数据表在我们需要之前被实例化。我想我找到了一个可靠的解决方案：

首先，为避免即时初始化，请从标记中删除 datatable 指令，并将 <table> 改为 id，即：

<table id="example" dt-options="dtOptions" dt-columns="dtColumns" />

然后加载数据资源，构建dtColumns和dtOptions，最后使用id注入datatable属性和$compile<table>：

$http(
  url: 'data.json'
).success(function(data) 
  var sample = data[0], dtColumns = []

  //create columns based on first row in dataset
  for (var key in sample) dtColumns.push(
    DTColumnBuilder.newColumn(key).withTitle(key)
  )
  $scope.dtColumns = dtColumns

  //create options
  $scope.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('data', data)
    .withOption('dataSrc', '')

  //initialize the dataTable
  angular.element('#example').attr('datatable', '')
  $compile(angular.element('#example'))($scope)
)

这应该适用于任何“对象数组”资源 演示 -> http://plnkr.co/edit/TzBaaZ2Msd9WchfLDLkN?p=preview

---

注意：已经清理了示例 JSON，我猜这是一个示例，并不意味着使用尾随逗号。

【讨论】：

谢谢！这绝对是有道理的。我将在我这边实施解决方案，然后将其更新为可接受的答案。再次感谢！

@Sana，感谢您的关注。已修复 plunkr。它不起作用，因为 Angular DataTables 的作者出于某种原因决定在现有分支之上为 angular 2/4/5 构建 AD，因此任何没有特定版本的引用都不再起作用:(

知道如何使用嵌套的 JSON 对象

【参考方案2】：

面对同样的问题，我实际上找到了一个更易于实现且更简单（并且由于不使用 $compile 而更安全）的解决方案。

需要对 html 进行的唯一更改是添加一个ng-if：

<table ng-if="columnsReady" datatable="" dt-options="dtOptions" dt-columns="dtColumns"/>

发生的情况是 Angular 会延迟该节点的创建，直到 columnsReady 具有任何值。所以现在在你的代码中你可以获得你需要的数据，当你拥有它时，你可以将columnsReady设置为true，剩下的就交给angular来完成了。

$http(
  url: 'data.json'
).success(function(data) 
  var sample = data[0], dtColumns = []

  //create columns based on first row in dataset
  for (var key in sample) dtColumns.push(
    DTColumnBuilder.newColumn(key).withTitle(key)
  )
  $scope.dtColumns = dtColumns

  //create options
  $scope.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('data', data)
    .withOption('dataSrc', '')

  //initialize the dataTable
  $scope.columnsReady = true;
);

【讨论】：

很好的解决方案。

这极大地帮助了我尝试实现加载“fromFnPromise”。将数据表放入 uib-tab 中，承诺总是在页面加载时被获取。使用“ng-”将表格隐藏在不可见的选项卡中如果”，然后切换布尔值是一种享受。非常感谢。

【参考方案3】：

下面的代码将根据数据动态地为您提供表格

HTML

<div ng-controller="WithAjaxCtrl as showCase">
<table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>

JS

angular.module('showcase.withAjax',['datatables']).controller('WithAjaxCtrl', WithAjaxCtrl);

function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder) 
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
    .withPaginationType('full_numbers');
vm.dtColumns = [
    DTColumnBuilder.newColumn('id').withTitle('ID'),
    DTColumnBuilder.newColumn('city').withTitle('City'),
    DTColumnBuilder.newColumn('state').withTitle('State')
];

data.json

[
"id": 860,
"city": "Superman",
"state": "Yoda"
, 
"id": 870,
"city": "Foo",
"state": "Whateveryournameis"
, 
"id": 590,
"city": "Toto",
"state": "Titi"
, 
"id": 803,
"city": "Luke",
"state": "Kyle"
 ,
 ...
 ]

【讨论】：

这正是我想要避免的。我不想用 vm.dtColumns

指定列标题