Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
wiki:search_config [2009/11/28 08:08] 127.0.0.1 external edit |
wiki:search_config [2017/12/12 17:14] (current) admin |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Configuration ====== | ====== Configuration ====== | ||
| The columns in the grid can be used as the basis for a search form to appear above, below, or in place of, the grid. Searching is a way of querying data from the server using specified criteria. | The columns in the grid can be used as the basis for a search form to appear above, below, or in place of, the grid. Searching is a way of querying data from the server using specified criteria. | ||
| - | <note>Currently we do not have module for searching on local data i.e when a datatype options is set to local. All the searching is done server side.</note> | + | <note><del>Currently we do not have module for searching on local data i.e when a datatype options is set to local. All the searching is done server side.</del></note> |
| There are four approaches: | There are four approaches: | ||
| * a toolbar searching | * a toolbar searching | ||
| - | * a custom searching | + | * a custom searching |
| * a single field searching | * a single field searching | ||
| * a more complex approach involving many fields and conditions - advanced searching | * a more complex approach involving many fields and conditions - advanced searching | ||
| Line 13: | Line 13: | ||
| Every search method require that some additional module should be included into the package. Also refer to [[Download]] or in every specific module on what should be included | Every search method require that some additional module should be included into the package. Also refer to [[Download]] or in every specific module on what should be included | ||
| - | All search modules (except cutstom serching and toolbar serching) uses the following definition from language file: | + | All search modules (except custom searching and toolbar searching) uses the following definition from language file: |
| <code javascript> | <code javascript> | ||
| $.jgrid = { | $.jgrid = { | ||
| Line 34: | Line 34: | ||
| Below is a list of these options that should be set in colModel. Note that some options are not applicable for particular method. | Below is a list of these options that should be set in colModel. Note that some options are not applicable for particular method. | ||
| - | ^Option^Type^Desscription^Default^ | + | ^Option^Type^Description^Default^ |
| |search|boolean|Determines if the field can be searched.|true| | |search|boolean|Determines if the field can be searched.|true| | ||
| |stype|string|Determines the search type of the field. Can be text - also a input element with type text is created and select - a select element is created|text| | |stype|string|Determines the search type of the field. Can be text - also a input element with type text is created and select - a select element is created|text| | ||
| |searchoptions|object| Object which contain definition, events and other properties for the searched field. See below| | | |searchoptions|object| Object which contain definition, events and other properties for the searched field. See below| | | ||
| + | |searchrules|object| Object which contain additional conditions for validating user input| | | ||
| The searchoptions object have the following properties: | The searchoptions object have the following properties: | ||
| Line 47: | Line 48: | ||
| |dataEvents|array|List of events to apply to the data element; uses $("#id").bind(type, [data], fn) to bind events to data element. Should be described like this: \\ dataEvents: [ \\ { type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); }},\\ { type: 'keypress', fn: function(e) { console.log('keypress'); } } \\ ]| | |dataEvents|array|List of events to apply to the data element; uses $("#id").bind(type, [data], fn) to bind events to data element. Should be described like this: \\ dataEvents: [ \\ { type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); }},\\ { type: 'keypress', fn: function(e) { console.log('keypress'); } } \\ ]| | ||
| |attr|object|attr is object where we can set valid attributes to the created element. By example: \\ attr : { title: "Some title" } \\ Will set a title of the searched element| | |attr|object|attr is object where we can set valid attributes to the created element. By example: \\ attr : { title: "Some title" } \\ Will set a title of the searched element| | ||
| - | |searchhidden|boolean| By default hidden elemnts in the grid are not searchable . In order to enable searching when the field is hidden set this option to true| | + | |searchhidden|boolean| By default hidden elements in the grid are not searchable . In order to enable searching when the field is hidden set this option to true| |
| - | |sopt|array|This option is used only in advanced single field searching and determines the operation that is applied to the element. If not set all the available options will be used. All available option are: \\ ['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc'] \\ The corresponding texts are in language file and mean the following: \\ ['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'] \\ Note that the elements in sopt array can be mixed in any order.| | + | |sopt|array|This option is used only in advanced , single and toolbar field searching and determines the operation that is applied to the element. If not set all the available options will be used. When used in toolbar searching the first element is used. All available option are: \\ ['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc'] \\ The corresponding texts are in language file and mean the following: \\ ['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'] \\ Note that the elements in sopt array can be mixed in any order.| |
| |defaultValue|string|If not empty set a default value in the search input element.| | |defaultValue|string|If not empty set a default value in the search input element.| | ||
| - | |value|mixed| The option is used only for stype select and defines the select options in the search dialogs. When set for stype select and dataUrl option is not set, the value can be a string or object. \\ If the option is a string it must contain a set of value:label pairs with the value separated from the label with a colon (:) and ended with(;). The string should not ended with a (;)- editoptions:{value:"1:One;2:Two"}.If set as object it should be defined as pair name:value - editoptions:{value:{1:'One';2:'Two'}} | | + | |value|mixed| The option is used only for stype select and defines the select options in the search dialogs. When set for stype select and dataUrl option is not set, the value can be a string or object. \\ If the option is a string it must contain a set of value:label pairs with the value separated from the label with a colon (:) and ended with(;). The string should not end with a (;)- editoptions:{value:"1:One;2:Two"}.If set as object it should be defined as pair value:name - editoptions:{value:{1:'One',2:'Two'}} | |
| + | |clearSearch|boolean|When set to false the X icon at end of search field which is responsible to clear the search data is disabled. the default value is true| | ||
| <note>Note: when the dataUrl in searchoptions object is not used for the search type select, the definitions for the select are taken first from searchoptions value property and if this is not defined a editoptions value property is used- i.e editoptions:{value:"1:one;2:two",...}. See below how to use these options in different search methods.</note> | <note>Note: when the dataUrl in searchoptions object is not used for the search type select, the definitions for the select are taken first from searchoptions value property and if this is not defined a editoptions value property is used- i.e editoptions:{value:"1:one;2:two",...}. See below how to use these options in different search methods.</note> | ||
| Line 71: | Line 73: | ||
| jQuery(elem).datepicker(); | jQuery(elem).datepicker(); | ||
| } | } | ||
| + | </script> | ||
| + | </code> | ||
| + | |||
| + | |||
| + | ==== searchrules ==== | ||
| + | This option add additional properties to the searchable element and should be used in colModel. Mostly it is used to validate the user input before submitting the value(s) to the server. | ||
| + | Syntax: | ||
| + | |||
| + | <code javascript> | ||
| + | <script> | ||
| + | jQuery("#grid_id").jqGrid({ | ||
| + | ... | ||
| + | colModel: [ | ||
| + | ... | ||
| + | {name:'price', ..., searchrules:{required:true....}, search:true }, | ||
| + | ... | ||
| + | ] | ||
| + | ... | ||
| + | }); | ||
| + | </script> | ||
| + | </code> | ||
| + | |||
| + | Below is the list of available options: | ||
| + | |||
| + | ^Option^Type^Description^ | ||
| + | |required|boolean| (true or false) if set to true, the value will be checked and if empty, an error message will be displayed.| | ||
| + | |number|boolean| (true or false) if set to true, the value will be checked and if this is not a number, an error message will be displayed.| | ||
| + | |integer|boolean|(true or false) if set to true, the value will be checked and if this is not a integer, an error message will be displayed.| | ||
| + | |minValue|number(integer)|if set, the value will be checked and if the value is less than this, an error message will be displayed.| | ||
| + | |maxValue|number(integer)|if set, the value will be checked and if the value is more than this, an error message will be displayed.| | ||
| + | |email|boolean|if set to true, the value will be checked and if this is not valid e-mail, an error message will be displayed| | ||
| + | |url|boolean|if set to true, the value will be checked and if this is not valid url, an error message will be displayed| | ||
| + | |date|boolean| if set to true a value from datefmt option is get (if not set ISO date is used) and the value will be checked and if this is not valid date, an error message will be displayed| | ||
| + | |time|boolean|if set to true, the value will be checked and if this is not valid time, an error message will be displayed. Currently we support only hh:mm format and optional am/pm at the end| | ||
| + | |custom|boolean| if set to true allow definition of the custom checking rules via a custom function. See below| | ||
| + | |custom_func|function| this function should be used when a custom option is set to true. Parameters passed to this function are the value, which should be checked and the name - the property from colModel. The function should return array with the following parameters: first parameter - true or false. The value of true mean that the checking is successful false otherwise; the second parameter have sense only if the first value is false and represent the error message which will be displayed to the user. Typically this can look like this [false,"Please enter valid value"]| | ||
| + | |||
| + | <note warning>“The searchrules will be used only in the searching dialog, but not in the searching filter…..” according to the following link by Oleg [http://stackoverflow.com/a/9011733]</note> | ||
| + | |||
| + | === Custom Checking example=== | ||
| + | <code javascript> | ||
| + | <script> | ||
| + | function mypricecheck(value, colname) { | ||
| + | if (value < 0 || value >20) | ||
| + | return [false,"Please enter value between 0 and 20"]; | ||
| + | else | ||
| + | return [true,""]; | ||
| + | } | ||
| + | jQuery("#grid_id").jqGrid({ | ||
| + | ... | ||
| + | colModel: [ | ||
| + | ... | ||
| + | {name:'price', ..., searchrules:{custom:true, custom_func:mypricecheck....}, search:true }, | ||
| + | ... | ||
| + | ] | ||
| + | ... | ||
| + | }); | ||
| </script> | </script> | ||
| </code> | </code> | ||
