Question

我已经完成了前后文档，我似乎无法找到一种方法，可以在加载时为其中一列重点提供标题过滤器。用户通常每次都在同一列上过滤。我将这些网格用于业务线应用程序，保存的每个点击或“标签”每人每天保存500个。

override func viewWillAppear(animated: Bool) {
    self.tabBarController?.tabBar.hidden = true
}

override func viewWillDisappear(animated: Bool) {
    self.tabBarController?.tabBar.hidden = false
}

然后我对html有以下内容，因此Order获得了一个过滤器，但默认情况下它没有被聚焦。

this.gridOptions.columnDefs = [
            { field: 'Order' },
            { field: 'Qty.' }
        ];

谢谢！

Answer 1

这是我发现这个问题的解决方案。

创建列定义时，需要在标题过滤器的文本框中添加自动对焦。您可以通过以下编码来完成此操作：

$scope.gridOptions = {
enableSorting: true,
columnDefs: [
  { field: 'name' },
  { field: 'company',
    headerCellTemplate: '<div ng-class="{ \'sortable\': sortable }"><div class="ui-grid-vertical-bar">&nbsp;</div><div class="ui-grid-cell-contents" col-index="renderIndex"><span>{{ col.displayName CUSTOM_FILTERS }}</span><span ui-grid-visible="col.sort.direction" ng-class="{ \'ui-grid-icon-up-dir\': col.sort.direction == asc, \'ui-grid-icon-down-dir\': col.sort.direction == desc, \'ui-grid-icon-blank\': !col.sort.direction }">&nbsp;</span></div><div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false" class="ui-grid-column-menu-button" ng-click="toggleMenu($event)"><i class="ui-grid-icon-angle-down">&nbsp;</i></div><div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><input type="text" autofocus class="ui-grid-filter-input" ng-model="colFilter.term" ng-click="$event.stopPropagation()" ng-attr-placeholder="{{colFilter.placeholder || \'\'}}" /><div class="ui-grid-filter-button" ng-click="colFilter.term = null"><i class="ui-grid-icon-cancel" ng-show="!!colFilter.term">&nbsp;</i> <!-- use !! because angular interprets \'f\' as false --></div></div></div>'
  }
],
onRegisterApi: function( gridApi ) {
  $scope.gridApi = gridApi;
  $scope.gridApi.core.on.sortChanged( $scope, function( grid, sort ) {
    $scope.gridApi.core.notifyDataChange( $scope.gridApi.grid, uiGridConstants.dataChange.COLUMN );
  })
}

};

在上面的代码示例中，您可以看到headerCellTemplate是显式写入的。这是您可以进行更改以获得自动对焦的位置。您可以在此单元格模板中执行任何操作。但要注意不要更改任何基础细胞模板。这可能会打破ui-grid功能。希望这有帮助！

我在下面的plunker链接中找到了上述解决方案： http://plnkr.co/edit/JuDUwpUBwglkDRUYT77g?p=preview

默认情况下聚焦在滤镜头角度ui网格中

1 个答案: