jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
144 lines (130 loc) • 6.05 kB
HTML
<html lang="en">
<head>
<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/jqxwindow.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdocking.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdatatable.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/jqxdata.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
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 < 200; 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;
}
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);
var columns = [{
text: 'Name',
dataField: 'firstname',
width: 200
}, {
text: 'Last Name',
dataField: 'lastname',
width: 200
}, {
text: 'Unit Price',
dataField: 'price',
width: 90,
cellsAlign: 'right',
align: 'right',
cellsFormat: 'c2'
}, {
text: 'Total',
dataField: 'total',
cellsAlign: 'right',
align: 'right',
cellsFormat: 'c2'
}];
$("#table1").jqxDataTable({
width: '100%',
height: '100%',
source: dataAdapter,
columns: columns
});
var dataAdapter2 = new $.jqx.dataAdapter(source);
$("#table2").jqxDataTable({
width: '100%',
height: '100%',
source: dataAdapter2,
columns: columns
});
$("#jqxDocking").jqxDocking({
width: getWidth('docking')
});
$('#jqxDocking').jqxDocking('showAllCollapseButtons');
});
</script>
</head>
<body class='default'>
<div id="jqxDocking">
<div>
<div id="window1">
<div>Header 1</div>
<div style='overflow: hidden; height: 200px;'>
<div id="table1"></div>
</div>
</div>
<div id="window2">
<div>Header 2</div>
<div style='overflow: hidden; height: 200px;'>
<div id='table2'></div>
</div>
</div>
</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>