[英]Angular UI-grid filter header cell style?
我正在使用Angular UI-Grid,並且完全使用過濾功能。 所有功能都可以正常工作,現在我正在研究樣式。
如您所見,我只想在一行中進行范圍過濾。 我在互聯網上的所有搜索均失敗。 我已經找到了有關日期選擇器范圍的某種信息,但我認為它應該簡單得多,只需將一些CSS規則添加到一列中即可。
我可以通過cellClass
影響行,並且嘗試通過headerCellClass
以相同的方式影響行,但是它不起作用。 是否可以在不創建任何自定義模板的情況下影響此標頭? 提前致謝。
我的列定義:
$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';
};
這很笨拙 ,您可以找到我的問題
我找到了影響它的方法,我添加了自定義類,並通過該類可以影響內部元素。 這是我的工作代碼。
$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;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.