Retrieve queries for Jqgrid data with a custom form form

The information is as follows: Http://stackoverflow.com/questions/5819071/jqgrid-custom-form-to-search-data-select-box-problem

Jqgrid offers a variety of search methods, as described in Jqgrid wiki documentation Http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

However, the search box provided is ejected from the table grid, as shown in the following two graphs.

Singe Search:

650) this.width=650; "Src=" Http://www.trirand.com/jqgridwiki/lib/exe/fetch.php?media=wiki:simplesearch2.png " Width= "686" height= "239" alt= "Fetch.php?media=wiki:simplesearch2.png"/>

Advanced Search:

650) this.width=650; "Src=" Http://www.trirand.com/jqgridwiki/lib/exe/fetch.php?media=wiki:complexsearch.png " Width= "729" height= "319" alt= "Fetch.php?media=wiki:complexsearch.png"/>

But if we want to use the traditional form table forms to retrieve the data from the Jqgrid table, like this (form and jqgrid two are randomly drawn together to illustrate the desired effect):

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/57/16/wKiom1SQ-gKDEznBAAH-WdsoJv0668.jpg "title=" QQ picture 20141217113548.jpg "alt=" Wkiom1sq-gkdeznbaah-wdsojv0668.jpg "/>

What should we do? Here's how:

First of all, form form and Jqgrid of course to write well, here no longer repeat.

Secondly, the query button with JS for the form to add the response function, take the form input value, modify the acquisition parameters, and the new parameters reload grid, as follows:

$ ("#searchForm"). Submit (function () {var client = $ ("#client"). Val (); var amount = $ ("#amount"). Val (); var tax = $ ("#tax"). Val (); $ ("#list"). Jqgrid ("Setgridparam", {url: "${data?client=" + client + "&amount=" +amount+ "&tax=" +tax, page : 1, DataType: "JSON"}). Trigger ("Reloadgrid"); });

The server background data path is completed to retrieve the parameters of the database after the query and into the JSON format.

Note that if a form is written in a form other than a div, when the query is completed, the form automatically commits the entire page refresh rather than just the data in the Jqgrid, causing the query to be invalid, so add onsubmit= "return false" to the form label. Avoid automatic submission of form forms.

Retrieve queries for Jqgrid data with a custom form form