默认情况下在过滤器标题角度 ui 网格中聚焦 [英] Focus by default in filter header angular ui grid

问题描述

我前后浏览了文档，但似乎无法找到一种方法，可以在加载时为其中一个列提供标题过滤器的焦点.用户通常每次都在同一列上进行过滤.我将这些网格用于业务线应用程序，每人每天节省 500 个点击或标签".

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.

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

然后我有以下 html，所以 Order 得到一个过滤器，但默认情况下它没有聚焦.

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

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

谢谢！

推荐答案

这是我针对这个问题找到的解决方案.

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

};

在上面的代码示例中，您可以看到 headerCellTemplate 被显式写入.这是您可以进行更改以获得自动对焦的地方.您可以在此单元格模板中执行任何操作.但请注意不要更改任何底层单元格模板.这可能会破坏 ui-grid 功能.希望这会有所帮助！

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!

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

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

这篇关于默认情况下在过滤器标题角度 ui 网格中聚焦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！