jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
169 lines (156 loc) • 5.6 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>In this example is demonstrated how the get all orders by a selected Employee. Select an Employee from the ComboBox.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxcombobox.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/jqxmenu.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var employeeSource =
{
datatype: "json",
datafields: [
{ name: 'EmployeeID', type: 'int'},
{ name: 'FirstName', type: 'string'},
{ name: 'LastName', type: 'string'},
{ name: 'Name', type: 'string'}
],
url: "combobox_and_grid_employees.php",
async: false
};
var employeesDataAdapter = new $.jqx.dataAdapter(employeeSource);
// create a comboBox.
// The displayMember specifies that the list item's text will be the Employee's Name.
// The valueMember specifies that the list item's value will be the Employee's ID.
$("#jqxcombobox").jqxComboBox(
{
width: 250,
height: 25,
source: employeesDataAdapter,
promptText: 'Select an Employee',
selectedIndex: -1,
displayMember: 'Name',
valueMember: 'EmployeeID'
});
$("#jqxcombobox").bind('select', function(event)
{
// get employee's ID.
var employeeID = event.args.item.value;
// prepare the data
var ordersSource =
{
datatype: "json",
datafields: [
{ name: 'EmployeeID', type: 'string', values: { source: employeesDataAdapter.records, name: 'Name' }},
{ name: 'OrderDate', type: 'date'},
{ name: 'ShipCity', type: 'string'},
{ name: 'ShipAddress', type: 'string'},
{ name: 'ShipCountry', type: 'string'}
],
type: 'POST',
data: {EmployeeID:employeeID},
url: "combobox_and_grid_orders.php"
};
var dataAdapter = new $.jqx.dataAdapter(ordersSource);
$("#grid").jqxGrid({
source: dataAdapter,
columns:
[
{datafield: "EmployeeID", text: "Employee", width: '30%'},
{datafield: "OrderDate", cellsformat: "d", text: "Order Date", width: '30%'},
{datafield: "ShipCity", text: "Ship City", width: '25%'},
{datafield: "ShipAddress", text: "Ship Address", width: '25%'},
{datafield: "ShipCountry", text: "Ship Country", width: '20%'}
]
});
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<span>Get Orders by Employee:</span>
<div style="margin-top: 7px; margin-bottom: 5px;" id="jqxcombobox"></div>
<div id="grid"></div>
</div>
</body>
</html>
<!--combobox_and_grid_employees.php
#Include the connect.php file
include('connect.php');
#Connect to the database
//connection String
$mysqli = new mysqli($hostname, $username, $password, $database);
/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
// get data and store in a json array
$query = "SELECT EmployeeID, FirstName, LastName FROM Employees";
$result = $mysqli->prepare($query);
$result->execute();
/* bind result variables */
$result->bind_result($EmployeeID, $FirstName, $LastName);
/* fetch values */
while ($result -> fetch()) {
$employees[] = array(
'EmployeeID' => $EmployeeID,
'FirstName' => $FirstName,
'LastName' => $LastName,
'Name' => $FirstName . " " . $LastName
);
}
echo json_encode($employees);
/* close statement */
$result->close();
/* close connection */
$mysqli->close();
-->
<!--combobox_and_grid_orders.php
#Include the connect.php file
include ('connect.php');
// Connect to the database
// connection String
$mysqli = new mysqli($hostname, $username, $password, $database);
/* check connection */
if (mysqli_connect_errno())
{
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
// get data and store in a json array
$query = "SELECT EmployeeID, OrderDate, ShipCity, ShipAddress, ShipCountry FROM Orders where EmployeeID=?";
$result = $mysqli->prepare($query);
$result->bind_param('i', $_POST["EmployeeID"]);
$result->execute();
/* bind result variables */
$result->bind_result($EmployeeID, $OrderDate, $ShipCity, $ShipAddress, $ShipCountry);
/* fetch values */
while ($result->fetch())
{
$orders[] = array(
'EmployeeID' => $EmployeeID,
'OrderDate' => $OrderDate,
'ShipCity' => $ShipCity,
'ShipAddress' => $ShipAddress,
'ShipCountry' => $ShipCountry
);
}
echo json_encode($orders);
/* close statement */
$result->close();
/* close connection */
$mysqli->close();
-->