jqGrid使用Backbone进行分页

Question

I see some examples of commercial app for support of MVC (asp.net) with jqGrid and I'm trying to determine the best approach in using the jQgrid with the Backbone.js client side mvc.

We are currently using a Backbone view that holds the jqgrid fine with smaller tables and 'local' datatype that is supplied by the backbone collection.

In order to support paging & virtualscroll I'd like to have the backbone model/collection support getting the data from the server and any search/filtering options and pass the output onto the view and jqgrid to update the grid with.

It seems the jqGrid has some hooks to events like beforeRequest, loadBeforeSend that I could hook into and do a collection call to make the ajax request and return the json and update the collection (making use of Addy's Backbone Paginator collection) but it seems jqgrid would still be doing the ajax call which seems incorrect to have the view in control instead of the model.

If I use a custom datatype I could trap the condition when the grid needs to fetch more data and have the bb collection supply that function and for the fetch for the data.

Is the custom datatype the best option is there better way to hook in a backbone model/collection to the jqgrid?

Answer 1

In a backbone environment, you NEED to have the table tied directly to the collection with appropriate listeners to update data, otherwise you're either relying on a static view -- which is the opposite of the reason you used backbone -- or you're going to spend countless hours hooking callbacks to update a grid that was never meant for anything live.

I've done datatables.net twice in a Backbone environment, and both attempts were a mess because I was essentially brute-forcing datatables to update it's own model, which was overkill. Likewise, trying to take advantage of Datatable's server-side options were pretty much out the window, because it conflicted with the Backbone system of Ajax transactions.

Take a look at Backgrid , which is built from the ground-up to be used with Backbone. Far and away, it's the simplest, cleanest, lowest overhead option I've found so far.