Question

如果该列中没有数据，我想隐藏ui-grid中的列。与此处一样，“发布者”和“发布在”列应隐藏，因为没有数据存在。

HTML

$like_variable = 100;
$query =  $this->db->query("SELECT * FROM `table_name` 

        WHERE id ='" . $qry . "' AND 

        page = '" . $_SESSION['p_id'] . "' AND 

        user_id = '" . $_SESSION['user_id'] . "' AND

        `like` = '" . $like_variable . "'

        ");

Controller.js

<body ng-app="appHome">
    <div ng-controller="ctrlRequestDetail">
        <div class="gridStyle" ui-grid="gridInvUsage">
        </div>
    </div>
</body>

如何实现此功能？

Answer 1

您可以轻松切换特定列visible属性，以显示和隐藏基于API的到达数据。

<强>代码

$scope.columns = [           
    { field: 'InvBookStartTime', displayName: 'Book Start Time', cellFilter: 'date:"dd-MM-yyyy HH:mm"' },
    { field: 'InvBookEndTime', displayName: 'Book End Time', cellFilter: 'date:"dd-MM-yyyy HH:mm"' },
    { field: 'SourceInvNumber', displayName: 'Source Inventory' },
    { field: 'BookingRemarks', displayName: 'Booking Remarks' },
    { field: 'BookingStatus', displayName: 'Booking Status' },
    { field: 'AcceptRejectBy', displayName: 'Accept/Reject By' },
    { field: 'IssuedBy', displayName: 'Issued By' },
    { field: 'IssuedOnTime', displayName: 'Issued On' },           
];

$scope.gridOptions = {
   data: 'invUsageData',
   columnDefs: $scope.columns,
   onRegisterApi: function(gridApi) {
      $scope.gridApi = gridApi;
   }
};

//Once data arrives, inside ajax success
//Web API call to Fetch Data
$scope.invUsageData = dataSuccess;  
$scope.columns.forEach(function(col){
   col.visible = $scope.invUsageData.filter(function(item){
       return angular.isDefined(item[col. field]);
   }).length;
});

Plunker Demo

通过ajax检索列定义，并在更新columnDefs属性后刷新网格以查看更改

function getColumns() {
  $http.get('columns.json').then(function(response) {
    $scope.columns = response.data;
    $scope.gridOptions.columnDefs = $scope.columns;
    $scope.columns.forEach(function(col) {
      col.visible = $scope.invUsageData.filter(function(item) {
        return angular.isDefined(item[col.field]);
      }).length;
    });
    //updated grid after colDef changed.
    $scope.gridApi.grid.refresh();
  });
}

$scope.gridOptions = {
  data: 'invUsageData',
  columnDefs: $scope.columns,
  onRegisterApi: function(gridApi) {
    $scope.gridApi = gridApi;
  }
};

Updated Demo

如果没有数据，则隐藏ui网格中的列

1 个答案: