Flexigrid

# Flexigrid for jQuery (beta) by 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

- Resizable columns
- Resizable height and width
- Sortable column headers
- Cool theme
- Can convert an ordinary table
- Ability to connect to an ajax data source (XML and JSON[new])
- Paging
- Show/hide columns
- Toolbar (new)
- Search (new)
- Accessible API
- Many more

I'm planning to add an Editable and Resortable rows feature, as well as other cool GUI features.

One of my main goal for the plugin is ultimately to keep it lightweight, maybe under 20k when compressed. Because otherwise you should probably stick with Ext Grid or YUI data table.

1.0b3 Released 14 July 2008

Buy me a coffee here

What's New Version 1.0b3

- Fixed paging problem on multiple instances
- Mootools and Prototype noConflict() compatibility problems fixed
- New onError event on ajax interaction, (it will pass what the server said in a variable called data), allowing you to handle server problems
- New $().flexAddData method, allows you to directly add new data to the grid using your own data source.
- New preProcess API, allows you to modify or process data sent by server before passing it to Flexigrid, allowing you to use your own JSON format for example.
- Single Rows Select just use { singleSelect: true } in the options
- There are other bugs that were reported and fixed as well, but forgot what they were :-)
- IE6 Support fixes
- CSS Bug fixes

What's New Version 1.0b2

- Resizable Width
- JSON Support
- Toolbar
- Table Toggle Button
- Show/Hide Columns control have been move to the column headers (try it by mouseovering a header and clicking a black triangle on the right);
- Quick Search
- IE6 Support fixes
- CSS Bug fixes

As I still don't have time to build a full pledge support or community site, which I'm planning to, these are usually the questions I receive:

FAQ

1. Paulo this is awesome. How can I show my appreciation?
   Answer: Normally people say buy me a beer, but it slows me down. Buy me a coffee here
2. Paulo this is awesome. How can I contact you?
   Answer: http://www.webplicity.net/contact
3. Do you have a forum where I can post a message?
   Answer: Not yet. But I hang out here http://codeigniter.com/forums/viewthread/75326/
4. What browsers does Flexigrid support?
   Answer: Currently I'm testing only for IE6/IE7,Firefox 2,Opera 9.x,Safari 3.0
5. Can I contribute code/Suggest a feature?
   Answer: Sure you can, Quick Search and Toolbar was actually suggested by Marcos Aurélio, although I can't promise I can actually include it, I need to see if it doesn't conflict my primary goals.
6. Can I use it for personal or commercial projects/modify it/hack it?
   Answer: Go ahead? No worries. Although, I'd appreciate a heads up
7. I have a problem. How do I use it in Drupal/WordPress/Etc?
   Answer: Hmmm..I haven't actually tested in those yet, but I'm planning to just have patience, or maybe if another guy has the answer they can email me and I'll post it here.
8. Can I connect this to a form or add Parameters?
   Answer: Yes. Problem is I haven't built documentation on the API yet. If you are any good with Javascript, you can probably find it, I put a lot of comments in the code
9. When are you going to make a decent site with support and a community?
   Answer: Maybe in a month or two, fact is I have a day job. I'm considering building a community if I get enough support.

Files you need

- Of course you need the jQuery script
- and the FlexiGrid Plugin Pack(32K) which includes the js, css, and images you need to run the Flexigrid

How to use

My appologies, but no time to make a thorough guide on how to use it yet, but I did make some examples below.

For the Third example you need to generate an XML file with a very specific format, just use the same format to generate an XML file using any backend programming language.

The sample xml file is here

And due to consistent public demand. My sample PHP code for post.php. Please don't forget to change hostname, username, password and dbname.

Show sample PHP code for XML

function runSQL($rsql) {

$connect = mysql_connect($hostname,$username,$password) or die ("Error: could not connect to database");
$db = mysql_select_db($dbname);

$result = mysql_query($rsql) or die ('test');
return $result;
mysql_close($connect);
}

function countRec($fname,$tname) {
$sql = "SELECT count($fname) FROM $tname ";
$result = runSQL($sql);
while ($row = mysql_fetch_array($result)) {
return $row[0];
}
}
$page = $_POST['page'];
$rp = $_POST['rp'];
$sortname = $_POST['sortname'];
$sortorder = $_POST['sortorder'];

if (!$sortname) $sortname = 'name';
if (!$sortorder) $sortorder = 'desc';

$sort = "ORDER BY $sortname $sortorder";

if (!$page) $page = 1;
if (!$rp) $rp = 10;

$start = (($page-1) * $rp);

$limit = "LIMIT $start, $rp";

$sql = "SELECT iso,name,printable_name,iso3,numcode FROM country $sort $limit";
$result = runSQL($sql);

$total = countRec('iso','country');

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-type: text/xml");
$xml = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
$xml .= "<rows>";
$xml .= "<page>$page</page>";
$xml .= "<total>$total</total>";
while ($row = mysql_fetch_array($result)) {
$xml .= "<row id='".$row['iso']."'>";
$xml .= "<cell><![CDATA[".$row['iso']."]]></cell>";
$xml .= "<cell><![CDATA[".utf8_encode($row['name'])."]]></cell>";
$xml .= "<cell><![CDATA[".utf8_encode($row['printable_name'])."]]></cell>";
$xml .= "<cell><![CDATA[".utf8_encode($row['iso3'])."]]></cell>";
$xml .= "<cell><![CDATA[".utf8_encode($row['numcode'])."]]></cell>";
$xml .= "</row>";
}

$xml .= "</rows>";
echo $xml;

Show sample PHP code for JSON

function runSQL($rsql) {

$connect = mysql_connect($hostname,$username,$password) or die ("Error: could not connect to database");
$db = mysql_select_db($dbname);

$result = mysql_query($rsql) or die ('test');
return $result;
mysql_close($connect);
}

function countRec($fname,$tname) {
$sql = "SELECT count($fname) FROM $tname ";
$result = runSQL($sql);
while ($row = mysql_fetch_array($result)) {
return $row[0];
}
}
$page = $_POST['page'];
$rp = $_POST['rp'];
$sortname = $_POST['sortname'];
$sortorder = $_POST['sortorder'];

if (!$sortname) $sortname = 'name';
if (!$sortorder) $sortorder = 'desc';

$sort = "ORDER BY $sortname $sortorder";

if (!$page) $page = 1;
if (!$rp) $rp = 10;

$start = (($page-1) * $rp);

$limit = "LIMIT $start, $rp";

$sql = "SELECT iso,name,printable_name,iso3,numcode FROM country $sort $limit";
$result = runSQL($sql);

$total = countRec('iso','country');

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-type: text/x-json");
$json = "";
$json .= "{\n";
$json .= "page: $page,\n";
$json .= "total: $total,\n";
$json .= "rows: [";
$rc = false;
while ($row = mysql_fetch_array($result)) {
if ($rc) $json .= ",";
$json .= "\n{";
$json .= "id:'".$row['iso']."',";
$json .= "cell:['".$row['iso']."'";
$json .= ",'".addslashes($row['name'])."'";
$json .= ",'".addslashes($row['printable_name'])."'";
$json .= ",'".addslashes($row['iso3'])."'";
$json .= ",'".addslashes($row['numcode'])."']";
$json .= "}";
$rc = true;
}
$json .= "]\n";
$json .= "}";
echo $json;

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
    			}
    			);