Processing...
Description & Source Code

The Organigram component renders an organizational chart from a tree data structure. The single <orgchildren> container holds the root <orgitem> nodes, and each node nests further levels by placing another <orgchildren> inside it.

organigram.zul
<zk>
	<style src="/widgets/tree/organigram/organigram.css"/>
	<organigram sclass="demo-organigram" width="600px">
		<orgchildren>
			<orgitem label="CEO">
				<orgchildren>
					<orgitem label="VP Engineering">
						<orgchildren>
							<orgitem label="Backend Team"/>
							<orgitem label="Frontend Team"/>
						</orgchildren>
					</orgitem>
					<orgitem label="VP Sales">
						<orgchildren>
							<orgitem label="North Region"/>
							<orgitem label="South Region"/>
						</orgchildren>
					</orgitem>
				</orgchildren>
			</orgitem>
		</orgchildren>
	</organigram>
</zk>