demo/index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Flexigrid</title>
	<link rel="stylesheet" href="style.css" />
	<link rel="stylesheet" type="text/css" href="../css/flexigrid.pack.css" />
	<script type="text/javascript"
		src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script type="text/javascript" src="../js/flexigrid.pack.js"></script>
</head>
<body>
	<img src="images/flash.png" alt="Flexigrid" width="960" height="483"
		usemap="#Map" style="visibility: hidden"
		onload="$(this).css({visibility:'visible',display:'none'}).fadeIn('slow');"
		title="Flexigrid" border="0" />
	<map name="Map" id="Map">
		<area shape="rect" coords="671,29,853,72" href="https://code.google.com/p/flexigrid/downloads/list?q=label:Featured"
			alt="Download" />
	</map>

	<h1 class="title" style="display: none">
		<strong>Flexigrid</strong> for jQuery<span
			style="font-size: 12px">by Paulo P. Marinas</span>
	</h1>

	<div class="update">
		<h2>What is it?</h2>

		<p>Lightweight but rich data grid with resizable columns and a
			scrolling data to match the headers, plus an ability to connect to an
			xml based data source using Ajax to load the content.</p>
		<p>Similar in concept with the Ext Grid only its pure jQuery love,
			which makes it light weight and follows the jQuery mantra of running
			with the least amount of configuration.</p>

		<h3>Features</h3>
		<ul>
			<li>Resizable columns</li>
			<li>Resizable height and width</li>
			<li>Sortable column headers</li>
			<li>Cool theme</li>
			<li>Can convert an ordinary table</li>
			<li>Ability to connect to an ajax data source (XML and JSON[new])</li>
			<li>Paging</li>
			<li>Show/hide columns</li>
			<li>Toolbar (new)</li>
			<li>Search (new)</li>
			<li>Accessible API</li>
			<li>Many more</li>
		</ul>
	</div>

	<div class="update">
		<h2>FAQ</h2>
		<ol>
			<li><div class="question">Where can I get support?</div>
				<div class="answer">
				Bugs can be reported 
				<a href="http://code.google.com/p/flexigrid/">http://code.google.com/p/flexigrid/</a>, and
				our fantastic community support is available at 
				<a href="http://groups.google.com/group/flexigrid/">http://groups.google.com/group/flexigrid/</a>.
				</div>
			</li>
			<li>
				<div class="question">What's recently changed and what are the known bugs?</div>
				<div class="answer">Go to  
					<a href="http://code.google.com/p/flexigrid/issues/list">
					http://code.google.com/p/flexigrid/issues/list</a>
				</div>
			</li>
			<li><div class="question">What browsers does Flexigrid support?</div>
				<div class="answer">We support browsers IE6, Firefox 3, Opera 9,
					Safari 3, Chrome 7 and greater.</div>
			</li>
			<li><div class="question">Where can I contribute code or suggest a feature?</div>
				<div class="answer"><a href="http://code.google.com/p/flexigrid/">http://code.google.com/p/flexigrid/</a></div>
			</li>
			<li><div class="question">Can I use it for personal or commercial projects/modify it/hack it?</div>
				<div class="answer">Absolutely! Just make sure you adhere to either the <a href="http://jquery.org/license">GPL or MIT licenses</a>.</div>
			</li>
			<li><div class="question">Can I connect this to a form or add Parameters?</div>
				<div class="answer">Sure, check out our <a href="sample.html">sample code</a> 
				to learn how.</div>
			</li>
		</ol>
	</div>

	<div class="update">
		<h2>Files you need</h2>
		<ul>
			<li><a href="http://www.jquery.com">jQuery</a></li>
			<li><a href="https://code.google.com/p/flexigrid/downloads/list?q=label:Featured">FlexiGrid Plugin Pack(32K)</a>
				(includes the js, css, and images)</li>
		</ul>
	</div>

	<div class="update">
		<h2>How to use</h2>
		<p>Check out the examples below, or 
		<a href="http://code.google.com/p/flexigrid/source/">browse the source</a>.</p>
	</div>

	<h2>Example 1</h2>
	<p>
		The most basic example with the zero configuration, with a table
		converted into flexigrid (<a href="#"
			onclick="$(this).parent().next().toggle(); return false;">Show
			sample code</a>)
	</p>
	<div class="code">
		<pre>$('.flexme').flexigrid();</pre>
	</div>
	<table class="flexme1">
		<thead>
			<tr>
				<th width="100">Col 1</th>
				<th width="100">Col 2</th>
				<th width="100">Col 3 is a long header name</th>
				<th width="300">Col 4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>This is data 1 with overflowing content</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
		</tbody>
	</table>

	<h2>Example 2</h2>
	<p>
		Table converted into flexigrid with height, and width set to auto,
		stripes remove. (<a href="#"
			onclick="$(this).parent().next().toggle(); return false;">Show
			sample code</a>)
	</p>
	<div class="code">
		<pre>$('.flexme2').flexigrid({height:'auto',striped:false});</pre>
	</div>
	<table class="flexme2">
		<thead>
			<tr>
				<th width="100">Col 1</th>
				<th width="100">Col 2</th>
				<th width="100">Col 3 is a long header name</th>
				<th width="300">Col 4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>This is data 1 with overflowing content</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
		</tbody>
	</table>

	<h2>Example 3</h2>
	<p>
		Flexigrid with a dynamic data, paging, search, toolbar, and connected
		to an JSON file. (<a href="#"
			onclick="$(this).parent().next().toggle(); return false;">Show
			sample code</a>)
	</p>
	<div class="code">
		<pre>
$("#flex1").flexigrid({
	url: 'post2.php',
	dataType: 'json',
	colModel : [
		{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
		{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
		{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
		{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
		{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
		],
	buttons : [
		{name: 'Add', bclass: 'add', onpress : test},
		{name: 'Delete', bclass: 'delete', onpress : test},
		{separator: true}
		],
	searchitems : [
		{display: 'ISO', name : 'iso'},
		{display: 'Name', name : 'name', isdefault: true}
		],
	sortname: "iso",
	sortorder: "asc",
	usepager: true,
	title: 'Countries',
	useRp: true,
	rp: 15,
	showTableToggleBtn: true,
	width: 700,
	height: 200
});   
</pre>
	</div>
	<table class="flexme3" style="display: none"></table>

	<script type="text/javascript">
		$('.flexme1').flexigrid();
		$('.flexme2').flexigrid({
			height : 'auto',
			striped : false
		});

		$(".flexme3").flexigrid({
			url : 'post-xml.php',
			dataType : 'xml',
			colModel : [ {
				display : 'ISO',
				name : 'iso',
				width : 40,
				sortable : true,
				align : 'center'
			}, {
				display : 'Name',
				name : 'name',
				width : 180,
				sortable : true,
				align : 'left'
			}, {
				display : 'Printable Name',
				name : 'printable_name',
				width : 120,
				sortable : true,
				align : 'left'
			}, {
				display : 'ISO3',
				name : 'iso3',
				width : 130,
				sortable : true,
				align : 'left',
				hide : true
			}, {
				display : 'Number Code',
				name : 'numcode',
				width : 80,
				sortable : true,
				align : 'right'
			} ],
			buttons : [ {
				name : 'Add',
				bclass : 'add',
				onpress : test
			}, {
				name : 'Delete',
				bclass : 'delete',
				onpress : test
			}, {
				separator : true
			} ],
			searchitems : [ {
				display : 'ISO',
				name : 'iso'
			}, {
				display : 'Name',
				name : 'name',
				isdefault : true
			} ],
			sortname : "iso",
			sortorder : "asc",
			usepager : true,
			title : 'Countries',
			useRp : true,
			rp : 15,
			showTableToggleBtn : true,
			width : 700,
			height : 200
		});

		function test(com, grid) {
			if (com == 'Delete') {
				confirm('Delete ' + $('.trSelected', grid).length + ' items?')
			} else if (com == 'Add') {
				alert('Add New Item');
			}
		}
	</script>
</body>
</html>