244. How to display a tree structure with connecting lines?

Problem

You have set up a tree structure in How to display a tree structure from array?

Now you want to have connecting lines for the tree structure as shown below:

How to display a tree structure with connecting lines?


Solution

Important Note: This only works for PHP-GTK2 compliled with gtk+ v2.10 and above. If you are using an older version, for linux, you may follow the step-by-step instructions to recompile php-gtk2 with gtk+ v2.10. For windows, please refer to How to install php gtk2 on windows? You may also want to take a look here to see some of the new exciting PHP-GTK2 Functionalities.


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   
67   
68   
70   
71   
72   
73   
74   
76   
77   
78   
84   
85   
<?php
$window = new GtkWindow();
$window->set_title($argv[0]);
$window->set_size_request(400, 306);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("Display a tree structure with connecting lines");
$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'),
    array ('id' => '107', 'parent' => '105', 'data' => 'data6'),
    array ('id' => '108', 'parent' => '105', 'data' => 'data7')
);

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);
    } else {
        $model = new GtkTreeStore(Gtk::TYPE_LONG,
            Gtk::TYPE_STRING, Gtk::TYPE_STRING);
    }
    $field_header = array('id', 'title', 'data');

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

    // Creates the columns
    for ($col=0; $col<count($field_header); ++$col) {
        $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));
    }

    $view->expand_all();
    $view->set_enable_tree_lines(1);  // note 1
}


?>

Output

As shown above.
 

Explanation

We make use of the code from How to display a tree structure from array?

What's new here:

  1. Enable connecting lines for the treeview.

Related Links

Add comment


Security code
Refresh