Focus standardmäßig im Filter Header Winkel UI Gitter

Question

Ich habe durch die Dokumentation vorwärts und rückwärts gegangen und ich kann nicht scheinen, einen Weg zu finden, den Header-Filter für eine der Spalten Fokus geben, wenn es lädt. Der Benutzer filtert in der Regel jedes Mal dieselbe Spalte. Ich verwende diese Grids für Geschäftsanwendungen und jeder gespeicherte Klick oder "Tab" wird 500 Mal pro Person und Tag gespeichert.

Dann habe ich folgendes für die html, also Bestellung bekommt einen Filter, aber es ist nicht standardmäßig fokussiert.

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

Vielen Dank!

Answer 1

Hier ist eine Lösung, die ich für dieses Problem gefunden habe.

Sie müssen dem Textfeld des Headerfilters Autofokus hinzufügen, während Sie die Spaltendefinition erstellen. Sie können dies tun, indem sie so etwas wie diese Codierung:

$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 dem obigen Codebeispiel können Sie sehen, dass die headerCellTemplate explizit geschrieben wird. Hier ist der Ort, an dem Sie den Autofokus ändern können. Sie können in dieser Zellenvorlage alles tun, was Sie wollen. Aber seien Sie vorsichtig, keine darunterliegende Zellenvorlage zu ändern. Dies kann die ui-Grid-Funktionalität beeinträchtigen. Hoffe das hilft!

fand ich die obige Lösung in dem unten Plunker Link: http://plnkr.co/edit/JuDUwpUBwglkDRUYT77g?p=preview