在 Angular UI-Grid 中交换数据，在外部更改数据集时新列不可见

Question

我有一个我一直在研究的查询工具，它有一个已填写的角度表单，然后在提交时使用 AJAX 返回 JSON，然后将其呈现为 ui-grid，即 JSON响应看起来像

{
"success": true,
"message": "",
"columns": ["first_name", "last_name", "company", "employed"]
"results": [
    {first_name: "John", last_name: "Smith", company: "Abc Inc", employed: true},
    {first_name: "Johnny", last_name: "Rocket", company: "Abc Inc", employed: true}]
}

我正在研究 PHP 和 Angular，因此如果需要，我可以完全控制这个 JSON 响应。当呈现来自第一个 AJAX 调用的 JSON 响应时，我遇到了一个问题，然后我在同一页面上运行另一个单独的 AJAX 调用并获取新数据集：这个新数据集不会呈现任何不在原始数据集中的列。这是一个很大的问题，因为当所有列都不相同时，表格基本上被清除了，而且我经常需要在这个单页应用程序中将完全不同的数据加载到 ui-grid 中。

收到 JSON 后，我只需将 jsonResult.results 绑定到 ui-grid 绑定到的旧 $scope.myData 变量。

我已经 a plunker 隔离了这个问题。加载具有“朋克”列的数据集，然后单击“交换数据”将尝试加载具有“员工”列而不是“朋克”的数据集。到目前为止，我已经研究了在 $scope.myData 变量使用 $watch 更改时将刷新或重新加载的指令，并寻找类似 $scope.columnDefs 的东西来让 ui-grid 知道。 Angular 和 javascript 相对较新，所以指令仍然让我有点头疼。

Answer 1

我已经稍微更新了你的 plunker：

$scope.swapData = function() {
  if ($scope.gridOpts.data === data1) {
    $scope.gridOpts.columnDefs = [
      { name:'firstName' },
      { name:'lastName' },
      { name:'company' },
      { name:'employee' }
    ];
    $scope.gridOpts.data = data2;
    //punk column changes to employee
  }
  else {
    $scope.gridOpts.columnDefs = [
      { name:'firstName' },
      { name:'lastName' },
      { name:'company' },
      { name:'punk' }
    ];
    $scope.gridOpts.data = data1;
    //employee column changes to punk
  }
};

http://plnkr.co/edit/OFt86knctJxcbtf2MwYI?p=preview

由于您的 json 中有列，所以应该很容易做到。

Answer 2

我在 Kevin Sage 的回答和 plunker 示例的帮助下发现了一个额外的部分...如果您使用向后兼容的“字段”属性，则当字段名称之间存在重叠时，交换无法正常工作两组列定义。在这种情况下，列标题和列宽不会正确呈现。使用列定义的“名称”属性可以纠正这个问题。

    $scope.swapData = function() {
  if ($scope.gridOpts.data === data1) {
    $scope.gridOpts.columnDefs = [
      { field:'firstName' },
      { field:'lastName' },
      { field:'company' },
      { field:'employee' }
    ];
    $scope.gridOpts.data = data2;
    //punk column changes to employee
  }
  else {
    $scope.gridOpts.columnDefs = [
      { field:'firstName' },
      { field:'lastName' },
      { field:'company' },
      { field:'punk' }
    ];
    $scope.gridOpts.data = data1;
    //employee column changes to punk
  }
};

此处示例：Plunker

Answer 3

我的解决方案：

$http.get('url').success(function(res) {
// clear data
gridOptions.data.length = 0;
// update data in next digest 
$timeout(function() {
gridOptions.data = res;
});
});