TreeWidget¶
A TreeWidget
can contain TreeItems
, which in turn can contain
TreeItems
to construct a tree.
from flexx import app, ui
class Example(ui.Widget):
def init(self):
with ui.TreeWidget(max_selected=2):
for t in ['foo', 'bar', 'spam', 'eggs']:
ui.TreeItem(text=t, checked=True)
Also see examples: tree.py, control_with_keys.py.
-
class
flexx.ui.
TreeItem
(*init_args, **kwargs)¶ Inherits from:
Widget
An item to put in a TreeWidget. This widget should only be used inside a TreeWidget or another TreeItem.
Items are collapsable/expandable if their
collapsed
property is set toTrue
orFalse
(i.e. notNone
), or if they have sub items. Items are checkable if theirchecked
property is set toTrue
orFalse
(i.e. notNone
). Items are selectable depending on the selection policy defined byTreeWidget.max_selected
.If needed, the
_render_title()
and_render_text()
methods can be overloaded to display items in richer ways. See the documentation ofWidget._render_dom()
for details.The
outernode
of this widget is a <li> (a list-item in the tree or parent item’s<ul>
. Thenode
of this widget is a <span> that represents the row for this item (but not its children).properties: checked, collapsed, selected, text, title, visible
emitters: user_checked, user_collapsed, user_selected
actions: set_checked, set_collapsed, set_parent, set_selected, set_text, set_visible
-
checked
¶ TriStateProp – Whether this item is checked (i.e. has its checkbox set). The value can be None, True or False. None (the default) means that the item is not checkable.
-
collapsed
¶ TriStateProp – Whether this item is expanded (i.e. shows its children). The value can be None, True or False. None (the default) means that the item is not collapsable (unless it has sub items).
-
selected
¶ BoolProp – Whether this item is selected. Depending on the TreeWidget’s policy (max_selected), this can be set/unset on clicking the item.
-
set_checked
(*val)¶ action – Setter for the ‘checked’ property.
-
set_collapsed
(*val)¶ action – Setter for the ‘collapsed’ property.
-
set_parent
(parent, pos=None)¶ action – set_parent
-
set_selected
(*val)¶ action – Setter for the ‘selected’ property.
-
set_text
(*val)¶ action – Setter for the ‘text’ property.
-
set_visible
(*val)¶ action – Setter for the ‘visible’ property.
-
text
¶ StringProp – The text for this item. Can be used in combination with
title
to obtain two columns.
-
title
¶ StringProp – The title for this item that appears before the text. Intended for display of key-value pairs. If a title is given, the text is positioned in a second (virtual) column of the tree widget.
-
user_checked
(checked)¶ emitter – Event emitted when the user (un)checks this item. Has
old_value
andnew_value
attributes.
-
user_collapsed
(collapsed)¶ emitter – Event emitted when the user (un)collapses this item. Has
old_value
andnew_value
attributes.
-
user_selected
(selected)¶ emitter – Event emitted when the user (un)selects this item. Has
old_value
andnew_value
attributes. One can call this emitter directly to emulate a user-selection, but note that this bypasses the max_selected policy.
-
visible
¶ BoolProp – Whether this item (and its sub items) is visible.
-
-
class
flexx.ui.
TreeWidget
(*init_args, **kwargs)¶ Inherits from:
Widget
A Widget that can be used to structure information in a list or a tree. It’s items are represented by its children, which may only be TreeItem objects. Sub items can be created by instantiating TreeItems in the context of another TreeItem.
When the items in the tree have no sub-items themselves, the TreeWidget is in “list mode”. Otherwise, items can be collapsed/expanded etc.
The
node
of this widget is a <div> with some child elements and quite a bit of CSS for rendering.Style
This widget can be fully styled using CSS, using the following CSS classes:
flx-listmode
is set on the widget’s node if no items have sub items.
Style classes for a TreeItem’s elements:
flx-TreeItem
indicates the row of an item (its text, icon, and checkbox).flx-TreeItem > collapsebut
the element used to collapse/expand an item.flx-TreeItem > checkbut
the element used to check/uncheck an item.flx-TreeItem > text
the element that contains the text of the item.flx-TreeItem > title
the element that contains the title of the item.
Style classes applied to the TreeItem, corresponding to its properties:
visible-true
andvisible-false
indicate visibility.selected-true
andselected-false
indicate selection state.checked-true
,checked-false
andchecked-null
indicate checked state, with thenull
variant indicating not-checkable.collapsed-true
,collapsed-false
andcollapsed-null
indicate collapse state, with thenull
variant indicating not-collapsable.
properties: max_selected
actions: set_max_selected
methods: get_all_items, highlight_get, highlight_hide, highlight_show, highlight_show_item, highlight_toggle_checked, highlight_toggle_selected
-
get_all_items
()¶ Get a flat list of all TreeItem instances in this Tree (including sub children and sub-sub children, etc.), in the order that they are shown in the tree.
-
highlight_get
()¶ Get the “current” item. This is the currently highlighted item if there is one. Otherwise it can be the last highlighted item or the last clicked item.
-
highlight_hide
()¶ Stop highlighting the “current” item.
-
highlight_show
(step=0)¶ Highlight the “current” item, optionally moving step items.
-
highlight_show_item
(item)¶ Highlight the given item.
-
highlight_toggle_checked
()¶ Convenience method to toggle the “checked” property of the current item.
-
highlight_toggle_selected
()¶ Convenience method to toggle the “selected” property of the current item.
-
max_selected
¶ IntProp – The maximum number of selected items:
- If 0 (default) there is no selection.
- If 1, there can be one selected item.
- If > 1, up to this number of items can be selected by clicking them.
- If -1, any number of items can be selected by holding Ctrl or Shift.
-
set_max_selected
(*val)¶ action – Setter for the ‘max_selected’ property.