Menu
Outros JS

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:






A paixão pelo jogo pressupõe ordinariamente pouco amor pelas letras. [1087]