[英]How to filter data using javascript, jquery, or some other javascript framework?
例如,我有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,如果這樣做更容易。
我不確定您發送的過濾器對象,但我想它是您要過濾的值而不是鍵。 而且我還猜想響應是帶有對象的數組。
首先,我將創建一個數組,復選框可以在其中添加和刪除值。 在此顯示一個輸入,但所有輸入都應指向同一數組:
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
}
當您單擊復選框時,這也將使其“運行中”。
看一下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/
您的意思是遍歷JSON以僅查找帶有過濾器的條目? 首先,將JSON中'filters':'1'
更改為'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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.