Способы создания системы фильтрации для html-таблицы - PullRequest
Новая
       17

Способы создания системы фильтрации для html-таблицы

0 голосов
/ 16 апреля 2019

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

Через XMLHttpRequest, называемый Php-Script, создает (данные предоставлены sql-database): 

//History_ID
<tr data-filter='203545' data-filter-table='historycontext'>
    <td data-filter='time'>
        <span class="at-filter" data-filter='2019-16-04'>
            2019-16-04
        </span>
    </td>
    //User responsible for change
    <td data-filter='username'>
        <span class="at-filter" data-filter='jdoe'>
            jdoe
        </span>
    </td>
    //Actual change can be change in adress, keywords, name, etc. pp.
//{
    <td data-filter='change'>
        <span class="at-filter" data-filter='keyword'>
            Keyword
            //Keyword_ID
            <span class="at-filter" data-filter='2423'>
                CEO
            </span>
            <span class="at-filter" data-filter='withdrawn'>
                withdrawn
            </span>
        </span>
    </td>
//}OR{
    <td data-filter='change'>
        <span class='at-filter' data-filter='address'>
            <span data-filter='LoremIpsum'>
                LoremIpsum
            </span>
            changed to
             <span data-filter='DolorSit'>
                DolorSit
            </span>
        </span>
    </td>
//} (for example)
    <td>
        <div>
            //RevertChangeFunc
        </div>
    </td>
</tr>

По сути, я хочу иметь возможностьфильтровать за клик на каждом отрезке, предоставляя все больше и больше данных для обеспечения более точного фильтра.(За клик по ключевому слову я фильтрую все ключевые слова, за клик по генеральному директору i фильтрую все изменения, относящиеся к ключевому слову CEO и т. Д.). Эта созданная DOM-структура передается функции jquery, которая создает объект на промежуток (каждый, максимумколичество на страницу составляет примерно 200 пролетов) и привязывает метод фильтра contextmenu к элементу.

my ajaxTable создает объект obj и contextmenu следующим образом: 

loadTableContent: function() {
    //Get DOM Structure as JSON-response in form of
    // response.rows = {
    //  0 = single td    
    //}
    $('span.at-filter').each( function(ele) {
        getFilterObj({}, ele, ele);
    }
getFilterObj: function(obj, ele, eleForContextMenu) {
    obj[] = ele.attr('data-filter');
    if (ele.parent().prop("tagName") != 'tr') {
        getFilterObj(obj, ele.parent, eleForContextMenu);
    } else {
        setFilterMethod(obj, ele.parent, eleForContextMenu);
    }
}
setFilterMethod: function(obj, ele) {
    //do some stuffz -> create dataFilter
    //this is here the ajaxtable with the method openContextMenu
    $(ele).bind('contextmenu', dataFilter, this.openContextMenu);
}

Могу ли я как-то сделать это без использованияатрибуты данных как бы раздувают мой HTML.И есть ли способы сделать это проще?Могу ли я, например, связать объект jquery с элементом dom, чтобы мне не нужно было вызывать getFilterObj рекурсивно (не используя 2000 различных data-attr)?Мысль об использовании классов, которые вызывают отображение: нет / блок (например: нажмите на ключевом интервале -> отключает все промежутки без ключевого слова в качестве классов).У кого-нибудь есть идея?Метод filter и все работает просто отлично, но он довольно медленный и на самом деле HTML-код выглядит некрасиво (IMO).И эта таблица (с ее функцией фильтрации) должна использоваться в разных случаях (например, в участии в событиях), и поэтому должна быть максимально динамичной, например.количество столбцов или необходимые параметры фильтра ((например, событие, местоположение, время, участие (true, false), ivitation, ...) для участия в событии) изменятся.

...