Использование typeahead в UI-сетке AngularJS с cellNav - PullRequest
Новая
       20

Использование typeahead в UI-сетке AngularJS с cellNav

0 голосов
/ 30 августа 2018

У меня есть сетка Angular-UI, определенная с помощью ui-grid-cellNav, чтобы разрешить редактирование ячеек при щелчке одним щелчком мыши, наряду с пользовательским шаблоном для отображения начальной загрузки 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 позволяет редактировать в столбце «Примечания» одним щелчком мыши, а заголовок «Тип заголовка» работает в столбце «Элементы». Однако при первом щелчке текстового поля с надписью в сетке текстовое поле размывается до тех пор, пока оно не будет щелкнуто снова, и сохранение ячейки в примечаниях выбранной (но не редактируемой) часто не позволяет выбрать текстовое поле. Поэтому, пока он функционирует, у него есть некоторые проблемы с юзабилити.

Я уже пытался вручную применить класс к текстовому полю с помощью атрибута ng-class, думая, что есть некоторая закулисная логика, которая фокусирует элементы с этим классом, но безрезультатно. Я также не могу найти ничего в документации API, которая предлагает возможность переопределить поведение cellNav для данного столбца. Удаление директивы ui-grid-cellNav исправляет фокусировку на клавиатуре, но также нарушает редактирование одним щелчком.

Есть ли способ заставить гарнитуры шрифтов в сетке Angular-UI хорошо играть с ui-grid-cellNav?

1 Ответ

0 голосов
/ 03 сентября 2018

Вы можете установить allowCellFocus на false для любых столбцов с заголовками внутри, и это гарантирует, что ui-grid-cellNav не отвлечет фокус от текстового поля typeahead изначально . Следует обратить внимание на одно предупреждение: текстовое поле typeahead по-прежнему требует двух щелчков, когда ячейка cellNav уже имеет фокус, и это повредит индексацию табуляции на остальной части вашей сетки. 

$scope.columns = [
  {
    displayName: "Item",
    field: "item.name",
    allowCellFocus: false, // Property added here
    editableCellTemplate: "TypeaheadTemplate.html",
    cellTemplate: "TypeaheadTemplate.html",
    enableCellEdit: true,
    enableCellEditOnFocus: true
  },
  // ...
];

Обновлен Plunker

Если возможно, вам следует рассмотреть возможность использования раскрывающегося списка ui-select вместо заголовка. Они работают намного надежнее в сетке с cellNav, однако вам все равно придется учитывать неправильное поведение индекса табуляции.

...