Flexigrid Download More script and css style : www.htmldrive.net

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.



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:


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