EditableGrid - Как сделать каждый заголовок столбца отдельным фильтром - PullRequest
0 голосов
/ 22 февраля 2019

Я использую EditableGrid (http://www.editablegrid.net/), который создает несколько симпатичных редактируемых таблиц

Я пытаюсь изменить заголовок таблицы, чтобы превратить их в отдельные фильтры, как в примере - https://phppot.com/demo/column-search-in-datatables-using-server-side-processing/

Текущее текстовое поле Текущий фильтр работает очень хорошо, но имеет ограничение для поиска по одному значению для всех столбцов.

Я нашел много решений для отдельного фильтра столбцов, но я не хочу использовать другиеТаблицы, поскольку они не обеспечивают функциональность редактирования встроенных таблиц с помощью выпадающего списка и выбора даты. Есть ли способ, которым я могу реализовать это в EditableGrid?

Я также задавал этот вопрос на Github (https://github.com/webismymind/editablegrid-mysql-example/issues/66), нопоток не был активен в течение длительного времени, поэтому я очень мало надеюсь получить решение оттуда.

1 Ответ

0 голосов
/ 24 февраля 2019

В index.html обновите этот код: посмотрите, где // начинается новый код ---- и // новый код ---- заканчивается, попробуйте ..

<script type="text/javascript">

                var datagrid; 

                window.onload = function() { 
                  datagrid = new DatabaseGrid();

//new code ---- starts 

var list = document.getElementsByTagName("thead")[0];
for(var i = -1; i < list.childNodes.length; i++){

    var input = document.createElement("input");
                input.type = "text";
                input.className = "filter";
  list.getElementsByTagName("th")[i+1].appendChild(input);
}
var z = document.getElementsByClassName('filter')
for(var i = 0; i< z.length; i++){
  z[i].addEventListener("input", function(e){      

  datagrid.editableGrid.filter( e.target.parentNode.querySelector("input").value, [i]);
  })
}  

//new code ---- ends

                    // key typed in the filter field
                    $("#filter").keyup(function() {
                      datagrid.editableGrid.filter( $(this).val());
                        // To filter on some columns, you can set an array of column index 
                        //datagrid.editableGrid.filter( $(this).val(), [0,3,5]);
                      });
                    $("#showaddformbutton").click( function()  {
                      showAddForm();
                    });
                    $("#cancelbutton").click( function() {
                      showAddForm();
                    });
                    $("#addbutton").click(function() {
                      datagrid.addRow();
                    });


        } 
    $(function () { 
        });
            </script>
...