What changed in jqGrid:
After an evaluation of jqGrid as a contender for data grid presentation widget, some month ago, I complained about jqGrid's inability to reroute "Edit" "Add" "Del" row calls to local functions. All calls were hardwired directly into jQuery.ajax() call. Since this commit, not anymore ...Latest code in GitHub now is patched to support rerouting of the Edit (Add and Edit) and Del (Del) calls to a function that takes the same old ajaxOptions object, with all its callbacks. This effectively allows all "useful" data manipulation for jqGrid to be offloaded to a local, in-browser resource, like "Local Storage" 'Data Store / Proxy' function or some other structure that abstracts the underlaying data source from jqGrid.
How to use the new feature:
Same example as before - http://www.accentsolution.com/static/jqgrid_localstore.htmlAll the magic is in 'testing.js' There is quite a bit of different test code in there, so here are the specific parts that show the diversion of Edit / Delete row calls to a local function (note new dataProxy property):
var divname = 'thegrid', o = jQuery("#"+ divname)
o.jqGrid({
postData: {
"filterrules": {"groupOp":"AND","rules":[
{"field":"data.note","op":"cn","data":"note"}
]},
"viewid": "someview"
},
datatype: postdatareroute, // this is repackaged and feed to dataproxyfn.
dataProxy: dataproxyfn,
dataStore: sampleDataStore.DataStore(),
colModel :[
{name:'data.invid', label:'Inv ID', sortable:true, search:true, editable: false},
{name:'data.amount', label:'Amount', sortable:true, sorttype: 'float', search:true, editable: true, edittype:'text',
width:80, align:'right', formatter:'currency', formatoptions:{decimalSeparator:",", thousandsSeparator: ".", decimalPlaces: 2, prefix: "$ "}},
{name:'data.taxable', label:'Apply Tax', sortable:true, search:true, editable: true, edittype:'select',
editoptions:{value:{'yes':'Yes','no':'No'}}, stype:'select'},
{name:'data.note', label:'Note', sortable:true, search:true, editable: true, edittype:'text', width:150 }
],
jsonReader : {
page: "currpage",
total: "totalpages",
records: "recordcount",
repeatitems: false,
root: "records",
cell: "data",
id: "id"
},
caption: 'Sample grid',
sortable: true, // this allows column reordering.
pager: '#pagerfor'+divname,
gridview: true, // Accelleration of rendering. Disables some rendering modes.
autowidth: true,
height: 'auto',
rowNum: 10,
hoverrows: false,
multiselect: true,
multiboxonly: true,
rowList: [10,30,50],
sortorder: 'desc',
viewrecords: true
});
Setting dataProxy parameter is really all you need to divert the Add, Edit, Delete calls from $.ajax() to you custom fn. (Note, by default diversion is OFF. You either have to pass a right setting to the edit call or just omit 'editurl' and 'url' settings from your grid to have all calls rerouted to your function.)Function behind dataProxy takes 2 arguments. 3 If you include this object:
function dataproxyfn(ajaxOptions, actionid)
What gets sent to dataProxy is something that looks a lot like what gets sent to the function behind datatype, with one exception - we get the whole ajaxOptions object, loaded with 'success', 'error' callbacks.
0 comments:
Post a Comment