Create Pivottable"

From Documentation
(Created page with "{{ZKPivottableEssentialsPageHeader}} {{Template:UnderConstruction}} <!-- TODO --> =Version History= {{LastUpdated}} {| border='1px' | width="100%" ! Version !! Date !! Content...")
 
(12 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{ZKPivottableEssentialsPageHeader}}
 
{{ZKPivottableEssentialsPageHeader}}
  
{{Template:UnderConstruction}}
+
With a PivotModel, we can easily create a Pivottable component.
  
<!-- TODO -->
+
==Create a Pivottable==
 +
Given a PivotModel, creating a Pivottable is as simple as
 +
<source lang="xml">
 +
<pivottable model="${model}" />
 +
</source>
  
=Version History=
+
==Attributes==
 +
 
 +
===Grand totals===
 +
You can show or hide grand total rows or columns by specfiying
 +
<source lang="xml">
 +
<pivottable model="${model}" grandTotalForColumns="false"
 +
grandTotalForRows="false" />
 +
</source>
 +
Default values are <tt>true</tt>.
 +
 
 +
===Data orientation===
 +
Data orientation means how to arrange data when there are more than one data fields. For example, if we specify "Price" and "Mileage" as data field,
 +
 
 +
<source lang="xml">
 +
<pivottable model="${model}" dataOrient="column" />
 +
</source>
 +
 
 +
gives
 +
 
 +
[[Image: ZKPivotEsn_work_pivot_24.png]]
 +
 
 +
and
 +
 
 +
<source lang="xml">
 +
<pivottable model="${model}" dataOrient="row" />
 +
</source>
 +
 
 +
will give
 +
 
 +
[[Image: ZKPivotEsn_work_pivot_22.png]]
 +
 
 +
 
 +
&nbsp;
 +
 
 +
==Title Cells==
 +
Pivottable can accept up to 3 child components, which will represent the 3 title cells in the order of data title, column title, and row title. For example,
 +
 
 +
<source lang="xml">
 +
<pivottable model="${model}">
 +
<div style="color: red">My Data Title</div>
 +
<div style="color: blue">My Column Title</div>
 +
<div style="color: green">My Row Title</div>
 +
</pivottable>
 +
</source>
 +
 
 +
results in
 +
 
 +
[[Image: ZKPivotEsn_work_pivot_26.png]]
 +
 
 +
<!-- TODO: more example -->
 +
<!--
 +
===Add a title cell in Java==
 +
TODO: add individual title cell in Java
 +
-->
 +
 
 +
==Paging==
 +
As you have noticed, Pivottable has built-in paging support. Like Paging on Grid or Listbox, you can set page size and current page number. For example,
 +
 
 +
<source lang="xml">
 +
<!-- suppose model has Price, Mileage, Date as data field -->
 +
<pivottable model="${model}" pageSize="10" dataOrient="row" />
 +
</source>
 +
 
 +
[[Image: ZKPivotEsn_work_pivot_32.png]]
 +
 
 +
Note:
 +
* Page size does not include the size of grand total rows.
 +
* Default page size is 20.
 +
 
 +
 
 +
 
 +
==Manipulation==
 +
Users can interact with a Pivottable in the following way:
 +
*Open/close header nodes by clicking on the plus/minus sign on row and column fields.
 +
*Resize column width by dragging their edge.
 +
 
 +
Other actions are available through call Pivottable API and PivotModel API. The next section will introduce samples of wiring these API to the user interface.
 +
 
 +
==Version History==
 
{{LastUpdated}}
 
{{LastUpdated}}
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"

Revision as of 09:31, 28 September 2017


With a PivotModel, we can easily create a Pivottable component.

Create a Pivottable

Given a PivotModel, creating a Pivottable is as simple as

<pivottable model="${model}" />

Attributes

Grand totals

You can show or hide grand total rows or columns by specfiying

<pivottable model="${model}" grandTotalForColumns="false" 
	grandTotalForRows="false" />

Default values are true.

Data orientation

Data orientation means how to arrange data when there are more than one data fields. For example, if we specify "Price" and "Mileage" as data field,

<pivottable model="${model}" dataOrient="column" />

gives

ZKPivotEsn work pivot 24.png

and

<pivottable model="${model}" dataOrient="row" />

will give

ZKPivotEsn work pivot 22.png


 

Title Cells

Pivottable can accept up to 3 child components, which will represent the 3 title cells in the order of data title, column title, and row title. For example,

<pivottable model="${model}">
	<div style="color: red">My Data Title</div>
	<div style="color: blue">My Column Title</div>
	<div style="color: green">My Row Title</div>
</pivottable>

results in

ZKPivotEsn work pivot 26.png


Paging

As you have noticed, Pivottable has built-in paging support. Like Paging on Grid or Listbox, you can set page size and current page number. For example,

<!-- suppose model has Price, Mileage, Date as data field -->
<pivottable model="${model}" pageSize="10" dataOrient="row" />

ZKPivotEsn work pivot 32.png

Note:

  • Page size does not include the size of grand total rows.
  • Default page size is 20.


Manipulation

Users can interact with a Pivottable in the following way:

  • Open/close header nodes by clicking on the plus/minus sign on row and column fields.
  • Resize column width by dragging their edge.

Other actions are available through call Pivottable API and PivotModel API. The next section will introduce samples of wiring these API to the user interface.

Version History

Last Update : 2017/09/28


Version Date Content
     



Last Update : 2017/09/28

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.