Question

我正在尝试为地址管理工具中的（动态生成的）历史记录可过滤表创建过滤系统。当前，每个数据过滤器属性都会传递所有需要的数据。

通过称为Php-Script的XMLHttpRequest创建（数据由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>

基本上，我希望能够通过提供越来越多的数据来过滤每个跨度上的每次点击，以实现更精确的过滤。（每次点击关键字我都会过滤所有关键字，每次点击CEO我都会过滤所有包含关键字CEO的更改，等等。每页的数量大概是200个跨度），并将contextmenu过滤方法绑定到该元素。

我的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）吗？考虑使用触发显示的类：无/阻止（例如：单击关键字span->禁用所有不包含关键字的span作为类）。有人知道吗？过滤器方法和所有方法都工作正常，但是有点慢，实际上使HTML代码看起来很难看（imo）。并且该表（及其过滤功能）应该在不同的场合（例如，事件参与）使用，因此必须尽可能地动态。列数或所需的过滤器设置（例如，用于事件参与的（事件，位置，时间，参与（正确，错误），参与…））将发生变化。

为html表创建filtertin系统的方法

0 个答案: