Jqgrid and struts2 Combination Application (6) -- use colmodel to set the query function

The previous article mainly describes how to combine the action class for queries and several main methods of queries.

In the searchgrid method, the options we pass in defines the general attributes required for the query. For example, when you click the query button, the displayed query dialog box contains columns in the grid as optional query conditions, the comparison methods are all equal to, not equal to, less than, less than or equal to, greater than or equal to, starting at, not starting at, and so on.

If we do not want users to use so many query conditions, or if a column is in the text format and cannot have problems such as greater than or less, how can we target different columns, define the composition of these conditions?

We can use the options attribute of colmodel to overwrite some settings in the options attribute of searchgrid, so as to set different query styles for different columns.

In the first article of this series, we have introduced some common options of colmodel. The following describes three options related to colmodel and query:

• Search
  
  : Determines whether the column is used as a query condition. The default value is true.
• Stype
  
  : Determines the input mode of the column; text: creates an input box; select: Creates a select drop-down list.
• Searchoptions
  
  : Specific options for query. Note that this option is different from the options Option of the searchgrid method.

The following describes the various attributes of the searchoptions option (For details, refer to the official document http://www.trirand.com/jqgridwiki/doku.php? Id = wiki: singe_searching
):

• Dataurl
  
  : This attribute is valid only when the Stype attribute of colmodel is "select". This option indicates where to load the select element. When this attribute is set, jqgrid uses the Ajax request to obtain a valid select HTML to fill in the select drop-down menu position. For example, <SELECT> <option value = "1"> one </option> <option value = "2"> two </option> </SELECT>; this process is only executed once.
• Buildselect
  
  : This attribute is valid only when dataurl is set. You can use this custom method when a valid select HTML element cannot be constructed from the server, generate a complete and valid select HTML element. The parameter of this method is the server's response.
• Datainit
  
  : If this option is set, the method corresponding to this option is executed once when the HTML element is created. For the formulated method, the HTML element is passed as a parameter.
• ATTR
  
  : The value of this option is an object. It is used to set the legal attributes of an HTML element when it is created.
• Searchhidden
  
  : By default, the hidden columns in the grid table are not listed with query conditions. If you still need to list hidden columns as query conditions, set the searchhidden option of this column to true.
• SOPT
  
  : Similar to the SOPT option of the searchgrid method (see the previous article), which is used to specify the condition comparison method. If this parameter is not set, all methods are used by default, that is, ['eq ', 'ne', 'lt ', 'le', 'gt', 'ge ', 'bw ', 'bn', 'in', 'ni', 'ew ', 'en', 'cn', 'nc'].
• Defaultvalue
  
  : Query the default value in the input box.

For these options, the previous example seems simpler. To demonstrate these options, I will use a new example. The specific server-side code will not be pasted (similar to the previous example on the server side). I will mainly look at the client-side changes.

JavaScript code:

$ (Function () {<br/> $ ("# gridtable "). jqgrid ({<br/> URL: "listpatentcases. action ", <br/> datatype:" JSON ", <br/> Height: 350, <br/> width: 700, <br/> colmodel: [<br/> {name: "ID", index: "ID", label: "No.", width: 60, sorttype: "int", sortable: false, <br/> searchoptions: {<br/> SOPT: ["EQ", "ne", "LT", "Le", "GT ", "Ge"] // (1) Adjust the comparison method <br/>}< br/>}, <br/> {name: "internalno", index: "internalno ", label: "Internal code", width: 120, searchoptions: {SOPT: ["EQ", "ne", "BW", "bn", "ew ", "EN", "cn", "nc"]}, sortable: false },< br/> {name: "name", index: "name", label: "name", width: 120, searchoptions: {SOPT: ["EQ", "ne", "BW", "bn", "ew", "en ", "cn", "nc"]}, sortable: false}, <br/> {name: "applicationno", index: "applicationno", label: "Application No.", width: 90, searchoptions: {SOPT: ["EQ", "ne", "BW", "bn", "ew", "en", "cn ", "nc"]}, sortable: false },< br/> {name: "patentcasetype. caption ", index:" patentcasetype ", label:" type ", width: 60, sortable: false, <br/> searchoptions :{< br/> SOPT: ["EQ", "ne"], <br/> stype: "select", // (2) <br/> dataurl :". /JS/patentcasetypeselect.html "// (3) request the select element from the server and load it into the query dialog box <br/>}< br/>}, <br/> {Name: "patentcasetype. _ name ", index:" patentcasetype_name ", label:" type encoding ", width: 80, hidden: True, search: false, sortable: false }, <br/> {name: "applieddate", index: "applieddate", label: "application date", width: 100, formatter: "date", sortable: false, <br/> searchoptions: {<br/> SOPT: ["EQ", "ne", "LT", "Le", "GT", "Ge"], <br/> datainit: function (ELEM) {// (4) the input box element will be passed into the method function as a parameter <br/> $ (ELEM ). datepicker (); // (5) set the input box to the date selection box <br/>}< br/>}, <br/> {Name: "createddate", index: "createddate", label: "creation date", width: 100, formatter: "date", sortable: false, searchoptions: {SOPT: ["EQ", "ne", "LT", "Le", "GT", "Ge"], datainit: function (ELEM) {<br/> $ (ELEM ). datepicker (); <br/>}}, <br/> {name: "firstapplicant. ID ", index:" firstapplicant_id ", label:" First requester ID ", width: 80, sortable: false, hidden: True, <br/> searchoptions: {<br/> SOPT: ["EQ", "ne"], <br/> searchhidden: True // (6) you can set this hidden column as a query condition <br/>}< br/>}, <br/> {name: "firstapplicant. fullname ", index:" firstapplicant ", label:" First applicant ", width: 80, sortable: false, <br/> Search: false // (7) setting this column cannot be used as a query condition <br/>}, <br/> {name: "firstinventor. ID ", index:" firstinventor_id ", label:" First inventor ID ", width: 80, searchoptions: {SOPT: [" EQ "," ne "], searchhidden: true}, sortable: false, hidden: true}, <br/> {name: "firstinventor. fullname ", index:" firstinventor ", label:" First inventor ", width: 80, search: false, sortable: false },< br/> {name:" firstcontact. ID ", index:" firstcontact_id ", label:" First Contact ID ", width: 80, searchoptions: {SOPT: [" EQ "," ne "], searchhidden: true}, sortable: false, hidden: true}, <br/> {name: "firstcontact. fullname ", index:" firstcontact ", label:" First Contact ", width: 80, search: false, sortable: false },< br/> {name:" firstattorney. ID ", index:" firstattorney_id ", label:" First Agent ID ", width: 80, searchoptions: {SOPT: [" EQ "," ne "], searchhidden: true}, sortable: false, hidden: true}, <br/> {name: "firstattorney. fullname ", index:" firstattorney ", label:" First Agent ", width: 80, search: false, sortable: false} <br/>], <br/> sortname: "ID", <br/> sortorder: "DESC", <br/> viewrecords: True, <br/> rownum: 15, <br/> rowlist: [15, 50, 100], <br/> prmnames: {search: "Search" },< br/> jsonreader :{< br/> root: "gridmodel", <br/> records: "record", <br/> repeatitems: false <br/>}, <br/> Pager: "# gridpager", <br/> caption: "case list ", <br/> hidegrid: false, <br/> shrinktofit: false </P> <p> }). navgrid ("# gridpager", {<br/> EDIT: false, <br/> Add: false, <br/> Del: false <br/> }); <br/> });

 

Note:
(1) the comparison method is adjusted. Only the following types are retained: equal to, unequal, less than, less than or equal to, greater than, and greater than or equal.

(4) (5) This is a typical application of the datainit option, that is, the function is called when the query dialog box is initialized. This is also an example in the official document. In the query dialog box, create a date selection column.

(6) set this hidden column as a query condition.

(7) This column cannot be used as a query condition.

(2) (3) When stype is true, the dataurl setting will be valid. Jqgrid sends a request to the server according to the address in dataurl to obtain the response containing the complete and valid select element.

Note: This is an Ajax request, while datatype is HTML. If you have used $. ajaxsetup to set ype to another format on the page, errors may occur here. Be especially careful.

 

The complete content of the address in dataurl:

<SELECT> <br/> <option value = '1'> invention </option> <br/> <option value = '2'> Design </option> <br /> <option value = '3'> Utility Model </option> <br/> </SELECT>

 

 

 

 

Through the above examples, we can see that the colmodel option can control the relationship between conditions and columns in the query dialog box, and the characters of various conditions in the dialog box.

 

 

For a brief summary of the query, there are three entries for the query settings:

• Prmsearch parameters in the navgrid method;
• Options of the searchgrid method;
• Stype and searchoptions in colmodel;

You need to carefully analyze and identify the usage. For details, refer to the official documentation.