Organigram"
From Documentation
Charlesqiu (talk | contribs) |
Charlesqiu (talk | contribs) |
||
Line 61: | Line 61: | ||
<tt>Organigram</tt> supports single selection, Orgitem can be selected by clicking it or by programing: <javadoc method="setSelectedItem(org.zkoss.zkmax.zul.Orgitem)">org.zkoss.zkmax.zul.Organigram</javadoc> and <javadoc method="setSelected(java.lang.Boolean)">org.zkoss.zkmax.zul.Orgitem</javadoc>. | <tt>Organigram</tt> supports single selection, Orgitem can be selected by clicking it or by programing: <javadoc method="setSelectedItem(org.zkoss.zkmax.zul.Orgitem)">org.zkoss.zkmax.zul.Organigram</javadoc> and <javadoc method="setSelected(java.lang.Boolean)">org.zkoss.zkmax.zul.Orgitem</javadoc>. | ||
+ | |||
+ | When a Orgitem is selected, the onSelect event will sent back to the server to notify the application, you can call <javadoc method="getSelectedItem()">org.zkoss.zkmax.zul.Organigram</javadoc> to get the selected Orgitem. | ||
+ | |||
+ | Example: | ||
+ | <source language="xml"> | ||
+ | <organigram onSelect="Clients.log(self.getSelectedItem().getLabel())"> | ||
+ | <orgchildren> | ||
+ | <orgitem label="Item1"> | ||
+ | <orgchildren> | ||
+ | <orgitem label="Item2"/> | ||
+ | <orgitem label="Item3" selected="true"/> | ||
+ | <orgitem label="Item4"/> | ||
+ | </orgchildren> | ||
+ | </orgitem> | ||
+ | </orgchildren> | ||
+ | </organigram> | ||
+ | </source> | ||
= Open = | = Open = |
Revision as of 04:47, 8 August 2018
Organigram
- Java API: Organigram
- JavaScript API: Organigram
[ ZKEE ] [ Since 8.6.0 ]
Employment/Purpose
Organigram is a component for showing organizational chart by using tree data structure, it also support TreeModel to hold data, Organigram only accept one Orgchildren as child, developers can put Orgchildren, Orgitem and Orgnode in Organigram to display data.
Example
<organigram width="600px">
<orgchildren>
<orgitem>
<orgnode label="Item1"/>
<orgchildren>
<orgitem>
<orgnode label="Item2"/>
<orgchildren>
<orgitem>
<orgnode label="Item3"/>
</orgitem>
<orgitem>
<orgnode label="Item4"/>
<orgchildren>
<orgitem>
<orgnode label="Item5"/>
</orgitem>
</orgchildren>
</orgitem>
</orgchildren>
</orgitem>
<orgitem>
<orgnode label="Item6"/>
</orgitem>
</orgchildren>
</orgitem>
</orgchildren>
</organigram>
<zscript><![CDATA[
DefaultTreeNode root = new DefaultTreeNode(null, new DefaultTreeNode[]{
new DefaultTreeNode("Item1", new DefaultTreeNode[]{
new DefaultTreeNode("Item2"), new DefaultTreeNode("Item3"), new DefaultTreeNode("Item4")
})
});
DefaultTreeModel model = new DefaultTreeModel(root);
model.addOpenPath(new int[]{0});
]]></zscript>
<organigram width="600px" model="${model}"/>
Selection
Organigram supports single selection, Orgitem can be selected by clicking it or by programing: Organigram.setSelectedItem(Orgitem) and Orgitem.setSelected(Boolean).
When a Orgitem is selected, the onSelect event will sent back to the server to notify the application, you can call Organigram.getSelectedItem() to get the selected Orgitem.
Example:
<organigram onSelect="Clients.log(self.getSelectedItem().getLabel())">
<orgchildren>
<orgitem label="Item1">
<orgchildren>
<orgitem label="Item2"/>
<orgitem label="Item3" selected="true"/>
<orgitem label="Item4"/>
</orgchildren>
</orgitem>
</orgchildren>
</organigram>
Open
Supported Events
Event: SelectEvent
Notifies one that the user has selected a new item in the organigram. |
- Inherited Supported Events: XulElement
Supported Children
* Orgchildren