jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
95 lines (86 loc) • 4.87 kB
HTML
<html lang="en">
<head>
<title id='Description'>Grid Custom Element BindingToJSONUsingPHP</title>
<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" />
<meta name="description" content="This is an example of Custom Element Grid binding to JSON using PHP." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.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/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type='text/javascript'>
var source =
{
datatype: 'json',
datafields: [
{ name: 'firstname' },
{ name: 'lastname' },
{ name: 'productname' },
{ name: 'quantity', type: 'int' },
{ name: 'price', type: 'float' },
{ name: 'total', type: 'float' }
],
id: 'id',
url: '../../sampledata/data.php',
root: 'data'
};
var dataAdapter = new jqx.dataAdapter(source);
JQXElements.settings['gridSettings'] =
{
source: dataAdapter,
columnsresize: true,
columns: [
{ text: 'First Name', dataField: 'firstname', width: 200 },
{ text: 'Last Name', dataField: 'lastname', width: 200 },
{ text: 'Product', dataField: 'productname', width: 180 },
{ text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
{ text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
]
}
</script>
</head>
<body>
<div class="example-description">
This example shows how to create an Custom element Grid from JSON data. For binding to MySQL Database using PHP and server-side sorting, filtering, editing or paging, please visit our Help Documentation.
</div>
<jqx-grid settings="gridSettings"></jqx-grid>
</body>
</html>
<!--data.php
$firstNames = array("Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian","Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene");
$lastNames = array("Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling","Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier");
$productNames = array("Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espressocon Panna", "Peppermint Mocha Twist", "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha");
$priceValues = array("2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0","1.75","3.25","4.0", "2.25", "1.5", "3.0", "3.3", "4.5", "3.6");
$data = array();
$i=0;
while($i < count($productNames))
{
$row = array();
$productindex = $i;
$price = $priceValues[$productindex];
$quantity = rand(1, 10);
$row["firstname"] = $firstNames[$i];
$row["lastname"] = $lastNames[$i];
$row["productname"] = $productNames[$productindex];
$row["price"] = $price;
$row["quantity"] = $quantity;
$row["total"] = $price * $quantity;
$data[$i] = $row;
$i++;
}
header("Content-type: application/json");
echo "{\"data\":" .json_encode($data). "}";
-->