Single field searching

Single field searching is a way to search data (at server) on one field at a time. When using this method we construct a modal form where the user can select a field and condition to apply the search.

This method uses the url to post the search data and differ from the custom and toolbar search methods. The difference is that the posted search data is not in pair name:value. See below how data is posted.

In order to use this method the following modules should be included when downloading the grid: Common, Form Edit, Search Plugin. For more information refer to Download

<script>
... 
jQuery("#grid_id").searchGrid( options );
...
</script>

or using the new API

<script>
... 
jQuery("#grid_id").jqGrid('searchGrid', options );
...
</script>

Where

• grid_id is the id of the already constructed grid
• options is an array of settings in name: value pairs format.

Typically when this method is called it launches the modal dialog and makes the grid inaccessible until the dialog is not closed.
This method is the default search method in the navigator if the search is enabled. The search parameters in navigator can be set the same way as the options described below.

<script>
...
jQuery("#grid_id").jqGrid({
...
   pager : '#gridpager',
...
}).navGrid('#gridpager',{view:true, del:false}, 
{}, //  default settings for edit
{}, //  default settings for add
{},  // delete instead that del:false we need this
{search_options}, // search options
{} /* view parameters*/
);
...
</script>

By default the dialog appears at upper left corner of the grid. It is important to know that this modal does not use the common jqGrid modal functions, but its own. The reason for this is that this is separate plugin. In order to manipulate the modal you should consider the following items in the ui-jqgrid.css file (or use the jquery.searchFilter.css from development package)

.ui-searchFilter { display: none; position: absolute; z-index: 100; width: 100%; height: 100%; overflow: visible;}
.ui-searchFilter table {position:relative;}
.ui-searchFilter .ui-state-default { cursor: pointer; }
.ui-searchFilter .divider { height: 1px; }
.ui-searchFilter .divider div { background-color: black; height: 1px; }

We add a new optyon overlay (default true) in serch dialog. If set to false the cover overlay is disabled and the user can interact with the grid. If you want to center the dialog maybe you can change the .ui-searchFilter table to

.ui-searchFilter table {position:relative; margin: 7px auto;}

This method uses the following properties from language file grid.locale-xx and the can be passed in the options array of the serch method

$.jgrid = {
...
   search : {
     caption: "Search...",
     Find: "Find",
     Reset: "Reset",
     odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'],
     groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ],
     matchText: " match",
     rulesText: " rules"
   },
...

As mentioned above posting search data differs from custom and toolbar searching. When the find button is clicked, jqGrid adds three parameters to the url (again with _search=true), in name=value pairs:

• sField: the 'searchField', the value comes from the index in colModel
• sValue: the 'searchString', the value is the entered value
• sOper: the 'searchOper', the value is the type of search - see sopt array

For example if the field index is invid, operation is equal, and the searched value is 123, then the string that is posted to the server look like:

http://localhost/demo35/server.php?...&searchField=invid&searchString=123&searchOper=eq