如何使用javascript、jquery或其他javascript框架过滤数据
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中看到过一个例子,它似乎不必要地复杂。。。但也许它比我想象的更复杂。
谢谢你的任何帮助,或者能够为我指明正确的方向。
edit-我完全愿意重新格式化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' }
]
}
]
});
}
});
Fiddle:http://jsfiddle.net/Q55ym/1/
您的意思是在JSON中循环,只查找带有过滤器的条目?首先,将JSON中的过滤器更改为'filters':'1'
、'filters':'12'
或'filters':'13'
或其他类型。只需将过滤器放入一个字符串中。
然后使用这个:
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
相关文章:
- 在其他javascript框架模板中运行angular指令
- 如何使用javascript、jquery或其他javascript框架过滤数据
- 如何将javascript框架注入ChakraBridge上下文
- 用于绘制工作流图的JavaScript框架
- 用于chrome-ext.开发的简单而流行的javascript框架
- 客户端的JavaScript框架
- 将Javascript框架与Java Web框架集成
- 做全栈JavaScript框架在客户端或服务器上创建HTML
- 服务器端javascript框架
- Javascript框架中的美元符号
- 主要JavaScript框架/库的列表
- 哪种javascript框架适合开发以php为后端的单页应用程序
- 使用 JavaScript 框架的设计器工作流
- 我应该将javascript框架与我的应用程序捆绑在一起还是使用公共CDN
- Q(Q框架)是什么意思?(异步JavaScript框架)
- 这些 Node.js 和 JavaScript 框架是什么,它们做什么
- 哪个JavaScript框架对新手来说更容易:Ember.js,Canjs,Angular.js
- 是否可以在GWT或任何其他JavaScript框架中选择垃圾收集算法
- JavaScript 框架,用于构建动态但服务器端驱动的前端
- $super Classy JavaScript 框架中的探测器