jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
171 lines (146 loc) • 7.92 kB
HTML
<html lang="en">
<head>
<title id='Description'>JavaScript PivotGrid - rows, columsn and cells styling with CSS</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>
<style>
.columnStyle {
background-color: rgba(254, 173, 117, 255);
}
.columnStyleSelected {
background-color: rgba(234, 153, 87, 255);
}
.rowStyle {
background-color: rgba(187, 232, 227, 255);
}
.rowStyleSelected {
background-color: rgba(167, 212, 207, 255);
}
.cellStyle {
background-color: rgba(255, 255, 255, 255);
}
.cellStyleSelected {
background-color: rgba(239, 249, 136, 255);
color: rebeccapurple;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
// prepare sample data
var data = new Array();
var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
var productNames =
[
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];
var priceValues =
[
"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 < 500; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
var source =
{
localdata: data,
datatype: "array",
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', 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: 'firstname', className: 'rowStyle', classNameSelected: 'rowStyleSelected' },
{ dataField: 'lastname', className: 'rowStyle', classNameSelected: 'rowStyleSelected' }
],
columns: [
{ dataField: 'productname', className: 'columnStyle', classNameSelected: 'columnStyleSelected' }
],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == "Black Tea" || value == "Green Tea")
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'Sum', formatSettings: { prefix: '$', decimalPlaces: 2 }, className: 'columnStyle', classNameSelected: 'columnStyleSelected', cellsClassName: 'cellStyle', cellsClassNameSelected: 'cellStyleSelected' },
{ dataField: 'price', 'function': 'count', text: 'Count', className: 'columnStyle', classNameSelected: 'columnStyleSelected', cellsClassName: 'cellStyle', cellsClassNameSelected: 'cellStyleSelected' },
{ dataField: 'price', 'function': 'average', text: 'Average', formatSettings: { prefix: '$', decimalPlaces: 2 }, className: 'columnStyle', classNameSelected: 'columnStyleSelected', cellsClassName: 'cellStyle', cellsClassNameSelected: 'cellStyleSelected' },
]
});
// create a pivot grid
$('#divPivotGrid').jqxPivotGrid(
{
theme: 'classic',
source: pivotDataSource,
treeStyleRows: false,
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">
<br />
<h2>Description</h2>
<div style="width: 800px;">
This is an example of Pivot Grid with custom style of the grid cells depending on their current selection state.
You can override the style of any cell, row or column using standard CSS. The custom styles can be applied during
the data binding definitions and you can use different styles for different pivot dataFields. The pivot grid also
allows you to override the style of individual rows and columns at runtime after the databinding step.
</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>