Question

我正在使用默认的ui-grid，现在我想从我的网格中删除列分隔符行（2列之间用于分隔的行）。正如您在plunkr中看到的那样，名称和性别由浅灰色线条分隔。我检查了各种解决方案，但我无法删除该分隔符。而不是分隔符我需要列之间的空格这是我的代码。我怎样才能实现这一目标...... Plunkr Source

$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
showTreeExpandNoChildren: false,
columnDefs: [
  { name: 'name', width: '30%' },
  { name: 'gender', width: '20%' },
  { name: 'age', width: '20%' },
  { name: 'company', width: '25%' },
  { name: 'state', width: '35%' },
  { name: 'balance', width: '25%', cellFilter: 'currency' }
],
onRegisterApi: function( gridApi ) {
  $scope.gridApi = gridApi;
  $scope.gridApi.treeBase.on.rowExpanded($scope, function(row) {
    if( row.entity.$$hashKey === $scope.gridOptions.data[50].$$hashKey && !$scope.nodeLoaded ) {
      $interval(function() {
        $scope.gridOptions.data.splice(51,0,
          {name: 'Dynamic 1', gender: 'female', age: 53, company: 'Griddable grids', balance: 38000, $$treeLevel: 1},
          {name: 'Dynamic 2', gender: 'male', age: 18, company: 'Griddable grids', balance: 29000, $$treeLevel: 1}
        );
        $scope.nodeLoaded = true;
      }, 2000, 1);
    }
  });
}

};

Answer 1

您可以使用columnDefs和cellClass，please check this

进行游戏

JS Snip：

   columnDefs: [
      { name: 'name', width: '30%', cellClass: 'noborder' },
      { name: 'gender', width: '20%', cellClass: 'noborder' },
      { name: 'age', width: '20%', cellClass: 'noborder' },
      { name: 'company', width: '25%', cellClass: 'noborder' },
      { name: 'state', width: '35%', cellClass: 'noborder' },
      { name: 'balance', width: '25%', cellClass: 'noborder', cellFilter: 'currency' }
    ],

CSS：

.noborder {
  border: none;
}

您可以使用headerClass或headerCellTemplate

对标题行执行几乎相同的操作

从默认ng网格angularjs中删除列分隔符

1 个答案: