Фильтр js-grid не рендерит - PullRequest
Новая
       3

Фильтр js-grid не рендерит

0 голосов
/ 15 января 2019

Я хочу использовать фильтрацию на стороне клиента в jsGrid и реализовал тот же контроллер, что и в скрытом коде на демонстрационной странице (файл db.js), но я работаю с showtopper: фильтром строка не отображается, даже когда я добавил поле управления (которое я не хочу) для его переключения.

Мой код инициализации jsGrid: 

  function initGrid() {
    dom_accountList.jsGrid( {
        height: 500,
        width: '100%',

        autoload: true,
        filtering: false,
        editing: false,
        sorting: true,
        paging: true,

        pageSize: 25,
        pageButtonCount: 5,

        fields: accountList.layout,
        controller: accountList,

        data: accountList.data,

        rowClick: function (arg) {//redacted}
    });

    dom_accountList.jsGrid("option", "filtering", true);
  }

Побочные эффекты, которые вы можете искушать исправить:

  1. «Вам не нужны данные, если у вас есть контроллер» - нет, по методом проб и ошибок Я обнаружил, что loadData не вызывается, пока я не включу статические данные.
  2. «Но фильтрация установлена ​​в ЛОЖЬ!» - я знаю. Независимо от того, истинно ли это в определении, отсутствует в определении или ложно в определении, а затем переключается после рендеринга (как показано), поля не отображаются на экране.

Теперь я вижу HTML, но он все пустой: 

<tr class="jsgrid-filter-row" style="display: table-row;">
    <td class="jsgrid-cell" style="width: 10px;"></td>
    <td class="jsgrid-cell" style="width: 65px;"></td>
    <td class="jsgrid-cell" style="width: 10px;"></td>
    <td class="jsgrid-cell" style="width: 10px;"></td>
</tr>

Разве не должно быть input тегов внутри ТД? Почему они отсутствуют? В этом суть, я думаю.

В случае, если это имеет значение, вот код контроллера, измененный из демо-файла db.js: 

  function loadData(filter) {

   return $.grep(this.data, function (item) {
     return (!filter.Account || item.Account.indexOf(filter.Account) > -1)
     && (!filter.AXfer || item.AXfer === filter.AXfer)
     && (!filter.BXfer || item.BXfer === filter.BXfer)
     && (!filter.Name || item.Name.indexOf(filter.Name) > -1)
   });
  };
  function insertItem() {};
  function updateItem() {};
  function deleteItem() {};

А вот список полей в accountList.layout: 

   accountList.layout = [
     {
       name: 'Account',
       title: 'Account',
       width: '10',
     },
     {
       name: 'Name',
       title: 'Name',
       width: '65',
     },
     {
       name: 'AXfer',
       title: 'ATeam',
       width: '10',
     },
     {
       name: 'BXfer',
       title: 'BGood',
       width: '10',
   ];
 }

1 Ответ

0 голосов
/ 15 января 2019

О боже, после всего этого вот ответ: необходимо включить атрибут type в определение поля: 

  {
    name: 'Account',
    title: 'Account',
    width: '10',
    type: 'text',
  },
  {
    name: 'Name',
    title: 'Name',
    width: '65',
    type: 'text',
  },
  {
    name: 'AXfer',
    title: 'ATeam',
    width: '10',
    type: 'text',
  },
  {
    name: 'BXfer',
    title: 'BGood',
    width: '10',
    type: 'text',
  }
...