Angular UI-grid过滤器标题单元格样式？答案

【问题标题】：Angular UI-grid filter header cell style?Angular UI-grid过滤器标题单元格样式？
【发布时间】：2016-10-15 03:41:32
【问题描述】：

我正在使用 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';
        };

这里是plunker，你可以在这里找到我的问题

【问题讨论】：

标签： javascript css angularjs angular-ui-grid

【解决方案1】：

我找到了影响它的方法，我添加了自定义类，并且通过这个类我可以影响内部元素。这是我的工作代码。

$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;
    }
}

【讨论】：