Customizing the Toolbar Position by JS

Version

Expected Effect

The report toolbar is left-aligned by default, and you can center the toolbar or align the toolbar to the right. The following figure shows the preview effect in a general report.

Note:

To implement this effect in a general report, only one toolbar (either the top or bottom toolbar) can exist in the report.

Implementation Method

You can change the position of the toolbar by adding a JS event.

For details about JS APIs related to the toolbar, see Toolbar API.

Template Design

Download the template by clicking LineForm.cpt.

Event Adding

Open the template, choose Template > Web Attribute > Pagination Preview Setting, select Set for This Template Separately from the Following Settings drop-down box, and add a Loading Start event, as shown in the following figure.

The JS code to center the toolbar is as follows:

_g().getToolbar().toolBarFloat('center');

The JS code to align the toolbar to the left is as follows:

_g().getToolbar().toolBarFloat('left');

The JS code to align the toolbar to the right is as follows:

_g().getToolbar().toolBarFloat('right');

Effect Preview

Save the template and click Pagination Preview. The following figure shows the effect.

Note:

The effect cannot be previewed on mobile terminals.