OpenJS-Grid/masterdetail.html at master · optikalefx/OpenJS-Grid · 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
<!DOCTYPE html>
<html lang="en">
	<head>


		<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
		<link rel="stylesheet" href="grid.css" title="openJsGrid"/>
		<script src="jquery.js" type="text/javascript"></script>
		<script src="root.js"></script>
		<script src="grid.js"></script>

		<script type="text/javascript">
			$(function() {

				var $countryGrid = $(".countries").grid();
				var $cityGrid = $(".cities").grid();

				$countryGrid.on("rowClick",function(event, $row, rowData) {
					var code = rowData.Code;

					$cityGrid.grid("load",{
						action: "world-ajax.php?type=city&country=" + code
					});

				});


				// row hover
				$countryGrid.on("mouseover",".cell[data-row]",function() {
					var id = this.getAttribute("data-row");
					$(".grid-row-"+id).css("background","#eee");
				});

				// row out
				$countryGrid.on("mouseout",".cell[data-row]",function() {
					var id = this.getAttribute("data-row");
					$(".grid-row-"+id).css("background","#fff");
				});

			});
		</script>
	</head>
	<body>

		<h2>Countries</h2>
		<table class="grid countries" action="world-ajax.php?type=country">
			<tr>
				<th col="Code">Code</th>
				<th col="Name">Name</th>
				<th col="Continent">Continent</th>
				<th col="Region">Region</th>
				<th col="Population">Population</th>
				<th col="SurfaceArea">SurfaceArea</th>
			</tr>
		</table>

		<h2>Cities</h2>
		<table class="grid cities" action="world-ajax.php?type=city&country=USA">
			<tr>
				<th col="Name">Name</th>
				<th col="District">Distict</th>
				<th col="Population">Population</th>
				<th col="CountryName">From Country</th>
			</tr>
		</table>

	</body>
</html>