如何使用javascript，jquery或其他javascript框架过滤数据？

举个例子，我有3个复选框：如何使用javascript，jquery或其他javascript框架过滤数据？

<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，如果这样做更容易。

来源

2012-08-28 TerryMatula

像'Array＃filter'一样吗？或者当复选框被切换时，您是否遇到处理问题？ – Ryan

-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-28 20:45:36 DankMemes

我有点不确定您发送过滤的对象，但我想这是你想要过滤的值而不是密钥。我也猜测，响应是一个包含对象的数组。

首先，我将创建一个数组，复选框添加和删除值。显示一个输入的位置，但都应该指向同一个数组：

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-28 20:48:34

是的，这些值就是我要过滤的值。谢谢，这可能会让我走向正确的方向。 – TerryMatula

看看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/

来源

2012-08-29 02:40:22

如何使用javascript，jquery或其他javascript框架过滤数据？

回答

相关问题