Lightweight but rich data grid with re-sizable columns and a scrolling data to match the headers, plus an ability to connect to an XML or JSON 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.
How to Use
Adding the Flexigrid to your webpage couldn't be easier. Just download the code from http://www.flexigrid.info and copy the required files into your site's directories. You must also have a version of jQuery running on your site for this to work which can be found at jquery.com.
You will find a flexigrid.js file in the downloaded archive. Include this file in the head section of your site as you would normally do along with the provided CSS file (you will need to copy across the entire contents of the 'css' directory including the images).
After creating a table element on your page with an id of 'flex1' for this example you can then create and include a javascript file consisting of the following code. The Flexigrid will then be created on page load.
index.html
<html>
<head>
<link type="text/css" href="css/flexigrid.pack.css" rel="stylesheet" />
<link type="text/css" href="css/flexigrid.css" rel="stylesheet" />
<link type="text/css" href="css/smoothness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />
<link type="text/css" href="css/demos.css" rel="stylesheet" />
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript" src="js/flexigrid.pack.js"></script>
<script type="text/javascript" src="js/flexigrid.js"></script>
<script type="text/javascript">
$(function() {
$("#flex1").flexigrid({
url: 'page.php',
dataType: 'json',
colModel : [
{display: 'Sl', name : 'columnid', width : 40, sortable : true, align: 'left'},
{display: 'Name', name : 'columnvalue', width : 500, sortable : true, align: 'left'},
],
buttons : [
{name: 'Edit', bclass: 'edit', onpress : doCommand},
{name: 'Delete', bclass: 'delete', onpress : doCommand},
{separator: true}
],
searchitems : [
{display: 'Name', name : 'columnvalue', isdefault: true},
],
sortname: "columnvalue",
sortorder: "asc",
usepager: true,
title: "FlexiGrid",
useRp: true,
rp: 10,
showTableToggleBtn: false,
resizable: false,
width: 700,
height: 200,
singleSelect: true
});
function doCommand(com, grid) {
if (com == 'Edit') {
$('.trSelected', grid).each(function() {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row')+3);
alert("Edit row " + id);
});
} else if (com == 'Delete') {
$('.trSelected', grid).each(function() {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row')+3);
alert("Delete row " + id);
});
}
}
});
</script>
</head>
<body>
<table id="flex1"></table>
</body>
Page.php
<?php
// Connect to PoOstgreSQL database
$connstr = "dbname=dbname user=username password=yourpassword host=server port=1234 ";
$dbcon = @pg_connect($connstr);
pg_query("set search_path to schema");
$page = 1; // The current page
$sortname = 'columnvalue'; // Sort column
$sortorder = 'asc'; // Sort order
$qtype = ''; // Search column
$query = ''; // Search string
//Get posted data
if (isset($_POST['page'])) {
$page = $_POST['page'];
}
if (isset($_POST['sortname'])) {
$sortname =$_POST['sortname'];
}
if (isset($_POST['sortorder'])) {
$sortorder = $_POST['sortorder'];
}
if (isset($_POST['qtype'])) {
$qtype =$_POST['qtype'];
}
if (isset($_POST['query'])) {
$query = $_POST['query'];
}
if (isset($_POST['rp'])) {
$rp =$_POST['rp'];
}
// Setup sort and search SQL using posted data
$sortSql = "order by $sortname $sortorder";
$searchSql = ($qtype != '' && $query != '') ? "where $qtype = '$query'" : '';
// Get total count of records
$sql = "select count(*)
from \"tableName\"
$searchSql";
$stat = pg_exec($dbcon, $sql);
$data = pg_fetch_array($stat, 0);
//$data["count"];
$total = $data["count"];
// Setup paging SQL
$pageStart = ($page-1)*$rp;
$limitSql = " limit $rp OFFSET $pageStart";
// Return JSON data
$data = array();
$data['page'] = $page;
$data['total'] = $total;
$data['rows'] = array();
$sql = "select columnid,columnvalue from \"tableName\"
$searchSql
$sortSql
$limitSql";
$stat = pg_exec($dbcon, $sql);
$rows = pg_numrows($stat);
for($i = 0; $i < $rows; $i++)
{
$row = pg_fetch_array($stat, $i);
$data['rows'][] = array(
'id' => $row['columnid'],
'cell' => array($row['columnid'], $row['columnvalue'])
);
}
echo json_encode($data);
?>
Ref: http://code.google.com/p/flexigrid/
How do we adjust PageStat Param after row deletion?
ReplyDelete