012. How to display a tree structure from array?

Problem

You have an array:

$list = array(
	array ('id' => '101', 'parent' => '0', 'data' => 'data0'),
	array ('id' => '102', 'parent' => '101', 'data' => 'data1'),
	array ('id' => '103', 'parent' => '0', 'data' => 'data2'),
	array ('id' => '104', 'parent' => '0', 'data' => 'data3'),
	array ('id' => '105', 'parent' => '104', 'data' => 'data4'),
	array ('id' => '106', 'parent' => '105', 'data' => 'data5')
);

You want to display this array as a tree structure as shown below:

How to display a tree structure from array?


Solution

  • Set up a GtkTreestore to store the tree structure.
  • Create a GtkTreeview and attach the treestore to the treeview.
  • The treeview will automatically display the tree structure from the treeview.

Sample Code

1   
2   
3   
4   
5   
6   
7   
8   
9   
10   
11   
12   
13   
14   
15   
16   
17   
18   
19   
20   
21   
22   
23   
24   
25   
26   
27   
28   
29   
30   
31   
32   
33   
34   
35   
36   
37   
38   
39   
40   
41   
42   
43   
44   
45   
46   
47   
48   
49   
50   
51   
52   
53   
54   
55   
56   
57   
58   
59   
60   
61   
62   
63   
64   
65   
66   
68   
69   
70   
71   
72   
73   
74   
80   
81   
82   
<?php

$window = new GtkWindow();
$window->set_size_request(400, 200);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("Display a tree structure from array");
$title->modify_font(new PangoFontDescription("Times New Roman Italic 10"));
$title->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000ff"));
$title->set_size_request(-1, 40);
$vbox->pack_start($title, 0, 0);
$vbox->pack_start(new GtkLabel(), 0, 0);

$data = array(
    array ('id' => '101', 'parent' => '0', 'data' => 'data0'),
    array ('id' => '102', 'parent' => '101', 'data' => 'data1'),
    array ('id' => '103', 'parent' => '0', 'data' => 'data2'),
    array ('id' => '104', 'parent' => '0', 'data' => 'data3'),
    array ('id' => '105', 'parent' => '104', 'data' => 'data4'),
    array ('id' => '106', 'parent' => '105', 'data' => 'data5')
);

display_table($vbox, $data);

$window->show_all();
Gtk::main();

function display_table($vbox, $data) {

    // Set up a scroll window
    $scrolled_win = new GtkScrolledWindow();
    $scrolled_win->set_policy( Gtk::POLICY_AUTOMATIC,
        Gtk::POLICY_AUTOMATIC);
    $vbox->pack_start($scrolled_win);

    // Creates the list store
    if (defined("GObject::TYPE_STRING")) {
        $model = new GtkTreeStore(GObject::TYPE_LONG, 
            GObject::TYPE_STRING, GObject::TYPE_STRING); // note 1
    } else {
        $model = new GtkTreeStore(Gtk::TYPE_LONG, 
            Gtk::TYPE_STRING, Gtk::TYPE_STRING); // note 1
    }
    $field_header = array('id', 'title', 'data');

    // Creates the view to display the list store
    $view = new GtkTreeView($model); // note 2
    $scrolled_win->add($view);

    // Creates the columns
    for ($col=0; $col<count($field_header); ++$col) { // note 3
        $cell_renderer = new GtkCellRendererText();
        $column = new GtkTreeViewColumn($field_header[$col],
            $cell_renderer, 'text', $col);
        $view->append_column($column);
    }

    // pupulates the data
    $nodes = array();
    $nodes[0] = null; // root
    foreach($data as $item) {
        $id = $item['id'];
        $parent = $item['parent'];
        $data = $item['data'];
        $nodes[$id] = $model->append($nodes[$parent], 
            array($id, "this is id $id", $data)); // note 4
    }

    $view->expand_all();
}


?>

Output

As shown above.
 

Explanation

  1. Sets up the treestore to store the data. Here it sets three fields. The first one is integer that stores the id. The second and third are strings.
  2. Creates a GtkTreeview. It is here that you bind the model to the treeview.
  3. Sets up the treeview columns.
  4. Loops through the data list and appends the data one by by to the tree structure. Note that $nodes stores the GtkTreeiter of each node. You can view this as a pointer to the node.

Related Links

Add comment


Security code
Refresh