0

例として、3 つのチェック ボックスがあります。

<input type="checkbox" name="filter[]" value="1">
<input type="checkbox" name="filter[]" value="2">
<input type="checkbox" name="filter[]" value="3">

次のように、PHPを使用してjsonを送信しています。

{'name': 'John Doe', 'title': 'CEO', 'filters': {'1':'2', '2':'3'}},
{'name': 'Jane Doe', 'title': 'COO', 'filters': {'1':'1', '2':'3'}},
{'name': 'Tim Doe', 'title': 'CFO', 'filters': {'1':'2'}}

チェックボックスをクリックして、対応するフィルターを持つレコードのみを表示する方法を理解しようとしています。それを簡単にするjqueryの何か、またはBackboneやKnockoutのようなフレームワークはありますか? Knockout の例を見たことがありますが、不必要に複雑に見えました... しかし、私が思っているよりも複雑かもしれません。

助けてくれてありがとう、または私を正しい方向に向けることができます。

編集- json の再フォーマットが容易になる場合は、完全にオープンです。

4

3 に答える 3

0

ExtJSを見てください。オブジェクト「store」があり、構造化データを保存して、並べ替え、フィルタリング、クエリなどの操作を行うことができます。たとえば、タスクは次のように解決できます。

Ext.application({
name: 'HelloExt',
launch: function() {
    Ext.create('Ext.data.Store', {
        storeId:'UsersStore',
        model: 'User',
        fields: [ 'id', 'name', 'title', 'filter1', 'filter2', 'filter3' ],
        data: [
            { name: 'Ed',    title: 'CEO', filter1: true, filter2: false, filter3: true },
            { name: 'Tommy', title: 'CTO', filter1: false, filter2: false, filter3: false },
            { name: 'Aaron', title: 'COO', filter1: true, filter2: true, filter3: true },
            { name: 'Jamie', title: 'CFO', filter1: true, filter2: true, filter3: false }
        ]
    });

    function filterStore() {
        var store = Ext.data.StoreManager.lookup('UsersStore');
        store.clearFilter();
        store.filter([
            { property: 'filter1', value: Ext.getCmp('Filter1CB').getValue() },
            { property: 'filter2', value: Ext.getCmp('Filter2CB').getValue() },
            { property: 'filter3', value: Ext.getCmp('Filter3CB').getValue() }
        ]);
    }

    Ext.create('Ext.container.Viewport', {
        layout: 'vbox',
        layoutConfig: {
            vbox: {
                align: 'stretch'
            }
        },
        items: [
            {
                xtype: 'panel',
                border: false,
                padding: 10,
                items: {
                    flex: 1,
                    xtype: 'fieldcontainer',
                    items: [
                        { fieldLabel: 'Filter1', xtype: 'checkbox', id: 'Filter1CB', handler: filterStore },
                        { fieldLabel: 'Filter2', xtype: 'checkbox', id: 'Filter2CB', handler: filterStore },
                        { fieldLabel: 'Filter3', xtype: 'checkbox', id: 'Filter3CB', handler: filterStore }
                    ]
                }
            },
            {
                flex: 1,
                xtype: 'gridpanel',
                title: 'Users',
                store: Ext.data.StoreManager.lookup('UsersStore'),
                columns: [
                    { header: 'Name',  dataIndex: 'name' },
                    { header: 'Title', dataIndex: 'title' }
                ]
            }
        ]
    });
}

}）;

フィドル： http： //jsfiddle.net/Q55ym/1/

于 2012-08-29T02:40:22.880 に答える
0

あなたが送信したフィルター オブジェクトについては少し確信が持てませんが、それはキーではなく、フィルター処理したい値だと思います。また、応答はオブジェクトの配列であると思います。

最初に、チェックボックスが値を追加および削除する配列を作成します。ここでは 1 つの入力を示していますが、すべてが同じ配列を指している必要があります。

var filterArray = [];
var input = document.createElement("INPUT");
input.value = "1";
input.onclick = function() {
    if (this.checked)
        filterArray.push(this.value); // Add value to array
    else
        filterArray.splice(filterArray.indexOf(this.value), 1); // Remove value from Array
    filterPersons(); // Run the filter function

}

次に、次のようなものを実行します。

function filterPersons() {
    var persons = phpResponse;
    var result = [];
    for (var x = 0; x < persons.length; x++) {
        var personFilters = persons[x].filters;
        for (var filter in personFilters) {
            if (personFilters.hasOwnProperty(filter) && filterArray.indexOf(personFilters[filter]) >= 0) // Check if value is in filterArray
                result.push(persons[x]); // Add person to a result array
        }

        displayResult(result); // Display the result somewhere

    }

これにより、チェックボックスをクリックすると、「その場で」動作するようになります。

于 2012-08-28T20:48:34.667 に答える
-1

JSONをループして、フィルターのあるエントリのみを検索するということですか？まず、JSONのフィルターを'filters':'1'または'filters':'12'またはまたはその他に変更します'filters':'13'。フィルタを1つの文字列に入れるだけです。

次に、これを使用します。

function filter(){
  var loadedJSON;  // load the json from php here,
                   //sort 'filter' by number from smallest to largest
                   //(so '312' becomes '123')

  for(var i in loadedJSON){
    String check="";

    if($("checkbox[name='filter[]'][value='1']").is(":checked"))check="1";
    if($("checkbox[name='filter[]'][value='2']").is(":checked"))check+="2";
    if($("checkbox[name='filter[]'][value='3']").is(":checked"))check+="3";

    if(i.filters.indexOf(check)>-1) // passed filters
  }
}

チェックボックスがチェックされているかどうかを判断するためにjqueryを使用しましたが、document.getElementsByName('filter[]')[0].checked

于 2012-08-28T20:45:36.730 に答える