Tutorial FlexiGrid jQuery

'Uma imagem vale mais do que mil palavras'

Pelo que você pode ver na imagem acima, podes ter noção do que vai conseguir fazer. Acredito que este trabalho, foi baseado nos grid da biblioteca ExtJS. Abaixo tem o código para este exemplo.

$("#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
	}
);   
	

Autor:
http://www.webplicity.net/flexigrid/

Requisitos:

• jQuery 1.2.3

Demonstração: