jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
122 lines (107 loc) • 6.14 kB
HTML
<html lang="en">
<head>
<title id='Description'>In this sample is demonstrated how to filter through all records in the Grid.</title>
<meta name="description" content="JavaScript Grid which has multiple built-in aggregates" />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.blue.css" type="text/css" />
<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/jqxgrid.edit.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.aggregates.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="generatedata.js"></script>
<script type="text/javascript">
$( document ).ready( function () {
// prepare the data
var data = generatedata( 200 );
var source =
{
localdata: data,
datatype: "array",
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'available', type: 'bool' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' }
],
updaterow: function ( rowid, rowdata ) {
// synchronize with the server - send update command
}
};
var dataAdapter = new $.jqx.dataAdapter( source );
// initialize jqxGrid
var grid = new jqxGrid( "#grid",
{
width: getWidth( 'Grid' ),
source: dataAdapter,
filterable: true,
sortable: true,
showfilterbar: true,
columns: [
{ text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 170 },
{ text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 170 },
{
text: 'Product', datafield: 'productname', width: 170,
},
{
text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125,
},
{
text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2',
},
{
text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2'
} ]
} );
var grid2 = new jqxGrid( "#grid2",
{
width: getWidth( 'Grid' ),
source: dataAdapter,
filterable: true,
sortable: true,
filterbarmode: 'simple',
showfilterbar: true,
columns: [
{ text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 170 },
{ text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 170 },
{
text: 'Product', datafield: 'productname', width: 170,
},
{
text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125,
},
{
text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2',
},
{
text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2'
} ]
} );
} );
</script>
</head>
<body class='default'>
<h3>Grid with Search Input and Filter By List</h3>
<div id="grid"></div>
<br />
<h3>Grid with Search Input</h3>
<div id="grid2"></div>
</body>
</html>