我正在使用 Angular UI-Grid,并且完全使用过滤。所有功能都运行良好,现在我正在处理样式。
如您所见,我只想在一行中制作范围过滤器。我在互联网上的所有搜索都失败了。我找到了日期选择器范围的某种信息,但我相信它应该更简单,只需将一些 css 规则添加到一列即可。
我可以通过 cellClass
影响行,并且我尝试通过 headerCellClass
以同样的方式影响,但它不起作用。是否可以在不创建任何自定义模板的情况下影响此 header ?
提前致谢。
我的专栏定义:
$scope.gridOptions.columnDefs = [
{
displayName: 'Name',
field: 'name',
width: '20%',
cellClass: getCellClass
},
{
field: 'description',
width: '30%',
cellClass: getCellClass
},
{
field: 'strict',
filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: [
{value: true, label: 'strict'},
{value: false, label: 'non-strict'}
]
},
cellClass: getCellClass
},
{
displayName: 'Length',
field: 'maxSize',
filters: [
{
name: 'From',
condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL,
placeholder: "from"
},
{
name: 'To',
condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL,
placeholder: "to"
}
],
headerCellClass: $scope.highlightFilteredHeader,
cellClass: getCellClass
},
{
field: 'Actions',
cellClass: getCellClass,
cellTemplate: "includes/grid/columnAction.html"
}
];
$scope.highlightFilteredHeader = function (row, rowRenderIndex, col, colRenderIndex) {
return 'ui-grid-header-custom';
};
这是 plunker在哪里可以找到我的问题
最佳答案
我找到了影响它的方法,我添加了自定义类,通过这个类我可以影响内部元素。这是我的工作代码。
$scope.highlightFilteredHeader = function (row, rowRenderIndex, col, colRenderIndex) {
if (col.displayName == 'Length') {
return 'inline-filter';
} else if (col.filters[0].term) {
return 'header-filtered';
} else {
return ''
}
};
CSS
.inline-filter .ui-grid-filter-input-0{
width: 40% !important;
float: left;
margin-left: 10px !important;
}
.inline-filter .ui-grid-filter-input-1{
width: 40% !important;
float: left;
margin-top: -8px !important;
margin-left: 5px !important;
}
.inline-filter .ui-grid-filter-container .ui-grid-filter-button {
top: 15px !important;
}
@media only screen and (max-width: 750px) {
.inline-filter .ui-grid-filter-input-0{
margin-left: 0 !important;
}
}
关于javascript - Angular UI-grid 过滤器标题单元格样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40049991/