jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
257 lines (234 loc) • 12.4 kB
HTML
<html lang="en">
<head>
<title id="Description">This demo illustrates the Data Formatting capabilities of the jqxDataAdapter plug-in.</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" />
<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/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<style type="text/css">
table {
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var source =
{
localdata: createArray(),
datatype: "array"
};
var culture = "en";
var availableCultures = ['Czech (Czech Republic)', 'German (Germany)', 'English (Canada)', 'English (United States)',
'French (France)', 'Italian (Italy)', 'Japanese (Japan)', 'Hebrew (Israel)', 'Russian (Russia)', 'Croatian (Croatia)', 'Sanskrit (India)'
];
// create a DropDownList
$("#jqxDropDownList").jqxDropDownList({ source: availableCultures, selectedIndex: 3, width: '200px', height: '25px' });
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (records) {
// get data records.
var length = records.length;
// loop through the records and display them in a table.
var html = "<table border='1'><tr><th align='left'>Name</th><th align='left'>Ship Date</th><th align='left'>Product</th><th align='right'>Price</th><th align='right'>Quantity</th></tr>";
for (var i = 0; i < length; i++) {
var record = records[i];
html += "<tr>";
html += "<td>" + record.name + "</td>";
var currentCulture = Globalize.cultures[culture];
// create localization object.
var localizationObject = currentCulture.calendar;
// set percentage symbol.
localizationObject.percentsymbol = currentCulture.numberFormat.percent.symbol;
// set currency symbol.
localizationObject.currencysymbol = currentCulture.numberFormat.currency.symbol;
// set decimal separator.
localizationObject.decimalseparator = currentCulture.numberFormat['.'];
// set thousands separator.
localizationObject.thousandsseparator = currentCulture.numberFormat[','];
// set currency symbol position.
localizationObject.currencysymbolposition = currentCulture.numberFormat.currency.pattern[1].substring(0, 1) == 'n' ? "after" : "before";
html += "<td>" + dataAdapter.formatDate(record.date, 'D', localizationObject) + "</td>";
html += "<td>" + record.productname + "</td>";
html += "<td>" + dataAdapter.formatNumber(record.price, 'c2', localizationObject) + "</td>";
html += "<td>" + dataAdapter.formatNumber(record.quantity, 'n', localizationObject) + "</td>";
html += "</tr>";
}
html += "</table>";
$("#table").html(html);
},
loadError: function (jqXHR, status, error) {
},
beforeLoadComplete: function (records) {
}
});
// perform data binding.
dataAdapter.dataBind();
$("#jqxDropDownList").on('select', function (event) {
var index = event.args.index;
switch (index) {
case 0:
$.getScript('../../../jqwidgets/globalization/globalize.culture.cs-CZ.js', function () {
culture = 'cs-CZ';
// perform data binding.
dataAdapter.dataBind();
});
break;
case 1:
$.getScript('../../../jqwidgets/globalization/globalize.culture.de-DE.js', function () {
culture = 'de-DE';
// perform data binding.
dataAdapter.dataBind();
});
break;
case 2:
$.getScript('../../../jqwidgets/globalization/globalize.culture.en-CA.js', function () {
culture = 'en-CA';
// perform data binding.
dataAdapter.dataBind();
});
break;
case 3:
$.getScript('../../../jqwidgets/globalization/globalize.culture.en-US.js', function () {
culture = 'en';
// perform data binding.
dataAdapter.dataBind();
});
break;
case 4:
$.getScript('../../../jqwidgets/globalization/globalize.culture.fr-FR.js', function () {
culture = 'fr-FR';
// perform data binding.
dataAdapter.dataBind();
});
break;
case 5:
$.getScript('../../../jqwidgets/globalization/globalize.culture.it-IT.js', function () {
culture = 'it-IT';
// perform data binding.
dataAdapter.dataBind();
});
break;
case 6:
$.getScript('../../../jqwidgets/globalization/globalize.culture.ja-JP.js', function () {
culture = 'ja-JP';
// perform data binding.
dataAdapter.dataBind();
});
break;
case 7:
$.getScript('../../../jqwidgets/globalization/globalize.culture.he-IL.js', function () {
culture = 'he-IL';
// perform data binding.
dataAdapter.dataBind();
});
break;
case 8:
$.getScript('../../../jqwidgets/globalization/globalize.culture.ru-RU.js', function () {
culture = 'ru-RU';
// perform data binding.
dataAdapter.dataBind();
});
break;
case 9:
$.getScript('../../../jqwidgets/globalization/globalize.culture.hr-HR.js', function () {
culture = 'hr-HR';
// perform data binding.
dataAdapter.dataBind();
});
break;
case 10:
$.getScript('../../../jqwidgets/globalization/globalize.culture.sa-IN.js', function () {
culture = 'sa-IN';
// perform data binding.
dataAdapter.dataBind();
});
break;
}
});
});
function createArray() {
// prepare the 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", "Caramel 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 < 20; 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["id"] = i;
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["name"] = row["firstname"] + " " + row["lastname"];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
var date = new Date();
date.setFullYear(2013, Math.floor(Math.random() * 11), Math.floor(Math.random() * 27));
date.setHours(0, 0, 0, 0);
row["date"] = date;
data[i] = row;
}
return data;
}
</script>
</head>
<body>
<div>
<div style='float: left; font-family: "Verdana", "sans-serif"; font-size: 13px;'>
<span style="position: relative; top: 4px;">Choose Culture:</span>
</div>
<div style="margin-left: 5px; float: left;" id='jqxDropDownList'>
</div>
</div>
<div style="clear: both;"></div>
<div style="margin-top: 15px;" id="table">
Loading...
</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>