Фильтры на столбец в таблице javascript (Angular), объединенные результаты - PullRequest
Новая
       9

Фильтры на столбец в таблице javascript (Angular), объединенные результаты

0 голосов
/ 31 октября 2018

У меня есть ngx-datatable для Angular, который не поддерживает фильтрацию по столбцам. Я хотел бы добавить входной фильтр для каждого столбца (некоторые являются строками, некоторые - множественным выбором и т. Д.) И объединить их в один фильтр, чтобы я мог использовать его для получения данных с rxJs из серверной части.

Что у меня есть сейчас:

Это компонент фильтра в заголовке каждого столбца: 

<div class="input-group mb">
    <div class="input-group-addon">
        <span class="input-group-text" id="search-addon"><em class="icon-magnifier"></em></span>
    </div>
    <input aria-describedby="search-addon" id="order_id" aria-label="Customer" placeholder="Search" class="form-control" type="text" (keyup)='updateFilter($event)'>
</div>

Функция обновления фильтра 

updateFilter(event) {

  let columnName = event.currentTarget.id;

  const val = event.target.value.toString().toLowerCase();
  const filteredData = this.temp.filter(function(d) {
    return d[columnName].toString().toLowerCase().indexOf(val) !== -1 || !val;
  });
  this.rows= filteredData;
  this.table.offset = 0;
}

Это работает для каждого столбца. Но как мне объединить все фильтры и начать наблюдать ответ API?

1 Ответ

0 голосов
/ 31 октября 2018

Вашим updateFilter() методам нужны значения всех входов фильтра, а не только того, который передан через $event.

Одним из способов может быть создание объекта filters в вашем компоненте и двусторонняя привязка его свойств к поисковым входам в заголовках столбцов. Прослушайте событие ngModelChange и запустите фактическую фильтрацию. 

class MyComp {
   // Other stuff
   filters = {};

   filter = () => {
       // Do the filtering, all filters are set in this.filter object
   }
}

В вашем HTML-шаблоне свяжите его и прослушайте событие ngModelChange, чтобы инициировать фильтрацию при каждом изменении значения (лучше, чем при использовании keyUp, поскольку оно также срабатывает, когда содержимое изменяется без нажатия клавиши, например, копирование с помощью контекстное меню). 

<input id="order_id" [(ngModel)]="filters.order_id" (ngModelChange)="filter()" ... />
...