[英]Angular UI-grid filter header cell style?
I'm working Angular UI-Grid, and exactly with filtering. 我正在使用Angular UI-Grid,并且完全使用过滤功能。 All functions works fine, and now I'm working on styling.
所有功能都可以正常工作,现在我正在研究样式。
What I'm trying to achieve is instead of this view 我想要实现的是代替这种观点
I want to get this view 我想得到这个观点
So as you can see I just want to make range filter in one line. 如您所见,我只想在一行中进行范围过滤。 All my searches in internet have been failed.
我在互联网上的所有搜索均失败。 I have found some sort of info for a date picker range, but I believe it should be much simpler, just add some css rule to one columns.
我已经找到了有关日期选择器范围的某种信息,但我认为它应该简单得多,只需将一些CSS规则添加到一列中即可。
I can impact on row thru cellClass
and I have tried to impact in same way thru headerCellClass
but it doesn't work. 我可以通过
cellClass
影响行,并且尝试通过headerCellClass
以相同的方式影响行,但是它不起作用。 Is it any way to impact on this header without creating any custom templates? 是否可以在不创建任何自定义模板的情况下影响此标头? Thanks in advance.
提前致谢。
My column definition: 我的列定义:
$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';
};
this is plunker where you can find my problem 这很笨拙 ,您可以找到我的问题
I have found way to impact on it, I have added custom class and thru this class I can impact on inner elements. 我找到了影响它的方法,我添加了自定义类,并通过该类可以影响内部元素。 this is my working code.
这是我的工作代码。
$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 的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.