jquery - Forcing jqGrid to use JSON for create/delete/update -
i'm starting use jqgrid display/add/edit/delete data coming rest service using json. reading data works fine, other operations such add,delete cause server error because i'm doing post of parameters using query string server expecting json content:
$(document) .ready( function() { $("#list") .jqgrid( { url : 'http://localhost:8888/rest/service', datatype : 'json', mtype : 'get', colnames : [ 'name', 'city', 'country'], colmodel : [ { name : 'name', index : 'name', width : 150, editable : true }, { name : 'city', index : 'city', width : 150, editable : true }, { name : 'country', index : 'country', width : 200, editable : true } ], pager : '#pager', rownum : 10, rowlist : [ 10, 20, 30 ], sortname : 'invid', sortorder : 'desc', viewrecords : true, gridview : true, caption : 'data report', jsonreader : { repeatitems : false, }, editurl : "http://localhost:8888/rest/service/operate", datatype : 'json' }); jquery("#list").jqgrid('navgrid', '#pager', { edit : false, add : true, del : true, search : true }); }); in thread i've found suggestion use following function force json content operations i've checked works "add" operation- not work if attempt edit/delete row grid (still sending query string instead of json content)
jquery.extend( jquery.jgrid.edit, { ajaxeditoptions: { contenttype: "application/json" }, recreateform: true, serializeeditdata: function(postdata) { return json.stringify(postdata); }, aftersubmit: function (response, postdata) { var res = jquery.parsejson(response.responsetext); return [true, "", res.d]; } } ); is there easier way fix issue within grid definition ? thanks!
update: i've updated code suggested @lucasdc error "no url set". seems urls have indicated have not been included in grid. here follows code:
$(document) .ready( function() { $("#list") .jqgrid( { url : 'http://localhost:8888/rest/service', datatype : 'json', mtype : 'get', colnames : [ 'name', 'surname', 'address'], colmodel : [ { name : 'name', index : 'name', width : 150, editable : true }, { name : 'surname', index : 'surname', width : 150, editable : true }, { name : 'address', index : 'address', width : 200, editable : true } ], pager : '#pager', rownum : 10, rowlist : [ 10, 20, 30 ], sortname : 'invid', sortorder : 'desc', viewrecords : true, gridview : true, caption : 'data report', jsonreader : { repeatitems : false, } }); jquery("#list").jqgrid('navgrid', '#pager', { edit : true, add : true, del : true, search : true }); $("#list").jqgrid( //edit options { url:"http://localhost:8888/rest/service/operate", closeafteredit:true, reloadaftersubmit:true, onclicksubmit: function(params, postdata) { return json.stringify(postdata); }, aftersubmit: function(response, postdata) { var res = jquery.parsejson(response.responsetext); return [true, "", res.d]; } }, //add options { url:"http://localhost:8888/rest/service/operate", closeafteradd:true,reloadaftersubmit:true, onclicksubmit: function(params, postdata) { return json.stringify(postdata); }, aftersubmit: function(response, postdata) { var res = jquery.parsejson(response.responsetext); return [true, "", res.d]; } }, //del options { url:'http://localhost:8888/rest/service/operate', onclicksubmit: function(url, postdata){ return json.stringify(postdata); }, aftersubmit: function(response, postdata) { var res = jquery.parsejson(response.responsetext); return [true, "", res.d]; } }, {}, //search options {} //refresh options ); }); </script> </head> <body> <table id="list"> <tr> <td /> </tr> </table> <div id="pager"></div> </body>
if straight, want send json data on edit/add/delete operations in grid. if that's goal, can make on onclicksubmit each of operations. first of all, you'll have enable these operations:
$("#list").jqgrid('navgrid', '#pager', {edit:true,add:true,del:true,search:false,refresh:false}, // enable // set options each of operations: // edit options { url:"your_edit_url", closeafteredit:true, reloadaftersubmit:true, onclicksubmit: function(params, postdata) { return json.stringify(postdata); }, aftersubmit: function(response, postdata) { var res = jquery.parsejson(response.responsetext); return [true, "", res.d]; } }, // add options { url:"your_add_url", closeafteradd:true,reloadaftersubmit:true, onclicksubmit: function(params, postdata) { return json.stringify(postdata); }, aftersubmit: function(response, postdata) { var res = jquery.parsejson(response.responsetext); return [true, "", res.d]; } }, // del options { url:'your_del_url', onclicksubmit: function(url, postdata){ return json.stringify(postdata); }, aftersubmit: function(response, postdata) { var res = jquery.parsejson(response.responsetext); return [true, "", res.d]; } }, {}, // search options {} // refresh options
Comments
Post a Comment