OpinionesEnVivo_old/Tstgrid.html at master · Alex-Stanfield/OpinionesEnVivo_old · 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html manifest="manifest.appcache">

<html>
	<head>


		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>EditableGrid - Test by Alex - Creating grid in Javascript</title>

		<script src="editablegrid.js"></script>
		<!-- [DO NOT DEPLOY] --> <script src="editablegrid_renderers.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="editablegrid_editors.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="editablegrid_validators.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="editablegrid_utils.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="editablegrid_charts.js" ></script>
		<link rel="stylesheet" href="editablegrid.css" type="text/css" media="screen">

		<style>
			body { font-family:'lucida grande', tahoma, verdana, arial, sans-serif; font-size:11px; }
			h1 { font-size: 15px; }
			a { color: #548dc4; text-decoration: none; }
			a:hover { text-decoration: underline; }
			table.testgrid { border-collapse: collapse; border: 1px solid #CCB; width: 800px; }
			table.testgrid td, table.testgrid th { padding: 5px; border: 1px solid #E0E0E0; }
			table.testgrid th { background: #E5E5E5; text-align: left; }
			input.invalid { background: red; color: #FDFDFD; }
		</style>

		<script>
			window.onload = function() {
				// this approach is interesting if you need to dynamically create data in Javascript
				var metadata = [];
				metadata.push({ name: "Num", datatype: "string(2)", editable: false});
				metadata.push({ name: "Pregunta", datatype: "string(50)", editable: true});
				metadata.push({ name: "testeo", datatype: "string(5)", editable: false});
				var data = [];
				data.push({id: 1, values: {"Num":" 1","Pregunta":"sample"}});
				data.push({id: 2, values: {"Num":" 2","Pregunta":""}});
				data.push({id: 3, values: {"Num":" 3","Pregunta":""}});
				data.push({id: 4, values: {"Num":" 4","Pregunta":""}});
				data.push({id: 5, values: {"Num":" 5","Pregunta":""}});
				data.push({id: 6, values: {"Num":" 6","Pregunta":""}});
				data.push({id: 7, values: {"Num":" 7","Pregunta":""}});
				data.push({id: 8, values: {"Num":" 8","Pregunta":""}});
				data.push({id: 9, values: {"Num":" 9","Pregunta":""}});
				data.push({id: 10, values: {"Num":"10","Pregunta":""}});

				editableGrid = new EditableGrid("DemoGridJsData",{"enableSort":false});
				editableGrid.load({"metadata": metadata, "data": data});
				//editablegrid.enableSort(false);
				editableGrid.renderGrid("tablecontent", "testgrid");
			}
		</script>

	</head>

	<body>
		<h1>EditableGrid - Minimal Demo - Creating grid in Javascript - <a href="../index.html">Back to menu</a></h1>
		<div id="tablecontent"></div>
	</body>

</html>