Tutorial 6 - Load Tree Node From Real Database Dynamically

[steven]

With experience of Tutorial 4, you have known how to display data from real database in a grid. In this section, we will continue to learn how to load data from database into a tree.

[Req Spec]
1. A tree is needed.
2. When end user click on a node, its children nodes will be retrieved and displayed.


[Do It Yourself]
We need prepare a data table first. If you don't know how to store a tree in one data table, I can tell you. We assume every record in table is for one node. You need two columns for each record to describe their relationship. One is id, another is its parent id. Since root node has no parent, we assume its parent  to be a negative value.

Simply create a database named testdb and execute the following sql.

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; -- -- Database: `testdb` -- -- -------------------------------------------------------- CREATE TABLE `tutorial6` (   `id` smallint(6) NOT NULL auto_increment,   `pid` smallint(6) NOT NULL,   `sub` tinyint(1) NOT NULL default '0',   `value` varchar(15) NOT NULL default '-',   PRIMARY KEY  (`id`) ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ; -- -- Dumping data for table `tutorial6` -- INSERT INTO `tutorial6` (`id`, `pid`, `sub`, `value`) VALUES (1, -1, 1, 'Computer'), (2, 1, 1, 'hardware'), (3, 1, 1, 'software'), (4, 2, 0, 'screen'), (5, 2, 0, 'keyboard'), (6, 2, 0, 'mouse'), (7, 2, 0, 'hard disk'), (8, 3, 0, 'Windows'), (9, 3, 1, 'Linux'), (10, 3, 0, 'Mac'), (11, 9, 0, 'read hat'), (12, 9, 0, 'blue point');


1. Firstly, prepare a file named treenode.php to http://localhost/treenode.php. This php script take a parent id as a parameter and return their children nodes. It reads
<?php header("Content-Type:text/javascript; charset=utf-8"); mysql_connect("localhost","root","") or     die("Could not connect: " . mysql_error()); mysql_select_db("testdb") or     die("Could not select database: " . mysql_error()); $pid = $_GET["pid"]?$_GET["pid"]:-1; $sql = "select id, sub, value as caption from tutorial6 where pid =" . $pid; $handle = mysql_query($sql);    $retArray = array(); while ($row = mysql_fetch_object($handle)) {    $row->sub = ($row->sub==0)?false:true;    $retArray[] = $row; } echo json_encode($retArray); ?>

2. Drag a [treeBar] to design area，set its alias to "treebar1"(Click dialog window to select it, type "treebar1" in [Component Config Window]->[alias]，and strike [Enter] on keyboard. )

3. Change its initial nodes. (Click [treebar1] to select it，click on right side of [Component Config Window]->[properties]->[items]，a small button will appear. Click this button, a dialog box will pop up.) The popup is saying
[{     "id" : "item a",     "sub" : ["sub a1","sub a2","sub a3","sub a4"],     "caption" : "item a" }, {     "id" : "item b",     "sub" : ["sub b1","sub b2","sub b3","sub b4"],     "caption" : "item b" }]
Change it to the following line. Make sure set "sub" to true. That means is a parent node, but its children info is not known. When end user expand this node,
onGetContent will be fired.
[{     "id" : "1",     "sub" : true,     "caption" : "Computer" }]

4. Add event handler for parent node being expanded. (Click [treebar1] to select it，click on right side of [Component Config Window]->[events]->[onGetContent]，a small button will appear. Click this button, a dialog box will pop up.)
5. You will see the following lines in the dialog
function (profile, item, callback, threadid) { }
6. In the handler, we will call linb.request.
linb.request(             "http://localhost/treenode.php",             null,             function(rep){                                //you will get result of treenode.php in varble rep.                  });
7. A very important thing I have to say is rep above is string in type. So we need to convert it to nodes array. Function _.unserialize is introducted here (also see http://www.sigmawidgets.com/products/sigma_visual/API/index.html#_.unserialize).
_.unserialize (str, dateformat)
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.
var str = "{name:'tom', age:25}"; var tom = _.unserialize(str); alter(tom.age);
The lines will popup an alter box saying 25.
8. After you understand unserialize, We could complete code look like
        function (profile, item, callback, threadid) {             linb.request(             "http://localhost/treenode.php",             "pid="+ item.id,             function(rep){                                data = _.unserialize(rep);                 callback(data);                  });         }
9. Click [OK] to close dialog.
10. Press [run] to see the result.