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

I have gone through the documentation forward and back and I cannot seem to find a way to give the header filter for one of the columns focus when it loads. The user typically filters on the same column every single time. I use these grids for line of business applications and every click or 'tab' saved is 500 saved per person per day.

我已经前进和后退了文档,我似乎找不到一种方法来为其中一个列加载时聚焦的头部过滤器。用户通常每次都在同一列上过滤。我将这些网格用于业务线应用程序,保存的每个点击或“标签”每人每天500个。

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

Then I have the following for the html, so Order gets a filter, but it is not focused by default.

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

<div ui-grid="taskCtrl.gridOptions" ui-grid-selection ui-grid-auto-resize></div>

Thanks!

1 个解决方案

#1

Here is a solution I found out for this problem.

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

You need to add autofocus to text box of the header filter while creating the column definition. You can do this by coding something like this:

您需要在创建列定义时将自动对焦添加到标题过滤器的文本框中。你可以通过编码这样的代码来做到这一点:

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

};

In the above code sample you can see that the headerCellTemplate is being written explicitly. Here is the place you can do the change to get the autofocus. You can do anything you want in this cell template. But be careful not to change any underlying cell template. This may break ui-grid functionality. Hope this helps!

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

I found the above solution in the below plunker link: http://plnkr.co/edit/JuDUwpUBwglkDRUYT77g?p=preview

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

#1