如何使用javascript，jquery或其他javascript框架過濾數據？

Question

舉個例子，我有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，如果這樣做更容易。

Answer 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

Answer 2

我有點不確定您發送過濾的對象，但我想這是你想要過濾的值而不是密鑰。我也猜測，響應是一個包含對象的數組。

首先，我將創建一個數組，複選框添加和刪除值。顯示一個輸入的位置，但都應該指向同一個數組：

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 

    } 

這也使它的工作「對飛」，你點擊複選框。

Answer 3

看看ExtJS。它有一個對象「存儲」，它可以存儲結構化數據並允許對其進行操作，如排序，過濾和查詢。 例如你的任務是可以解決這樣的：

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/