1

我有一个我一直在研究的查询工具，它有一个填充的角度表单，然后在提交时使用 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 后，我只需将ui-grid 绑定jsonResult.results到的旧$scope.myData变量绑定。

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

4

3 回答 3

4

我已经稍微更新了你的 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 中有列，因此应该很容易做到。

于 2014-12-09T17:56:07.487 回答
1

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

于 2015-01-28T19:07:47.280 回答
1

我的解决方案：

$http.get('url').success(function(res) {
// clear data
gridOptions.data.length = 0;
// update data in next digest 
$timeout(function() {
gridOptions.data = res;
});
});
于 2015-05-29T10:47:21.800 回答