У меня есть сетка Angular-UI, определенная с помощью ui-grid-cellNav
, чтобы разрешить редактирование ячеек при одиночном щелчке, а также настраиваемый шаблон для отображения типа Bootstrap Angular-UI перед определенным столбцом, как показано ниже:
index.html:
<head>
<script type="text/ng-template" id="TypeaheadTemplate.html">
<div style="height:100%">
<input ng-class="'colt' + col.uid" type="text" class="typeahead form-control" ng-model="MODEL_COL_FIELD"
uib-typeahead="name as item.name for item in grid.appScope.items | filter:$viewValue"
typeahead-editable="false"
typeahead-on-select="grid.appScope.typeaheadSelected(row.entity, $item)"></input>
</div>
</script>
</head>
<body ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-edit ui-grid-cellNav></div>
</body>
controller.js
app.controller('MainCtrl', function($scope) {
$scope.items = [
{
id: 1,
name: "Item 1",
description: "Example Item #1"
},
{
id: 2,
name: "Item 2",
description: "Example Item #2"
}];
$scope.data = [{}, {}, {}]
$scope.columns = [
{
displayName: "Item",
field: "item.name",
editableCellTemplate: "TypeaheadTemplate.html",
cellTemplate: "TypeaheadTemplate.html",
enableCellEdit: true,
enableCellEditOnFocus: true
},
{
displayName: "Note",
name: "activityId",
enableCellEdit: true,
enableCellEditOnFocus: true
}]
$scope.gridOptions = {
data: $scope.data,
enableRowSelection: false,
showColumnFooter: true,
multiSelect: false,
enableSorting: false,
enableFiltering: false,
gridMenuShowHideColumns: false,
enableColumnMenus: false,
enableCellEditOnFocus: true,
minRowsToShow: 4,
columnDefs: $scope.columns
};
$scope.typeaheadSelected = function(entity, selectedItem) {
entity.item = selectedItem;
}
});
Это работает достаточно хорошо: ui-grid-cellNav
позволяет редактировать столбец Notes одним щелчком мыши, а ввод текста в столбце Items. Однако первоначальное нажатие текстового поля в сетке приводит к размытию текстового поля до тех пор, пока оно не будет нажато снова, а сохранение выбранной ячейки в Notes (но не редактируемой) часто препятствует выделению текстового поля. Таким образом, несмотря на то, что он функционален, у него есть некоторые проблемы с удобством использования.
Я уже пытался вручную применить класс к текстовому полю с помощью атрибута ng-class
, думая, что за кулисами есть какая-то логика, которая фокусирует элементы с этим классом, но безрезультатно. Я также не могу найти ничего в документации API, которая предлагает возможность переопределить поведение cellNav для данного столбца. Удаление директивы ui-grid-cellNav
исправляет фокусировку ввода, но также нарушает редактирование одним щелчком мыши.
Есть ли способ заставить шрифты в сетке Angular-UI хорошо работать с ui-grid-cellNav
?