Context Navigation

source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Complete/development-bundle/samples/grid/selection.html @ 649

Last change on this file since 649 was 649, checked in by vmipsl, 12 years ago
wijmo
File size: 9.2 KB

Line
1	<!doctype html>
2	<html lang="en">
3	<head>
4	<title>Grid - Selection</title>
5	<meta charset="utf-8" />
6	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7	<meta name="description" content="wijgrid provides selection" />
8	<meta name="keywords" content="" />
9	<meta name="author" content="ComponentOne" />
10
11	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
12	<link href="../../themes/wijmo/jquery.wijmo-open.2.2.2.css" rel="stylesheet" type="text/css" />
13	<link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />
14
15	<script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
16	<script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
17	<script src="../../external/globalize.min.js" type="text/javascript"></script>
18	<script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
19
20	<script src="../../external/jquery.wijmo-open.all.2.2.2.min.js" type="text/javascript"></script>
21	<script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
22	<script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>
23
24	<style type="text/css">
25	.demoTable > tbody > tr > td
26	{
27	vertical-align: top;
28	width: 400px;
29	}
30
31	#demoLogTable
32	{
33	table-layout: fixed;
34	margin-left: 20px;
35	width: 100%;
36	}
37	</style>
38
39	<script id="scriptInit" type="text/javascript">
40	$(document).ready(function () {
41	$("#demo").wijgrid({
42	selectionMode: "singleCell",
43	columns: [
44	{ dataType: "number", sortDirection: "ascending", dataFormatString: "n0" },
45	{ dataType: "currency" },
46	{ dataType: "number", dataFormatString: "n0" },
47	{ dataType: "number", dataFormatString: "p0" }
48	],
49	selectionChanged: onSelectionChanged
50	});
51
52	function onSelectionChanged() {
53	var sc = $("#demo").wijgrid("selection").selectedCells();
54	var log = $("#demoLogTable");
55
56	log.find("td").removeClass("ui-state-highlight").html("<span>&nbsp</span>");
57
58	for (var i = 0, len = sc.length(); i < len; i++) {
59	var cellInfo = sc.item(i);
60	var logCell = $(log[0].tBodies[0].rows[cellInfo.rowIndex()].cells[cellInfo.cellIndex()]);
61	logCell.addClass("ui-state-highlight").text(cellInfo.value().toString());
62	}
63	}
64
65	$("#selectionMode").change(function (e) {
66	$("#demo").wijgrid("option", "selectionMode", $(e.target).val());
67	});
68	});
69	</script>
70	</head>
71	<body class="demo-single">
72	<div class="container">
73	<div class="header">
74	<h2>
75	Selection</h2>
76	</div>
77	<div class="main demo">
78	<!-- Begin demo markup -->
79	<table class="demoTable">
80	<tr>
81	<td>
82	<table id="demo">
83	<thead>
84	<tr>
85	<th>ProductID</th><th>UnitPrice</th><th>Quantity</th><th>Discount</th>
86	</tr>
87	</thead>
88	<tbody>
89	<tr>
90	<td>11</td><td>14</td><td>12</td><td>0</td>
91	</tr>
92	<tr>
93	<td>42</td><td>9,8</td><td>10</td><td>0</td>
94	</tr>
95	<tr>
96	<td>72</td><td>34,8</td><td>5</td><td>0</td>
97	</tr>
98	<tr>
99	<td>14</td><td>18.6</td><td>9</td><td>0</td>
100	</tr>
101	<tr>
102	<td>51</td><td>42.4</td><td>40</td><td>0</td>
103	</tr>
104	<tr>
105	<td>41</td><td>7.7</td><td>10</td><td>0</td>
106	</tr>
107	<tr>
108	<td>51</td><td>42.4</td><td>35</td><td>0.15</td>
109	</tr>
110	<tr>
111	<td>65</td><td>16.8</td><td>15</td><td>0.15</td>
112	</tr>
113	<tr>
114	<td>22</td><td>16.8</td><td>6</td><td>0.05</td>
115	</tr>
116	<tr>
117	<td>57</td><td>15.6</td><td>15</td><td>0.05</td>
118	</tr>
119	<tr>
120	<td>65</td><td>16.8</td><td>20</td><td>0</td>
121	</tr>
122	<tr>
123	<td>20</td><td>64.8</td><td>40</td><td>0.05</td>
124	</tr>
125	<tr>
126	<td>33</td><td>2</td><td>25</td><td>0.05</td>
127	</tr>
128	</tbody>
129	</table>
130	</td>
131	<td>
132	<table class="ui-widget ui-widget-content" rules="all" id="demoLogTable">
133	<caption class="ui-widget-header">selection log</caption>
134	<tbody>
135	<tr>
136	<td> </td><td> </td><td> </td><td> </td>
137	</tr>
138	<tr>
139	<td> </td><td> </td><td> </td><td> </td>
140	</tr>
141	<tr>
142	<td> </td><td> </td><td> </td><td> </td>
143	</tr>
144	<tr>
145	<td> </td><td> </td><td> </td><td> </td>
146	</tr>
147	<tr>
148	<td> </td><td> </td><td> </td><td> </td>
149	</tr>
150	<tr>
151	<td> </td><td> </td><td> </td><td> </td>
152	</tr>
153	<tr>
154	<td> </td><td> </td><td> </td><td> </td>
155	</tr>
156	<tr>
157	<td> </td><td> </td><td> </td><td> </td>
158	</tr>
159	<tr>
160	<td> </td><td> </td><td> </td><td> </td>
161	</tr>
162	<tr>
163	<td> </td><td> </td><td> </td><td> </td>
164	</tr>
165	<tr>
166	<td> </td><td> </td><td> </td><td> </td>
167	</tr>
168	<tr>
169	<td> </td><td> </td><td> </td><td> </td>
170	</tr>
171	<tr>
172	<td> </td><td> </td><td> </td><td> </td>
173	</tr>
174	</tbody>
175	</table>
176	</td>
177	</tr>
178	</table>
179	<!-- End demo markup -->
180	<div class="demo-options">
181	<!-- Begin options markup -->
182	<div class="option-row">
183	<label for="selectionMode">Selection mode</label>
184	<select id="selectionMode">
185	<option>singleCell</option>
186	<option>singleRow</option>
187	<option>singleColumn</option>
188	<option>singleRange</option>
189	<option>multiColumn</option>
190	<option>multiRow</option>
191	<option>multiRange</option>
192	</select>
193	</div>
194	<!-- End options markup -->
195	</div>
196	</div>
197	<div class="footer demo-description">
198	<p>
199	This sample demonstrates the available <b>selectionMode</b> options.
200	</p>
201	<p>
202	Choose a selection mode and select one or more rows, columns, cells, or ranges to see the selection behavior.
203	</p>
204	</div>
205	</div>
206	</body>
207	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: