默认情况下，焦点在过滤器标题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!

我在下面的链接中找到了上述解决方案: 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屋！