Flexigrid Download

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

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 What's New Version 1.0b2

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: 941-777-1690

  3. Do you have a forum where I can post a message?
    Answer: Not yet. But I hang out here 2189473463

  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

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. (661-549-6826)

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