Flexigrid Download

Flexigrid for jQueryby Paulo P. Marinas

What is it?

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.

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.

Features

FAQ

  1. Where can I get support?
    Bugs can be reported http://code.google.com/p/flexigrid/, and our fantastic community support is available at http://groups.google.com/group/flexigrid/.
  2. What's recently changed and what are the known bugs?
    Go to http://code.google.com/p/flexigrid/issues/list
  3. What browsers does Flexigrid support?
    We support browsers IE6, Firefox 3, Opera 9, Safari 3, Chrome 7 and greater.
  4. Where can I contribute code or suggest a feature?
    http://code.google.com/p/flexigrid/
  5. Can I use it for personal or commercial projects/modify it/hack it?
    Absolutely! Just make sure you adhere to either the GPL or MIT licenses.
  6. Can I connect this to a form or add Parameters?
    Sure, check out our sample code to learn how.

Files you need

How to use

Check out the examples below, or browse the source.

Example 1

The most basic example with the zero configuration, with a table converted into flexigrid (Show sample code) 

$('.flexme').flexigrid();
Col 1 Col 2 Col 3 is a long header name Col 4
This is data 1 with overflowing content This is data 2 This is data 3 This is data 4
This is data 1 This is data 2 This is data 3 This is data 4
This is data 1 This is data 2 This is data 3 This is data 4
This is data 1 This is data 2 This is data 3 This is data 4
This is data 1 This is data 2 This is data 3 This is data 4
This is data 1 This is data 2 This is data 3 This is data 4
This is data 1 This is data 2 This is data 3 This is data 4
This is data 1 This is data 2 This is data 3 This is data 4
This is data 1 This is data 2 This is data 3 This is data 4
This is data 1 This is data 2 This is data 3 This is data 4
This is data 1 This is data 2 This is data 3 This is data 4
This is data 1 This is data 2 This is data 3 This is data 4

Example 2

Table converted into flexigrid with height, and width set to auto, stripes remove. (Show sample code) 

$('.flexme2').flexigrid({height:'auto',striped:false});
Col 1 Col 2 Col 3 is a long header name Col 4
This is data 1 with overflowing content This is data 2 This is data 3 This is data 4
This is data 1 This is data 2 This is data 3 This is data 4
This is data 1 This is data 2 This is data 3 This is data 4
This is data 1 This is data 2 This is data 3 This is data 4
This is data 1 This is data 2 This is data 3 This is data 4
This is data 1 This is data 2 This is data 3 This is data 4

Example 3

Flexigrid with a dynamic data, paging, search, toolbar, and connected to an JSON file. (Show sample code) 

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