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和角度，所以如果需要，我可以完全控制这个JSON响应。当我呈现第一个AJAX调用的JSON响应时，我遇到了一个问题，然后我在同一页面上运行另一个单独的AJAX调用，并且得到一个新数据集：这个新数据集没有渲染原始数据集中不存在的任何列。这是非常有问题的，因为当没有列相同时，表基本上被清除了，并且我经常需要在这个单页应用程序中将完全不同的数据加载到ui-grid中。

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

我已a plunker隔离此问题。带有＆＃34;朋克＆＃34;的数据集列已加载，然后单击＆＃34;交换数据＆＃34;将尝试使用＆＃34; employee＆＃34;加载数据集。列而不是＆＃34;朋克＆＃34;。到目前为止，我已经查看了当$ scope.myData变量使用$ watch更改时将刷新或重新加载的指令，并查看找到类似$ scope.columnDefs的内容让ui-grid知道。角度和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的回答和附带的例子中找到了另外一件作品......如果你正在使用向后兼容的＆＃34;字段＆＃34;如果两组列定义之间存在字段名称重叠，则交换属性无法正常工作。在这种情况下，列标题和列宽不能正确呈现。使用＆＃34;名称＆＃34;列定义的属性更正了这一点。

    $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;
});
});

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

3 个答案: