2016-12-22 2 views
4

У меня есть приложение пользовательского интерфейса для отображения бизнес-информации. Я использовал сетку slick для отображения всех бизнес-данных в табличной/сетчатой ​​структуре, используя все встроенные свойства slick grid. Я использовал свойство фильтра для фильтрации данных по каждому столбцу.Как получить все данные в slickgrid, когда пользователь нажимает на раскрывающийся список slick-header-menuitem.?

Но у меня есть условие, что я получаю 1k данных из таблицы хранения Azure, и я устанавливаю pageSize в 10, и я передаю pageSize, чтобы установить разбиение на страницы в dataView.setPagingOptions ({pageSize: pageSize}); Когда мы нажимаем на slick-header-menuitem в раскрывающемся списке, он отображает (Сортировка по возрастанию, сортировка по убыванию, поиск и данные, любые сетки, содержащие на (filter div)).

Теперь, когда я нахожу флажок, чтобы отфильтровать данные независимо от того, какие данные мне нужно фильтровать, они будут фильтровать эти данные без каких-либо проблем. Возможно, все работает нормально, как здесь, в моем раскрывающемся списке фильтров. У меня есть 4 варианта (Select All, Blank, IT, USA, USA), который показан на изображении ниже.

Но проблема начинается здесь, когда я снова нажимаю на элемент slick-header-menuitem после выпадающего списка фильтрации (filter div), отображающего несколько данных, таких как (Выбрать все, Пусто, IT, США, США, СОЕДИНЕННЫЕ ШТАТЫ, US), потому что я отфильтровал данные (IT), поэтому в сетке весь фильтр данных и получить данные из записей 1k, но он также получит данные, добавленные в опциях фильтра, которые ранее отсутствовали.

для refrence моя сетка выглядит коснуться, как это (ниже URL-адрес), за исключением поиска и пагинацией

http://danny-sg.github.io/slickgrid-spreadsheet-plugins/examples/example-2-everything.htm

Я также прилагаю два изображения

первое изображение показывают, когда я нажимаю на первый раз в раскрывающемся списке slick-header-menuitem. enter image description here

И второе изображение указывает, когда я снова нажимаю на раскрывающееся меню slick-header-menuitem после фильтрованных данных.

enter image description here

Я прошел через библиотеку slickgrid, в которой есть папка плагин эта папка содержит папку фильтра и папки фильтра содержат ext.headerfilter.js этот файл содержит метод, называемый «функция getFilterValues ​​(DataView, колонка) {...} "," function getFilterValuesByInput ($ input) {...} "и" function getAllFilterValues ​​(данные, столбец) {...} ", я отлаживаю его, но не получаю никакого успеха.

ответ

3

наконец, много всяких отладок я получил решение для фильтрации записей здесь я не трогаю библиотеки скользких сеток, это Awsome библиотеки согласно моему опыту так на основании моего требования я сделал некоторые изменения в файле ext.headerfilter.js перейти к функции getFilterValues ​​() и getFilterValuesByInput ($ input), внутри этой функции я сделал некоторые изменения для цикла и переменной ниже, код был реализован для getFilterValues ​​() и getFilterValuesByInput ($ вход)

function getFilterValues(dataView, column) { 
      var seen = []; 
      // for (var i = 0; i < dataView.getLength() ; i++) { 
      for (var i = 0; i < dataView.getItems().length ; i++) { 
       // var value = dataView.getItem(i)[column.field]; 
       var value = dataView.getItems()[i][column.field]; 

       if (!_.contains(seen, value)) { 
        seen.push(value); 
       } 
      } 


      return _.sortBy(seen, function (v) { return v; }); 
     } 

код getFilterValuesByInput ($ ввода)

function getFilterValuesByInput($input) { 
      var column = $input.data("column"), 
       filter = $input.val(), 
       dataView = grid.getData(), 
       seen = []; 

      // for (var i = 0; i < dataView.getLength() ; i++) { 
      for (var i = 0; i < dataView.getItems().length ; i++) { 
       // var value = dataView.getItem(i)[column.field]; 
       var value = dataView.getItems()[i][column.field]; 

       if (filter.length > 0) { 
        var mVal = !value ? '' : value; 
        var lowercaseFilter = filter.toString().toLowerCase(); 
        var lowercaseVal = mVal.toString().toLowerCase(); 
        if (!_.contains(seen, value) && lowercaseVal.indexOf(lowercaseFilter) > -1) { 
         seen.push(value); 
        } 
       } 
       else { 
        if (!_.contains(seen, value)) { 
         seen.push(value); 
        } 
       } 
      } 

      return _.sortBy(seen, function (v) { return v; }); 
     }