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

Swapping data in Angular UI-Grid, new columns not visible when changing dataset externally

本文关键字：数据集 新列 外部 UI-Grid 交换 数据      更新时间：2023-09-26
我有一个我一直

在做的查询工具，它有一个填写的角度形式，然后在提交时它使用 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变量。

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

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

在 Kevin Sage 的回答和 plunker 示例的帮助下，我想出了另一块...... 如果使用向后兼容的"field"属性，则当两组列定义之间存在字段名称重叠时，交换将无法正常工作。 在这种情况下，列标题和列宽无法正确呈现。 使用列定义的"name"属性可以更正此问题。

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

这里的例子：普伦克

我的解决方案：

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