With experience of Tutorial 2 & Tutorial 3, you may have some rough idea of how to display data in real database. You don't know? Let me give you some sparkles.
If we change hello.html content from
to
Can you get it? Here we go.
[Req Spec]1. A treegrid and a button are needed.
2. When end user click button, treegrid shows rows in database.
[Do It Yourself]1. Firstly, prepare a file named hello.php to
http://localhost/hello.php. It reads
2. Drag a [treeGrid] to design area，set its alias to "treegrid1"(Click dialog window to select it, type "treegrid1" in [Component Config Window]->[alias]，and strike [Enter] on keyboard. )
3. Drag a [Button] to design area.
4. Add event handler for button being clicking. (Click [input] to select it，click on right side of [Component Config Window]->[events]->[onClick]，a small button will appear. Click this button, a dialog box will pop up.)
5. You will see the following lines in the dialog
6. In the handler, we will call linb.request.
7. Do you remember function treegrid1.setRows? A very important thing I have to say is rep above is string in type. So we need to convert it to 2d array object. Function _.unserialize is introducted here (also see
http://www.sigmawidgets.com/products/sigma_visual/API/index.html#_.unserialize).
This function can help you convert string to Javascript object. It takes two parameters. We could ignore the second parameter because we have no date variables to deal with. Think of the following code.
The lines will popup an alter box say 25.
8. After you understand unserialize, We could complete code look like
9. Click [OK] to close dialog.
10. Press [run] to see the result.
The above sample show us a way to communicate with server side. The left thing is just change hello.php and retrieve real data from database.
Simply create a database named testdb and execute the following sql.
And change hello.php to the following code. If you don't understand it, you need more knowledge on php instead of Sigma Visual builder.
