Jqgrid commonly used additions and deletions to check the demo and frequently asked questions

Source: Internet
Author: User
Tags jqgrid


1,jqgrid the first load method, and the method that the query button can execute

Method 1jQuery ("#tableId"). Jqgrid ({ url:  "/jqgrid/select.html",         //send data         postdata: {"stock":  $ ("#stock"). Val (),   "Name":  $ ("#lastSales"). Val ()},        //Send Way          mtype:  "Get",         datatype :  "JSON",         //table height          height: 400,        //Column Name          colnames: ['   ',  ' ID ',  ' last sales ',  ' Name ',  ' Stock ',   ' Ship via ',  ' Notes ', ' Amt '],         ...}) As the most commonly used Jqgrid method, it plays a role in rendering the page and initializing some methods, and the subsequent effect is only when the method renders HTML such as table. Moreover, this method is only triggered when the page is loaded for the first time. But we do the page display, generally have to have the query button, this method is obviously not applicable, if the method is wrapped in $ ("#buttonId"). Click, there is no triggering. The specific source code is not clear. (The first time I do the query button, that is, the debug found that the code is a step-by-step down, is not adjustable to the background) then the query button should use what method, or this method, just take the parameters. This method is jqgrid the corresponding button can trigger the Query method (and must be Method 1 render a good page before you can use)  $ (grid_selector). Jqgrid (' Setgridparam ', {         url:  "/jqgrid/select.html",         //send data         postdata: {"stock":  $ ("#stock"). Val (),   "Name":  $ ("#lastSales"). Val (),  "note":  $ ("#notes"). Val ()},         page: 1,        //This method is finished loading          loadComplete: function  (XHR)  {             alert ("Query Complete" +xhr.result);         }    }). Trigger ("Reloadgrid");//Reload


2, the button can be triggered by adding and removing methods,

If you do not want to use the Jqgrid left lower corner of the navigation bar and other changes, then you can use these methods

$ ("#buttonForEdit"). Click (function () {    //GR is the Id    var to get   edit rows  gr = jquery ("#grid-table"). Jqgrid (' Getgridparam ',  ' Selrow ');     if   (Gr != null)  jquery ("#grid-table"). Jqgrid (' Editgridrow ',                                                     gr,                                                   { height: 300, reloadAfterSubmit: false         });  &nBsp;  else alert ("Please select row");}); $ ("#buttonForInsert"). Click (function () {    jquery ("#grid-table"). Jqgrid (' Editgridrow ',   "New",  { height: 300, reloadaftersubmit: false }); $ ("#buttonForDelete"). Click (function () {        var gr =  jquery ("#grid-table"). Jqgrid (' Getgridparam ',  ' Selrow ');         if  (gr != null) {             Var result=jquery ("#grid-table"). Jqgrid (' Delgridrow ',  gr, { reloadaftersubmit: false  });         alert (result);}         else alert ("please select row to  Delete! ");});

For additions and deletions, many people will ask, where the URL is filled in,

In fact Jqgrid for these three URLs, the default is one, is the method of rendering the page a parameter, Editurl.

How do you tell the difference? For this, Jqgrid submits the URL in the background, he will add a property called Oper by default

if it's edit,url, it's going to be Http://www.xx.com/edit.html?name=xxx&age=xxx&oper=edit

If it was update,url, it would be http://www.xx.com/edit.html?name=xxx&age=xxx&oper=add.

If it was delete,url, it would be http://www.xx.com/edit.html?name=xxx&age=xxx&oper=del.

So the background can be based on Oper to determine what the operation.


Many people will ask, the navigation bar comes with the small button of add and edit, if successful, how to prompt.

I don't know about this, either.

But I found an event that could have this effect.

Aftercomplete:function executes the callback function triggered after add and edit to receive data returned in the background

Aftercomplete:function (XHR) {alert (xhr.responsetext); },//close this window after success Closeafteradd:true

xhr={readystate=4,responsetext= "Background returned information" status=200 ...}

So the backend needs to return information such as sunccess or error.



Jqgrid commonly used additions and deletions to check the demo and frequently asked questions

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.