Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
wiki:how_it_works [2009/11/28 08:07] 127.0.0.1 external edit |
wiki:how_it_works [2017/12/12 17:08] (current) admin |
||
|---|---|---|---|
| Line 2: | Line 2: | ||
| ===== How it Works ===== | ===== How it Works ===== | ||
| - | Understanding this will help you to work better with jqGrid and use the full capabilities of the plugin. | + | Understanding how jqGrid works will help you get up to speed with the full capabilities of the plugin. |
| - | The first thing we must understand is that we have two major divisions: | + | The first thing to understand is that there are two aspects to working with tabular data : |
| - | * Server-side manipulation, and | + | * Client-side representation, and |
| - | * Client-side representation. | + | * Server-side manipulation |
| - | In other words, jqGrid is a component that helps you, in an easy way, to represent database information on the client side using a server-side technology. Moreover it helps you to manipulate that data back into the database. | + | JqGrid is a component that presents tabular data for easy manipulation in a web browser grid. jqGrid uses Ajax calls to retrieve information and construct the representation (tabular data) using the jqGrid Column Model (colModel). |
| - | What is server-side manipulation (SSM)? There are many definitions possible, but I try to explain it in terms of jqGrid. | + | Furthermore, jqGrid helps you send any data changes or additions to the database on the server-side, a process known as server-side manipulation, or SSM. |
| - | Basically SSM means the server handles the editing and not the user's browser. SSM isn’t something that is visible within a web page. Everything is done on the server side using any common programming language. Basically it’s a server-side command that tells the server to place a file or text within the page once it is called from a user. | + | SSM means the server handles the actual changes to the database, and not the user's browser. SSM isn’t something that is visible within a web page. Server side data changes are done using PHP, or any other common programming language. |
| - | In terms of jqGrid this means that you should care about this: you must have a piece of code that deals with information stored in the database using some scripting language and web server. Using this code you should be able to return requested information back to the client (web browser). jqGrid uses Ajax calls to retrieve the requested information and represent it to client using Java Script language. | + | A jqGrid is comprised of the following four parts: |
| - | + | ||
| - | Having the needed (requested) information, jqGrid constructs the representation (tabular data) described by you in what is called the Column Model (colModel). | + | |
| - | + | ||
| - | The constructed tabular data at the client side has: | + | |
| * Caption layer | * Caption layer | ||
| Line 26: | Line 22: | ||
| {{ :wiki:griddesc.png }} | {{ :wiki:griddesc.png }} | ||
| + | |||
| **Caption layer** contains common information for the represented data. | **Caption layer** contains common information for the represented data. | ||
| Line 38: | Line 35: | ||
| To allow freedom and flexibility, and often a better impression, jqGrid relies on CSS (Cascading Style Sheets) to govern its appearance. | To allow freedom and flexibility, and often a better impression, jqGrid relies on CSS (Cascading Style Sheets) to govern its appearance. | ||
| + | |||
| + | Next, you'll create [[:wiki:first_grid |your first grid.]] | ||
| + | |||
| + | In more sophisticated case the grid can have more elements as shown below: | ||
| + | |||
| + | {{:wiki:allgridelementsnewfilters1.png|}} | ||
| + | |||
| + | The grid can not only have additional layers, but also allow more than the rows to contain the main data. jqGrid support treegrid, subgrid and grouping of data. | ||
| + | |||
| + | If you choose, the grid can look like a table having some advance features like sorting, resizing of columns, reordering of columns with respect of drag&drop and so on, as shown below: | ||
| + | |||
| + | {{:wiki:simpletable1.png|}} | ||
| + | |||
