Organigram"
Charlesqiu (talk | contribs) |
Charlesqiu (talk | contribs) |
||
(33 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
+ | {{ZKDevelopersReferencePageHeader}} | ||
= Organigram = | = Organigram = | ||
Line 4: | Line 5: | ||
*JavaScript API: <javadoc directory="jsdoc">zkmax.layout.Organigram </javadoc> | *JavaScript API: <javadoc directory="jsdoc">zkmax.layout.Organigram </javadoc> | ||
− | + | {{ZK EE}} | |
− | [ Since 8.6.0 ] | + | [Since 8.6.0] |
= Employment/Purpose = | = Employment/Purpose = | ||
<tt>Organigram</tt> is a component for showing organizational chart by using tree data structure, it also support TreeModel to hold data, Organigram only accept one <tt>Orgchildren</tt> as child, developers can put <tt>Orgchildren</tt>, <tt>Orgitem</tt> and <tt>Orgnode</tt> in <tt>Organigram</tt> to display data. | <tt>Organigram</tt> is a component for showing organizational chart by using tree data structure, it also support TreeModel to hold data, Organigram only accept one <tt>Orgchildren</tt> as child, developers can put <tt>Orgchildren</tt>, <tt>Orgitem</tt> and <tt>Orgnode</tt> in <tt>Organigram</tt> to display data. | ||
+ | |||
+ | <tt>Organigram</tt> supports [https://www.zkoss.org/wiki/ZK_Developer%27s_Reference/Performance_Tips/Client_Render_on_Demand Client Render on Demand] | ||
+ | |||
+ | = Browser Support = | ||
+ | *For IE, this component only supports 11+, it is based on [https://developer.mozilla.org/en-US/docs/Web/CSS/flex CSS Flexbox], please check browser compatibility before using it. | ||
= Example = | = Example = | ||
− | + | [[Image:Organigram example.png]] | |
<source lang="xml" > | <source lang="xml" > | ||
<organigram width="600px"> | <organigram width="600px"> | ||
<orgchildren> | <orgchildren> | ||
− | <orgitem | + | <orgitem label="Item1"> |
− | |||
<orgchildren> | <orgchildren> | ||
− | <orgitem | + | <orgitem label="Item2"> |
− | |||
<orgchildren> | <orgchildren> | ||
− | <orgitem | + | <orgitem label="Item3"/> |
− | + | <orgitem label="Item4"> | |
− | < | ||
− | |||
− | |||
<orgchildren> | <orgchildren> | ||
− | <orgitem | + | <orgitem label="Item5"/> |
− | |||
− | |||
</orgchildren> | </orgchildren> | ||
</orgitem> | </orgitem> | ||
</orgchildren> | </orgchildren> | ||
</orgitem> | </orgitem> | ||
− | <orgitem> | + | <orgitem label="Item6"> |
− | < | + | <orgchildren> |
+ | <orgitem label="Item7"/> | ||
+ | <orgitem label="Item8"/> | ||
+ | </orgchildren> | ||
</orgitem> | </orgitem> | ||
</orgchildren> | </orgchildren> | ||
Line 44: | Line 46: | ||
</source> | </source> | ||
− | + | [[Image:Organigram example2.png]] | |
<source language="xml"> | <source language="xml"> | ||
<zscript><![CDATA[ | <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}"/> | <organigram width="600px" model="${model}"/> | ||
</source> | </source> | ||
+ | |||
+ | you can also render Organigram with your customized Renderer and Template, please refer to: | ||
+ | |||
+ | [https://www.zkoss.org/wiki/ZK_Developer%27s_Reference/MVC/View/Template/Organigram_Template Organigram Template] | ||
+ | |||
+ | [https://www.zkoss.org/wiki/ZK_Developer%27s_Reference/MVC/View/Renderer/Organigram_Renderer Organigram Renderer] | ||
+ | |||
+ | = Selection = | ||
+ | |||
+ | <tt>Organigram</tt> supports single selection, Orgitem can be selected by users clicking or by programing: | ||
+ | |||
+ | <javadoc method="setSelectedItem(org.zkoss.zkmax.zul.Orgitem)">org.zkoss.zkmax.zul.Organigram</javadoc> , <javadoc method="setSelected(java.lang.Boolean)">org.zkoss.zkmax.zul.Orgitem</javadoc>. | ||
+ | |||
+ | When an 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: | ||
+ | |||
+ | [[Image:Organigram selection.png]] | ||
+ | <source language="xml"> | ||
+ | <organigram width="600px" 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> | ||
+ | |||
+ | =Supported Events= | ||
+ | |||
+ | {| border="1" | width="100%" | ||
+ | ! <center>Name</center> | ||
+ | ! <center>Event Type</center> | ||
+ | |- | ||
+ | | <center><tt>onSelect</tt></center> | ||
+ | | '''Event:''' <javadoc>org.zkoss.zk.ui.event.SelectEvent</javadoc> | ||
+ | Notifies one that the user has selected a new item in the organigram. | ||
+ | |- | ||
+ | |} | ||
+ | *Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]] | ||
+ | |||
+ | =Supported Children= | ||
+ | |||
+ | *[[ZK_Component_Reference/Layouts/Organigram/Orgchildren | Orgchildren]] | ||
+ | |||
+ | =Version History= | ||
+ | {{LastUpdated}} | ||
+ | |||
+ | {| border='1px' | width="100%" | ||
+ | ! Version !! Date !! Content | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |} | ||
+ | |||
+ | {{ZKComponentReferencePageFooter}} |
Revision as of 08:57, 8 November 2018
Organigram
- Java API: Organigram
- JavaScript API: Organigram
- Available for ZK:
[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.
Organigram supports Client Render on Demand
Browser Support
- For IE, this component only supports 11+, it is based on CSS Flexbox, please check browser compatibility before using it.
Example
<organigram width="600px">
<orgchildren>
<orgitem label="Item1">
<orgchildren>
<orgitem label="Item2">
<orgchildren>
<orgitem label="Item3"/>
<orgitem label="Item4">
<orgchildren>
<orgitem label="Item5"/>
</orgchildren>
</orgitem>
</orgchildren>
</orgitem>
<orgitem label="Item6">
<orgchildren>
<orgitem label="Item7"/>
<orgitem label="Item8"/>
</orgchildren>
</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}"/>
you can also render Organigram with your customized Renderer and Template, please refer to:
Selection
Organigram supports single selection, Orgitem can be selected by users clicking or by programing:
Organigram.setSelectedItem(Orgitem) , Orgitem.setSelected(Boolean).
When an 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 width="600px" 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>
Supported Events
Event: SelectEvent
Notifies one that the user has selected a new item in the organigram. |
- Inherited Supported Events: XulElement
Supported Children
* Orgchildren
Version History
Version | Date | Content |
---|---|---|