Question

ngGrid是否提供了一种以编程方式隐藏其列的方法。我的计划是迭代数据并将某些列（没有数据）的可见性设置为false。这可行吗？有解决方法吗？

非常感谢任何帮助。

更新：所以@mainguy帮我解决了问题，我能够完成剩下的工作。对于可能遇到这种情况的其他人来说，他们也会做同样的事情;这是另一个问题的链接，也帮助了我。 how to hide/show ng-grid column externally?

Answer 1

你可以用这个（丑陋的）代码来做到这一点：

// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
  $scope.myData = [{
    name: "Moroni",
    age: 50,
    value: ""
  }, {
    name: "Tiancum",
    age: 43,
    value: ""
  }, {
    name: "Jacob",
    age: 27,
    value: ""
  }, {
    name: "Nephi",
    age: 29,
    value: ""
  }, {
    name: "Enos",
    age: 34,
    value: ""
  }];

  $scope.incl_names = false;
  $scope.incl_ages = false;
  $scope.incl_values = false;
  $scope.filtered = [];
  //first loop: find empty columns
  angular.forEach($scope.myData, function(row) {
    if (row.name != "") {
      $scope.incl_names = true;
    }
    if (row.age != "") {
      $scope.incl_ages = true;
    }
    if (row.value != "") {
      $scope.incl_values = true;
    }
  });
  //second loop: build new array    
  angular.forEach($scope.myData, function(row) {
    var build = [];
    if ($scope.incl_names) {
      build.name = row.name;
    }
    if ($scope.incl_ages) {
      build.age = row.age;
    }
    if ($scope.incl_values) {
      build.value = row.value;
    }

    $scope.filtered.push(build);
  });


  $scope.gridOptions = {
    data: 'filtered'
  };
});

这将在第一个循环中检查哪些列为空并设置一些布尔值。然后在第二个循环中，它根据开关创建一个新数组，然后告诉ng-grid使用新数组。

当然，如果您的网格中有columnDefs，那么25列以上的内容并不是很有趣，而且您可能会遇到问题。

无论如何，试试here。只需在json的最后一列（值）中输入一个值。

ng-grid动态隐藏没有数据的列

1 个答案: