jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
220 lines (193 loc) • 8.2 kB
HTML
<html lang="en">
<head>
<title id='Description'>This example shows how to create a Grid from Array data.</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/jqxmenu.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.chart.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/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.api.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="generatedata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<style>
#toolbar {
display: flex;
height: 100%;
padding: 0 1rem;
}
#toolbar.warning:after {
content: 'Selected data cannot be used to create a chart.';
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--smart-error);
}
#toolbar > div {
display: flex;
align-items: flex-end;
justify-content: center;
margin-right: 15px;
width: 35px;
height: 30px;
height: 100%;
font-size: 12px;
background-size: contain;
background-repeat: no-repeat;
user-select: none;
cursor: pointer;
}
#toolbar > div:hover {
background-color: var(--smart-grid-column-header-background-hover);
}
#toolbar > div:active {
background-color: var(--smart-grid-column-header-background-active);
}
#toolbar > div.warning {
outline: 2px solid var(--smart-error);
}
#column {
background-image: url("../../../jqwidgets/styles/images/create-column.png");
}
#line {
background-image: url("../../../jqwidgets/styles/images/create-line.png");
}
#pie {
background-image: url("../../../jqwidgets/styles/images/create-pie.png");
}
#bar {
background-image: url("../../../jqwidgets/styles/images/create-bar.png");
}
#area {
background-image: url("../../../jqwidgets/styles/images/create-area.png");
}
#scatter {
background-image: url("../../../jqwidgets/styles/images/create-scatter.png");
}
[theme="dark"] #column {
background-image: url("../../../jqwidgets/styles/images/create-column-dark.png");
}
[theme="dark"] #line {
background-image: url("../../../jqwidgets/styles/images/create-line-dark.png");
}
[theme="dark"] #pie {
background-image: url("../../../jqwidgets/styles/images/create-pie-dark.png");
}
[theme="dark"] #bar {
background-image: url("../../../jqwidgets/styles/images/create-bar-dark.png");
}
[theme="dark"] #area {
background-image: url("../../../jqwidgets/styles/images/create-area-dark.png");
}
[theme="dark"] #scatter {
background-image: url("../../../jqwidgets/styles/images/create-scatter-dark.png");
}
</style>
<script type="text/javascript">
window.onload = function() {
var grid = new jqxGrid("#jqxgrid", {
width: '100%',
autoheight: true,
rendertoolbar: function(toolbar){
var template = document.getElementById('toolbarTemplate');
var chartToolbar = document.importNode(template.content, true);
var toolbarElement = toolbar[0];
toolbarElement.appendChild(chartToolbar);
toolbarElement.querySelector('#column').addEventListener('click', function () {
grid.createChart('column');
});
toolbarElement.querySelector('#line').addEventListener('click', function () {
grid.createChart('line');
});
toolbarElement.querySelector('#pie').addEventListener('click', function () {
grid.createChart('pie');
});
toolbarElement.querySelector('#bar').addEventListener('click', function () {
grid.createChart('bar');
});
toolbarElement.querySelector('#area').addEventListener('click', function () {
grid.createChart('area');
});
toolbarElement.querySelector('#scatter').addEventListener('click', function () {
grid.createChart('scatter');
});
},
source: {
localData: [
{ Name: 'Zavier Vargas', Income: 59039, Expenses: 13303, Debt: 15000 },
{ Name: 'Mark Beasley', Income: 22468, Expenses: 7600, Debt: 0 },
{ Name: 'Skyla Khan', Income: 111459, Expenses: 101009, Debt: 7300 },
{ Name: 'Deandre Weber', Income: 28233, Expenses: 31045, Debt: 21000 },
{ Name: 'Isla Doyle', Income: 92030, Expenses: 90581, Debt: 160000 },
{ Name: 'Jaslyn Barron', Income: 112083, Expenses: 100322, Debt: 43500 },
{ Name: 'Monserrat Mccann', Income: 92510, Expenses: 28345, Debt: 17890 },
{ Name: 'Britney Fuller', Income: 55091, Expenses: 55020, Debt: 31000 },
{ Name: 'Bernard Munoz', Income: 10030, Expenses: 43012, Debt: 30000 },
{ Name: 'Sherlyn Vincent', Income: 81209, Expenses: 14390, Debt: 3000 }
],
dataFields: [{
name: 'Name',
type: 'string'
}, {
name: 'Income',
type: 'number'
}, {
name: 'Expenses',
type: 'number'
}, {
name: 'Debt',
type: 'number'
}],
datatype: "array"
},
showtoolbar: true,
toolbarheight: 50,
sortable: true,
ready: function () {
},
selectionmode: 'multiplecellsadvanced',
columns: [
{ text: 'Name', dataField: 'Name', width: '25%'},
{ text: 'Income (2020)', dataField: 'Income', cellsFormat: 'c0', width: '25%' },
{ text: 'Expenses (2020)', dataField: 'Expenses', cellsFormat: 'c0', width: '25%' },
{ text: 'Remaining Debt', dataField: 'Debt', cellsFormat: 'c0' }
]
});
}
</script>
</head>
<body class='default'>
<template id="toolbarTemplate">
<div id="toolbar">
<div id="column">Column</div>
<div id="line">Line</div>
<div id="pie">Pie</div>
<div id="bar">Bar</div>
<div id="area">Area</div>
<div id="scatter">Scatter</div>
</div>
</template>
<div id="jqxgrid"></div>
</body>
</html>