jQuery Grid Plugin – jqGrid

Searchdb is another jQuery plugin. The reason to write this plugin is that I’m a little be “lazy”. Imagine that you have a dynamic table (grid) or report in wich the user will search on many fields with diffrent criteria (equal, less, greater …). Constructing a form is a first problem. You must write so many tags and html code. The second and more importand problem is that I must analyze too much data passed to the server and construct it in a apropriate way in the WHERE clause of the SELECT statement. So, I think – will be possible to pass only one parameter (the search criteria) , which can be directly passed in the WHERE clause? My answer after little thik was – yes this can be done.

I use again the best JS library jQuery – remember the logo of jQuery – “Write less, do more”. Below is a little guide:

This plugin creates a form of type condition – field value and return a string with a ready to use WHERE clause. Example: “name like ‘tony%’ and rating >= 1″.

As usual the function can be placed in the document ready function to any html element.

$(‘#search1′).searchdb({searchModel: [
{label:’Title’,dbname:’message_title’,defval:””, dtype:”S”, dopt:”cn;eq;lt;le;gt;ge;bw;ew”},
{label:’Autor’,dbname: ‘author’, dtype:”S”}
],
capition: “Search Data Where”,
hideonSearch: false,
disableClose: false,
onSearch: function(s) {
alert(s);
}
});

searchModel: array of values which describes the form elements

• label The description text of the field
• dbname the real database name which is used in the where clause
• size the actual size of the element in the form default 15
• maxsize the maximal size of the element (maxLength) attribute. Default 15
• defval the default value of the element when constructing the form. Default empty
• dtype data type of the element. Values “S” (string) or “N” (numeric). Default is “S”
• dopt allowed sequence of options for the condition separated with “;”. Here is a list of the possible options:

“eq” is equal,
“ne” is not equal,
“lt” is less
“le” is less or equal
“gt” is greater
“ge” is greater or equal
“bw” is begins with
“ew” is ends with
“cn” is contains

capition: (optional) This is the Title of the form. Default value ‘Search data where’.

hideonSearch: (optional) if set to true the form is hidden after clicking of the button Search. Default is false.

disableClose : (optional) if set to true the button Close (hide) is disabled. Default is false.

onSearch: (optiona) this function is raised after clicking of button Search and accepts a string parameter with a ready to use where clause.

By default when constructing a form the flowing buttons are created:

Search: This button activates onSearch function with a search string parameter.

Clear: This button clears the entered values.

Close: This button hides a form.

Before to call this function you may want to translate some texts in your language. The default language is English.

This can be done via setLanguage function. Example:
…
var mybuttons = [‘Search’,’Clear’,’Close’ ];
var myodata = [‘equal’, ‘not equal’, ‘less’, ‘less or equal’,’greater’,’greater or equal’, ‘begins with’,’ends with’,’contains’ ];
$.searchdb.setLanguage(mybuttons, myodata);
…