Is there a way to update the results of a jQuery flexbox with a JSON 开发者_如何学Goarray? I have already created the flexbox, and I want to update its results.
I initialize my flexbox as follows:
$('#myFlex').flexbox({
"results": [
{ "id": "1", "name": "Ant" },
{ "id": "2", "name": "Bear" }
]},
{
allowInput: false,
paging: false,
maxVisibleRows: 8
});
This is taken from the documentation, and it works. Suppose I want to update the elements without reinitializing the flexbox. How can this be done?
Ok, so I hacked myself a solution!
Flexbox sets the data through the variable o.source
upon initialization.
What I did was store (and access) o.source
as jQuery .data()
. This allows me to view/change the value.
While experimenting with this same problem, I found out that jQuery Flexbox stores the data passed as a reference. This means that you can do this:
var data = {results: [{id:1,name:'Ant'},{id:2,name:'Bear'}], total:2};
$('#myFlex').flexbox(data);
// ...
data.results[data.total] = {id:3,name:'Cat'};
data.total++;
with the stock plugin and it will work. The only thing to keep in mind is that you must remember to also update the .total
property when adding new elements.
You've not specified how you've initialized flexbox or how you're getting the data back. However, according to the documentation and the demos, the JSON property named results
is used to get the rows of data when you've specified a URL. This should all happen automatically. For example (straight from the docs):
$.ready(function() {
// results.aspx is the page that returns json data in the expected format
$('#fb').flexbox('results.aspx');
});
Sample response:
{"results":[
{"id":1,"name":"Ant"},
{"id":2,"name":"Bear"},
{...} // more results here...
]}
Alternatively, you should be able to use resultsProperty
to specify a different property name.
精彩评论