jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
104 lines (92 loc) • 5.25 kB
HTML
<html lang="en">
<head>
<title id='Description'>JavaScript PivotGrid - cell values alignment and number settings</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.light.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpivot.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpivotgrid.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare sample data
var data = new Array();
var countries =
[
"Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
];
var dataPoints =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
for (var i = 0; i < countries.length * 2; i++) {
var row = {};
var value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
row["country"] = countries[i % countries.length];
row["value"] = value;
data[i] = row;
}
// create a data source and data adapter
var source =
{
localdata: data,
datatype: "array",
datafields:
[
{ name: 'country', type: 'string' },
{ name: 'value', type: 'number' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
var pivotDataSource = new $.jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
rows: [{ dataField: 'country', width: 190 }],
columns: [],
values: [
{ dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
{ dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
]
});
// create a pivot grid
$('#divPivotGrid').jqxPivotGrid(
{
source: pivotDataSource,
treeStyleRows: true,
autoResize: false,
multipleSelectionEnabled: true
});
});
</script>
</head>
<body class='default'>
<div id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
</div>
<div class="example-description">
<h2>Description</h2>
<div style="width: 800px;">
This pivot grid example demonstrates how to change the alignment of the values displayed in the pivot grid cells.
The default behavior is to align the values to the right side of the grid cells. To change the default cells alignment,
use the formatSettings align property during the definition of the value fields of the pivot grid. In addition to
cells content alignment, the formatSettings object allows you to specify how to format the numbers displayed in the pivot
grid cells. For example, you may change the number of digits after the decimal point, the thousands separator, whether
negative numbers will be displayed in brackets or with a minus sign, as well as custom prefix and sufix text.
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>