0

我有一个列表，其中包含我想通过打开/关闭（选择、单选、复选框）过滤并按字段（名称、日期、...）排序的项目。

下面的代码可以用于基本过滤，但这不是一个好方法。我想知道如何以专业的方式做到这一点。有什么好的 jQuery 插件吗？我不想要一个小部件，只是它背后的过滤/排序引擎。

# this code is pseudocode and not running! # 
<script>
// ready
$(function() {
    // get items
    var items = jQuery.parseJSON("items_json.php");

    // items filtered
    var items_filtered = new Array();

    // conditions/relations for filtering
    var filter1_relations = jQuery.parseJSON("filter1_relations.php");
    var filter2_relations = jQuery.parseJSON("filter2_relations.php");

    // build unfiltered list
    build_list(items);

    // build filtered list
    $(".filter").on("change", function() {
        items_filtered = run_filter1(items, filter1_relations);
        items_filtered = run_filter2(items_filtered, filter2_relations);
        build_list(items_filtered);
    });
});

// filters the 'items' by checking if a 'relation' exists
function run_filter1(items, relations) {
    items_filterd = new Array();
    $.each(items, function(key, item) {
        for (var i = 0; i < relations.length; i++) {
            if (...) {
                items_filtered.push(item);
            }
        }
    });
    return items_filtered;
}

// build list and add to #content
function build_list(items) {
    html = '<ul>';
    for (var i = 0; i < items.length; i++) {
        html += '<li>'+ items[i].name +'</li>';
    }
    html += '</ul>';

    $("#content").html(html);
}
</script>
Filter 1.1: <input type="checkbox" name="filter1_condition1" value="1" class="filter"/><br/>
Filter 1.2: <input type="checkbox" name="filter1_condition1" value="1" class="filter"/><br/>
Filter 2.1: <input type="checkbox" name="filter1_condition1" value="1" class="filter"/><br/>
Filter 2.1: <input type="checkbox" name="filter1_condition1" value="1" class="filter"/><br/>
<div id="content"></div>

我通过搜索 stackoverflow找到了这段代码，但它并不那么广泛。

提前致谢！

4

2 回答 2

1

instead of looping every time on change, once you have the data (providing you cannot structure your data before sending by server via sql or php or both), create right away the arrays for each filter

//loop data
//loop filter conditions
//if match
if (!filter_results[filter])   filter_results[filter]=new Array () 
filter_results[filter].push(data)

edit : can use index instead of push (it's faster) 

var i = -1;

then in the loop

filter_results[filter][++i]=data

(or an array of index if there are many of them, creating new one when creating the new Array))

so yes just like index then on change you just create your html from the good array

 var html='<ul><li>'+ filter_results[filterselected].join('</li><li>')+'</li></ul>'

one way or another, you'll have to loop through, with this way you'll just loop through it once for all (i had to deal with stg similar not long ago -receiving 100/200kb of pregzip data at each call- & after much thinking/experimenting/evaluating memory usage i went for that way)

于 2013-01-10T22:34:27.667 回答
1

我刚刚使用KnockOut实现了一个相当复杂的表单（有很多“如果选择了这个选项，这些项目应该变得可见”），这对于这类事情非常有用。

您需要在 KnockOut 视图模型中设置条件，然后您可以绑定这些条件，例如，仅在满足特定条件时才显示项目：

<input type="checkbox" data-bind="visible: filter1_condition1" value="1" class="filter"/>
于 2013-01-10T22:09:38.223 回答