从默认 ng 网格中删除列分隔符 angularjs
Remove Column Separators from default ng grid angularjs
我正在使用默认的 ui-grid,现在我想从我的网格中删除列分隔线(2 列之间用于分隔的线)。正如您在 plunkr 中看到的那样,姓名和性别由一条灰色细线分隔。我已经检查了各种解决方案,但我无法删除该分隔符。我需要在列之间使用 space 而不是分隔符,这是我的代码。我怎样才能实现... 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);
}
});
}
};
你可以玩 columnDefs
和 cellClass
, please check this
JS 片段:
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
对 header 行执行几乎相同的操作
我正在使用默认的 ui-grid,现在我想从我的网格中删除列分隔线(2 列之间用于分隔的线)。正如您在 plunkr 中看到的那样,姓名和性别由一条灰色细线分隔。我已经检查了各种解决方案,但我无法删除该分隔符。我需要在列之间使用 space 而不是分隔符,这是我的代码。我怎样才能实现... 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);
}
});
}
};
你可以玩 columnDefs
和 cellClass
, please check this
JS 片段:
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