jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
88 lines (83 loc) • 5.74 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/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var source =
{
localdata: [
["Alfreds Futterkiste", "Maria Anders", "Sales Representative", "Obere Str. 57", "Berlin", "Germany"],
["Ana Trujillo Emparedados y helados", "Ana Trujillo", "Owner", "Avda. de la Constitucin 2222", "Mxico D.F.", "Mexico"],
["Antonio Moreno Taquera", "Antonio Moreno", "Owner", "Mataderos 2312", "Mxico D.F.", "Mexico"],
["Around the Horn", "Thomas Hardy", "Sales Representative", "120 Hanover Sq.", "London", "UK"],
["Berglunds snabbkp", "Christina Berglund", "Order Administrator", "Berguvsvgen 8", "Lule", "Sweden"],
["Blauer See Delikatessen", "Hanna Moos", "Sales Representative", "Forsterstr. 57", "Mannheim", "Germany"],
["Blondesddsl pre et fils", "Frdrique Citeaux", "Marketing Manager", "24, place Klber", "Strasbourg", "France"],
["Blido Comidas preparadas", "Martn Sommer", "Owner", "C\/ Araquil, 67", "Madrid", "Spain"],
["Bon app'", "Laurence Lebihan", "Owner", "12, rue des Bouchers", "Marseille", "France"],
["Bottom-Dollar Markets", "Elizabeth Lincoln", "Accounting Manager", "23 Tsawassen Blvd.", "Tsawassen", "Canada"],
["B's Beverages", "Victoria Ashworth", "Sales Representative", "Fauntleroy Circus", "London", "UK"],
["Cactus Comidas para llevar", "Patricio Simpson", "Sales Agent", "Cerrito 333", "Buenos Aires", "Argentina"],
["Centro comercial Moctezuma", "Francisco Chang", "Marketing Manager", "Sierras de Granada 9993", "Mxico D.F.", "Mexico"],
["Chop-suey Chinese", "Yang Wang", "Owner", "Hauptstr. 29", "Bern", "Switzerland"],
["Comrcio Mineiro", "Pedro Afonso", "Sales Associate", "Av. dos Lusadas, 23", "Sao Paulo", "Brazil"],
["Consolidated Holdings", "Elizabeth Brown", "Sales Representative", "Berkeley Gardens 12 Brewery", "London", "UK"],
["Drachenblut Delikatessen", "Sven Ottlieb", "Order Administrator", "Walserweg 21", "Aachen", "Germany"],
["Du monde entier", "Janine Labrune", "Owner", "67, rue des Cinquante Otages", "Nantes", "France"],
["Eastern Connection", "Ann Devon", "Sales Agent", "35 King George", "London", "UK"],
["Ernst Handel", "Roland Mendel", "Sales Manager", "Kirchgasse 6", "Graz", "Austria"]
],
datafields: [
{ name: 'CompanyName', type: 'string', map: '0'},
{ name: 'ContactName', type: 'string', map: '1' },
{ name: 'Title', type: 'string', map: '2' },
{ name: 'Address', type: 'string', map: '3' },
{ name: 'City', type: 'string', map: '4' },
{ name: 'Country', type: 'string', map: '5' }
],
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#grid").jqxGrid(
{
width: getWidth('Grid'),
source: dataAdapter,
columnsresize: true,
sortable: true,
columns: [
{ text: 'Company Name', datafield: 'CompanyName', width: 200 },
{ text: 'Contact Name', datafield: 'ContactName', width: 150 },
{ text: 'Contact Title', datafield: 'Title', width: 100 },
{ text: 'Address', datafield: 'Address', width: 100 },
{ text: 'City', datafield: 'City', width: 100 },
{ text: 'Country', datafield: 'Country' }
]
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id="grid">
</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>