|
steven
|
 |
« on: July 15, 2008, 11:16:58 PM » |
|
This chapter will tell you how to make a simple page with Sigma grid 2.0. We suppose data to show already exist in the client, and grid is just used to show that data. At the same time, you could leaning some tips of how to set some properties, to achieve the personalized needs. Although the content of this tutorial may not be able to meet your needs, it is really basics of Sigma Grid.
The target reader could be those who have never had any experience with an ajax-driven grid components. I suppose he/she has basic idea of HTML and JavaScript. It's better if he/she knows JSON(JavaScript Object Notation).
You could skip to next tutorial if you had known to how to get started with Sigma grid.
Before we start with anything, let's create an HTML file named "mydemo1.html" and place it to same directory where grid is at. The file structure looks like
/demos/
/docs/
/grid/
/mydemo1.html
"mydemo1.html" reads as follows. (I suggect that this file is encoded in UTF-8)
|
|
|
|
« Last Edit: October 23, 2008, 02:14:36 AM by steven »
|
Logged
|
Sigma AJAX Data Grid - Easy to Integrate with PHP, ASP Classic, ASP.NET & Java
Sigma PHP Ajax Framework - WYSIWYG GUI Builder With Tree, Grid, Treegrid, Dialog, Tab & More Component
|
|
|
|
steven
|
|
« Reply #1 on: July 16, 2008, 02:18:32 AM » |
|
We need three parts to get Sigma grid work.
1 data.
Data must be a JSON array, and every entry of array could be object or array. For example, the following two forms of data are acceptable by Sigma grid. We called entry record.
Assume that such a set of data (Sales Information)
I prefer the first form, although some people may think that the array should be faster and memory less usage. Actually this advantage is not obvious, especially when grid works with backend database.
In this toturial, all data will go in the first form. Surely Sigma grid also supports the second form, which looks straightforward. I will explain that in latter toturial.
|
|
|
|
« Last Edit: July 08, 2010, 01:44:55 AM by steven »
|
Logged
|
Sigma AJAX Data Grid - Easy to Integrate with PHP, ASP Classic, ASP.NET & Java
Sigma PHP Ajax Framework - WYSIWYG GUI Builder With Tree, Grid, Treegrid, Dialog, Tab & More Component
|
|
|
|
steven
|
|
« Reply #2 on: July 16, 2008, 02:58:34 AM » |
|
2. Data schema
It could not drive Sigma grid work with above data only, because the Sigma Grid is able to understand these data. We need a schema to to describe what the data is.
The code above is description of data. It tells Sigma Grid that our data is in object form and what data type of each field is. Different type leads to different behavior of sorting, comparison, and so on. Take sorting for example, 15 comes before 2 if they are string, but 2 comes before 15 if they are int. Developer could specify one field to be float, int, or string. If no type is specified to one field, it's thought to be string by default.
Therefore, a simplified definition could be
If you have a record in array form, rather than json-object (that is mentioned earlier as data2), fields should be in the same order of field elements occurrence. That is, type of first four fields is tring, type of next four fields is float, and type of last one is date.
After data and schema are ready, we need to tell Sigma grid how to get the data. I point data to data1 in the following lines by add *data* attribute to dsOption.
|
|
|
|
« Last Edit: October 23, 2008, 02:20:42 AM by steven »
|
Logged
|
Sigma AJAX Data Grid - Easy to Integrate with PHP, ASP Classic, ASP.NET & Java
Sigma PHP Ajax Framework - WYSIWYG GUI Builder With Tree, Grid, Treegrid, Dialog, Tab & More Component
|
|
|
|
steven
|
|
« Reply #3 on: July 17, 2008, 03:32:30 AM » |
|
3 Grid column describer.
The third part we need is grid column describer. It defines id, title, width of one column, and what field of data a column need to present.
If the column id is the same as field name, you can ignore it.
|
|
|
|
« Last Edit: October 23, 2008, 02:20:57 AM by steven »
|
Logged
|
Sigma AJAX Data Grid - Easy to Integrate with PHP, ASP Classic, ASP.NET & Java
Sigma PHP Ajax Framework - WYSIWYG GUI Builder With Tree, Grid, Treegrid, Dialog, Tab & More Component
|
|
|
|
steven
|
|
« Reply #4 on: July 17, 2008, 03:33:24 AM » |
|
As we have three parts already, it's time to create a grid. Here is simplfied code to create a new grid. Personally I am used to extract those initialization parameters in Sigma.Grid function and put them into separate statement. Codes is as follows: You might be interested in those initialization parameters. id: Each grid needs an id. Every id should be unique if you put more than one grid on one web page. loadUrl: To tell grid how to get the data. It points to a function here. If you have a php file which can produce json string, you can also assign the php url to it. For example, loadUrl:' http://www.demo.com/orderList.php' columns: The grid column describer. dataset: Data schema we talked above. container: Id of place holder. We need to tell grid where it should appear. So we have a div tag as place holder in the html file, which I gave out at the begining of the tutorial. Well, we have almost finished our first grid. But it is not enough with the above codes. we need tell browser when to show this grid. We one more statement. That means grid will show up after web page is loaded. |
|
|
|
« Last Edit: October 23, 2008, 02:21:11 AM by steven »
|
Logged
|
Sigma AJAX Data Grid - Easy to Integrate with PHP, ASP Classic, ASP.NET & Java
Sigma PHP Ajax Framework - WYSIWYG GUI Builder With Tree, Grid, Treegrid, Dialog, Tab & More Component
|
|
|
|
steven
|
|
« Reply #5 on: July 17, 2008, 03:34:15 AM » |
|
Put all code snippet together, we will get
If all goes well, you should see a simple grid. See attached
|
|
|
|
« Last Edit: October 23, 2008, 02:22:25 AM by steven »
|
Logged
|
Sigma AJAX Data Grid - Easy to Integrate with PHP, ASP Classic, ASP.NET & Java
Sigma PHP Ajax Framework - WYSIWYG GUI Builder With Tree, Grid, Treegrid, Dialog, Tab & More Component
|
|
|
|
