Trees & Tables — widgets for tabular and tree-like data

MVC Tree Views

A WTreeView displays tree data (with additional properties available in extra columns). The archetypical application is a file system browser: the filesystem tree is displayed in the first column, and additional columns annotate properties of files.

As with other MVC item views, the actual data is provided by a WAbstractItemModel. This is a variation of the classical MVC strategy, where the View displays data provided by a Model. The View delegates the rendering of each individual item (i.e. table cell) to an Item Delegate to render (as a widget) the individual items, allowing this to be easily customized.

A more direct approach to showing a tree is to use the WTree or WTreeTable widgets which do not enforce this Model/View separation and allow you to directly specify the widgets that renders each cell. Compared to this, a WTreeView supports virtual scrolling (have you ever seen that for a tree ?), column sorting and resize handles, and row headers which allow you to scroll through many columns of additional data while keeping the first column within view. Its main restriction is that each row must have the same height.

The example below shows a treeview that is seeded with a custom hierarhical model which displays a revision in a git repository.

Example
Type
File
  • .gitignore
    • Text
      CMakeLists.txt
      • Changelog
        • Doxyfile
          • INSTALL
            • INSTALL.html
              • INSTALL.win32.html
                • LICENSE
                  • Markdown
                    README.md
                    • ReleaseNotes.html
                      • WConfig.h.in
                        • WtInstall.cmake
                          • Folder
                            cmake/
                            • Folder
                              doc/
                              • Folder
                                examples/
                                • Folder
                                  migrate/
                                  • Folder
                                    resources/
                                    • Folder
                                      selenium/
                                      • Folder
                                        src/
                                        • Folder
                                          target/
                                          1 of 2

                                          source
                                          #include <Wt/WTreeView.h>
                                          
                                          #include "GitModel.cpp"
                                          #define GIT_REPOSITORY "/path/to/repository/.git"
                                          
                                          auto treeView = cpp14::make_unique<WTreeView>();
                                          treeView->resize(600, 400);
                                          
                                          auto model = std::make_shared<GitModel>(GIT_REPOSITORY);
                                          treeView->setModel(model);
                                          
                                          treeView->setRowHeight(24);
                                          treeView->setHeaderHeight(24);
                                          treeView->setSortingEnabled(false);
                                          treeView->setSelectionMode(SelectionMode::Single);
                                          treeView->setEditTriggers(EditTrigger::None);
                                          

                                          Note The implementation of GitModel is discussed in Item Models

                                          Other Features

                                          The tree view shares a great deal of functionality with its sibling table view (which both reimplement WAbstractItemView), such as customizing cell rendering, editing and row headers. See MVC Table Views.

                                          Top