js.datagrid/sample.grid.simple.htm at master · pcostantini/js.datagrid · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<title>// Simple Grid</title>
	<style type="text/css">
        body { padding: 10px; font-family: Tahoma; font-size: 0.8em; }

        /* grid - row hover */
        table.grid * tr.over td { background-color: #ffc; cursor: pointer; }
	</style>
	<link type="text/css" href="css/datagrid.css" rel="stylesheet" />
</head>
<body>
	<h1>js.datagrid.sample.simple</h1>

	<div id="simpleGridContainer"></div>

	<!-- dependencies -->
	<script type="text/javascript" src="js/lib.jquery-1.2.5.js"></script>
	<script type="text/javascript" src="js/lib.base.js"></script>
	<script type="text/javascript" src="js/lib.datagrid.js"></script>

	<script type="text/javascript">
	    $(document).ready(function() {
	        // create
	        var grid = new DataGrid(document.getElementById("simpleGridContainer"), $schema, $data, true);

	        // row on click
	        grid.events.bind("row_click", function(e, args) {
	            var rowData = args.dataItem
	            alert("Clicked on '" + rowData.Name + "'");
	        });

	        // first time init
	        grid.init();
	    });

	    // SCHEMA
	    var $schema = [
	        {
	            headerText: "Name",
	            propertyName: "Name"
	        },
	        {
	            headerText: "Email",
	            propertyName: "Email"
	        },
	        {
	            headerText: "Some Number",
	            propertyName: "NumericProp",
	            type: "number"
            }];

	    // MODEL
        var $data = [
            { Name: "Camacho, Amos H.", Email: "adipiscing@laoreetlibero.org", DateProp: new Date(2008, 10, 29), NumericProp: 2199 },
            { Name: "Potts, Olga A.", Email: "libero.et.tristique@CurabiturdictumPhasellus.com", DateProp: new Date(2009, 07, 26), NumericProp: 7000 },
            { Name: "Duke, Upton P.", Email: "id.magna@suscipitnonummyFusce.org", DateProp: new Date(2009, 10, 14), NumericProp: 4949 },
            { Name: "Downs, Kevyn H.", Email: "eu.arcu@duiaugue.com", DateProp: new Date(2008, 11, 23), NumericProp: 4532 },
            { Name: "Bryan, Dominique C.", Email: "In.lorem@arcuCurabiturut.ca", DateProp: new Date(2009, 08, 14), NumericProp: 6002 },
            { Name: "Wilkinson, Chanda B.", Email: "commodo.at.libero@dapibus.com", DateProp: new Date(2009, 8, 8), NumericProp: 7998 },
            { Name: "Kent, Garth O.", Email: "quam.elementum.at@tempordiamdictum.com", DateProp: new Date(2009, 6, 8), NumericProp: 1769 },
            { Name: "Allen, Lacy K.", Email: "ac@egestasa.org", DateProp: new Date(2010, 2, 7), NumericProp: 3900 },
            { Name: "Campos, Walker D.", Email: "ipsum.Donec@venenatis.edu", DateProp: new Date(2009, 8, 17), NumericProp: 1130 },
            { Name: "Rosa, Vivien H.", Email: "sapien.Aenean.massa@iaculisaliquetdiam.ca", DateProp: new Date(2009, 6, 13), NumericProp: 7606 },
            { Name: "Brooks, Cara F.", Email: "magna@quam.org", DateProp: new Date(2009, 8, 20), NumericProp: 5038 },
            { Name: "Rollins, Claire F.", Email: "Donec.tincidunt@quisurna.com", DateProp: new Date(2009, 10, 6), NumericProp: 6299 },
            { Name: "Wagner, Sasha X.", Email: "volutpat.Nulla.facilisis@Donecestmauris.org", DateProp: new Date(2009, 2, 7), NumericProp: 7713 },
            { Name: "Beard, Urielle V.", Email: "elit.Nulla.facilisi@hendreritaarcu.com", DateProp: new Date(2009, 5, 31), NumericProp: 5704 },
            { Name: "Cantu, Chastity G.", Email: "velit.dui.semper@ipsum.ca", DateProp: new Date(2010, 1, 31), NumericProp: 7328 },
            { Name: "Mercado, Dara C.", Email: "Cras.eu.tellus@pede.com", DateProp: new Date(2009, 12, 18), NumericProp: 8220 },
            { Name: "Hoover, Kaseem P.", Email: "Sed.diam@consequatpurus.edu", DateProp: new Date(2009, 2, 1), NumericProp: 7895 },
            { Name: "Blevins, Axel I.", Email: "hymenaeos.Mauris.ut@Nuncsollicitudin.ca", DateProp: new Date(2008, 12, 22), NumericProp: 7522 },
            { Name: "Solomon, Zia S.", Email: "nec.enim.Nunc@enimmi.edu", DateProp: new Date(2009, 11, 24), NumericProp: 7341 },
            { Name: "Savage, Todd C.", Email: "ac.libero.nec@asollicitudin.org", DateProp: new Date(2009, 9, 9), NumericProp: 8188 },
            { Name: "Spence, Ann A.", Email: "feugiat.non.lobortis@lorem.org", DateProp: new Date(2008, 9, 26), NumericProp: 3894 },
            { Name: "Marks, Octavius I.", Email: "malesuada.Integer@diam.com", DateProp: new Date(2008, 8, 7), NumericProp: 3276 },
            { Name: "Dejesus, Lila H.", Email: "mollis.nec@Aenean.ca", DateProp: new Date(2008, 7, 11), NumericProp: 4586 },
            { Name: "Griffin, Ainsley D.", Email: "elit.pellentesque.a@nec.com", DateProp: new Date(2009, 3, 25), NumericProp: 8666 }];
	</script>
</body>
</html>