PageRenderTime 3ms CodeModel.GetById 310ms app.highlight 65ms RepoModel.GetById 138ms app.codeStats 0ms

/demo/index.html

http://flexigrid.googlecode.com/
HTML | 381 lines | 368 code | 13 blank | 0 comment | 0 complexity | 338cd106a04a3b2d2bb778656b5d8442 MD5 | raw file
  1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2<html xmlns="http://www.w3.org/1999/xhtml">
  3<head>
  4	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5	<title>Flexigrid</title>
  6	<link rel="stylesheet" href="style.css" />
  7	<link rel="stylesheet" type="text/css" href="../css/flexigrid.pack.css" />
  8	<script type="text/javascript"
  9		src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
 10	<script type="text/javascript" src="../js/flexigrid.pack.js"></script>
 11</head>
 12<body>
 13	<img src="images/flash.png" alt="Flexigrid" width="960" height="483"
 14		usemap="#Map" style="visibility: hidden"
 15		onload="$(this).css({visibility:'visible',display:'none'}).fadeIn('slow');"
 16		title="Flexigrid" border="0" />
 17	<map name="Map" id="Map">
 18		<area shape="rect" coords="671,29,853,72" href="https://code.google.com/p/flexigrid/downloads/list?q=label:Featured"
 19			alt="Download" />
 20	</map>
 21
 22	<h1 class="title" style="display: none">
 23		<strong>Flexigrid</strong> for jQuery<span
 24			style="font-size: 12px">by Paulo P. Marinas</span>
 25	</h1>
 26
 27	<div class="update">
 28		<h2>What is it?</h2>
 29
 30		<p>Lightweight but rich data grid with resizable columns and a
 31			scrolling data to match the headers, plus an ability to connect to an
 32			xml based data source using Ajax to load the content.</p>
 33		<p>Similar in concept with the Ext Grid only its pure jQuery love,
 34			which makes it light weight and follows the jQuery mantra of running
 35			with the least amount of configuration.</p>
 36
 37		<h3>Features</h3>
 38		<ul>
 39			<li>Resizable columns</li>
 40			<li>Resizable height and width</li>
 41			<li>Sortable column headers</li>
 42			<li>Cool theme</li>
 43			<li>Can convert an ordinary table</li>
 44			<li>Ability to connect to an ajax data source (XML and JSON[new])</li>
 45			<li>Paging</li>
 46			<li>Show/hide columns</li>
 47			<li>Toolbar (new)</li>
 48			<li>Search (new)</li>
 49			<li>Accessible API</li>
 50			<li>Many more</li>
 51		</ul>
 52	</div>
 53
 54	<div class="update">
 55		<h2>FAQ</h2>
 56		<ol>
 57			<li><div class="question">Where can I get support?</div>
 58				<div class="answer">
 59				Bugs can be reported 
 60				<a href="http://code.google.com/p/flexigrid/">http://code.google.com/p/flexigrid/</a>, and
 61				our fantastic community support is available at 
 62				<a href="http://groups.google.com/group/flexigrid/">http://groups.google.com/group/flexigrid/</a>.
 63				</div>
 64			</li>
 65			<li>
 66				<div class="question">What's recently changed and what are the known bugs?</div>
 67				<div class="answer">Go to  
 68					<a href="http://code.google.com/p/flexigrid/issues/list">
 69					http://code.google.com/p/flexigrid/issues/list</a>
 70				</div>
 71			</li>
 72			<li><div class="question">What browsers does Flexigrid support?</div>
 73				<div class="answer">We support browsers IE6, Firefox 3, Opera 9,
 74					Safari 3, Chrome 7 and greater.</div>
 75			</li>
 76			<li><div class="question">Where can I contribute code or suggest a feature?</div>
 77				<div class="answer"><a href="http://code.google.com/p/flexigrid/">http://code.google.com/p/flexigrid/</a></div>
 78			</li>
 79			<li><div class="question">Can I use it for personal or commercial projects/modify it/hack it?</div>
 80				<div class="answer">Absolutely! Just make sure you adhere to either the <a href="http://jquery.org/license">GPL or MIT licenses</a>.</div>
 81			</li>
 82			<li><div class="question">Can I connect this to a form or add Parameters?</div>
 83				<div class="answer">Sure, check out our <a href="sample.html">sample code</a> 
 84				to learn how.</div>
 85			</li>
 86		</ol>
 87	</div>
 88
 89	<div class="update">
 90		<h2>Files you need</h2>
 91		<ul>
 92			<li><a href="http://www.jquery.com">jQuery</a></li>
 93			<li><a href="https://code.google.com/p/flexigrid/downloads/list?q=label:Featured">FlexiGrid Plugin Pack(32K)</a>
 94				(includes the js, css, and images)</li>
 95		</ul>
 96	</div>
 97
 98	<div class="update">
 99		<h2>How to use</h2>
100		<p>Check out the examples below, or 
101		<a href="http://code.google.com/p/flexigrid/source/">browse the source</a>.</p>
102	</div>
103
104	<h2>Example 1</h2>
105	<p>
106		The most basic example with the zero configuration, with a table
107		converted into flexigrid (<a href="#"
108			onclick="$(this).parent().next().toggle(); return false;">Show
109			sample code</a>)
110	</p>
111	<div class="code">
112		<pre>$('.flexme').flexigrid();</pre>
113	</div>
114	<table class="flexme1">
115		<thead>
116			<tr>
117				<th width="100">Col 1</th>
118				<th width="100">Col 2</th>
119				<th width="100">Col 3 is a long header name</th>
120				<th width="300">Col 4</th>
121			</tr>
122		</thead>
123		<tbody>
124			<tr>
125				<td>This is data 1 with overflowing content</td>
126				<td>This is data 2</td>
127				<td>This is data 3</td>
128				<td>This is data 4</td>
129			</tr>
130			<tr>
131				<td>This is data 1</td>
132				<td>This is data 2</td>
133				<td>This is data 3</td>
134				<td>This is data 4</td>
135			</tr>
136			<tr>
137				<td>This is data 1</td>
138				<td>This is data 2</td>
139				<td>This is data 3</td>
140				<td>This is data 4</td>
141			</tr>
142			<tr>
143				<td>This is data 1</td>
144				<td>This is data 2</td>
145				<td>This is data 3</td>
146				<td>This is data 4</td>
147			</tr>
148			<tr>
149				<td>This is data 1</td>
150				<td>This is data 2</td>
151				<td>This is data 3</td>
152				<td>This is data 4</td>
153			</tr>
154			<tr>
155				<td>This is data 1</td>
156				<td>This is data 2</td>
157				<td>This is data 3</td>
158				<td>This is data 4</td>
159			</tr>
160			<tr>
161				<td>This is data 1</td>
162				<td>This is data 2</td>
163				<td>This is data 3</td>
164				<td>This is data 4</td>
165			</tr>
166			<tr>
167				<td>This is data 1</td>
168				<td>This is data 2</td>
169				<td>This is data 3</td>
170				<td>This is data 4</td>
171			</tr>
172			<tr>
173				<td>This is data 1</td>
174				<td>This is data 2</td>
175				<td>This is data 3</td>
176				<td>This is data 4</td>
177			</tr>
178			<tr>
179				<td>This is data 1</td>
180				<td>This is data 2</td>
181				<td>This is data 3</td>
182				<td>This is data 4</td>
183			</tr>
184			<tr>
185				<td>This is data 1</td>
186				<td>This is data 2</td>
187				<td>This is data 3</td>
188				<td>This is data 4</td>
189			</tr>
190			<tr>
191				<td>This is data 1</td>
192				<td>This is data 2</td>
193				<td>This is data 3</td>
194				<td>This is data 4</td>
195			</tr>
196		</tbody>
197	</table>
198
199	<h2>Example 2</h2>
200	<p>
201		Table converted into flexigrid with height, and width set to auto,
202		stripes remove. (<a href="#"
203			onclick="$(this).parent().next().toggle(); return false;">Show
204			sample code</a>)
205	</p>
206	<div class="code">
207		<pre>$('.flexme2').flexigrid({height:'auto',striped:false});</pre>
208	</div>
209	<table class="flexme2">
210		<thead>
211			<tr>
212				<th width="100">Col 1</th>
213				<th width="100">Col 2</th>
214				<th width="100">Col 3 is a long header name</th>
215				<th width="300">Col 4</th>
216			</tr>
217		</thead>
218		<tbody>
219			<tr>
220				<td>This is data 1 with overflowing content</td>
221				<td>This is data 2</td>
222				<td>This is data 3</td>
223				<td>This is data 4</td>
224			</tr>
225			<tr>
226				<td>This is data 1</td>
227				<td>This is data 2</td>
228				<td>This is data 3</td>
229				<td>This is data 4</td>
230			</tr>
231			<tr>
232				<td>This is data 1</td>
233				<td>This is data 2</td>
234				<td>This is data 3</td>
235				<td>This is data 4</td>
236			</tr>
237			<tr>
238				<td>This is data 1</td>
239				<td>This is data 2</td>
240				<td>This is data 3</td>
241				<td>This is data 4</td>
242			</tr>
243			<tr>
244				<td>This is data 1</td>
245				<td>This is data 2</td>
246				<td>This is data 3</td>
247				<td>This is data 4</td>
248			</tr>
249			<tr>
250				<td>This is data 1</td>
251				<td>This is data 2</td>
252				<td>This is data 3</td>
253				<td>This is data 4</td>
254			</tr>
255		</tbody>
256	</table>
257
258	<h2>Example 3</h2>
259	<p>
260		Flexigrid with a dynamic data, paging, search, toolbar, and connected
261		to an JSON file. (<a href="#"
262			onclick="$(this).parent().next().toggle(); return false;">Show
263			sample code</a>)
264	</p>
265	<div class="code">
266		<pre>
267$("#flex1").flexigrid({
268	url: 'post2.php',
269	dataType: 'json',
270	colModel : [
271		{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
272		{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
273		{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
274		{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
275		{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
276		],
277	buttons : [
278		{name: 'Add', bclass: 'add', onpress : test},
279		{name: 'Delete', bclass: 'delete', onpress : test},
280		{separator: true}
281		],
282	searchitems : [
283		{display: 'ISO', name : 'iso'},
284		{display: 'Name', name : 'name', isdefault: true}
285		],
286	sortname: "iso",
287	sortorder: "asc",
288	usepager: true,
289	title: 'Countries',
290	useRp: true,
291	rp: 15,
292	showTableToggleBtn: true,
293	width: 700,
294	height: 200
295});   
296</pre>
297	</div>
298	<table class="flexme3" style="display: none"></table>
299
300	<script type="text/javascript">
301		$('.flexme1').flexigrid();
302		$('.flexme2').flexigrid({
303			height : 'auto',
304			striped : false
305		});
306
307		$(".flexme3").flexigrid({
308			url : 'post-xml.php',
309			dataType : 'xml',
310			colModel : [ {
311				display : 'ISO',
312				name : 'iso',
313				width : 40,
314				sortable : true,
315				align : 'center'
316			}, {
317				display : 'Name',
318				name : 'name',
319				width : 180,
320				sortable : true,
321				align : 'left'
322			}, {
323				display : 'Printable Name',
324				name : 'printable_name',
325				width : 120,
326				sortable : true,
327				align : 'left'
328			}, {
329				display : 'ISO3',
330				name : 'iso3',
331				width : 130,
332				sortable : true,
333				align : 'left',
334				hide : true
335			}, {
336				display : 'Number Code',
337				name : 'numcode',
338				width : 80,
339				sortable : true,
340				align : 'right'
341			} ],
342			buttons : [ {
343				name : 'Add',
344				bclass : 'add',
345				onpress : test
346			}, {
347				name : 'Delete',
348				bclass : 'delete',
349				onpress : test
350			}, {
351				separator : true
352			} ],
353			searchitems : [ {
354				display : 'ISO',
355				name : 'iso'
356			}, {
357				display : 'Name',
358				name : 'name',
359				isdefault : true
360			} ],
361			sortname : "iso",
362			sortorder : "asc",
363			usepager : true,
364			title : 'Countries',
365			useRp : true,
366			rp : 15,
367			showTableToggleBtn : true,
368			width : 700,
369			height : 200
370		});
371
372		function test(com, grid) {
373			if (com == 'Delete') {
374				confirm('Delete ' + $('.trSelected', grid).length + ' items?')
375			} else if (com == 'Add') {
376				alert('Add New Item');
377			}
378		}
379	</script>
380</body>
381</html>