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.
Check out the examples below, or browse the source.
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 |
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 |
Flexigrid with dynamic data, paging, search, toolbar, and connected to an XML file. (Show sample code)
$(".flexme3").flexigrid({
url : 'post-xml.php',
dataType : 'xml',
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
});
function test(com, grid) {
if (com == 'Delete') {
confirm('Delete ' + $('.trSelected', grid).length + ' items?')
} else if (com == 'Add') {
alert('Add New Item');
}
}
Flexigrid with dynamic data, paging, search, toolbar, and connected to a php-session based JSON file. (Show sample code)
$(".flexme4").flexigrid({
url : 'example4.php',
dataType : 'json',
colModel : [ {
display : 'EmployeeID',
name : 'employeeID',
width : 90,
sortable : true,
align : 'center'
}, {
display : 'Name',
name : 'name',
width : 120,
sortable : true,
align : 'left'
}, {
display : 'Primary Language',
name : 'primary_language',
width : 120,
sortable : true,
align : 'left'
}, {
display : 'Favorite Color',
name : 'favorite_color',
width : 80,
sortable : true,
align : 'left',
hide : true
}, {
display : 'Favorite Animal',
name : 'favorite_pet',
width : 80,
sortable : true,
align : 'right'
} ],
buttons : [ {
name : 'Add',
bclass : 'add',
onpress : Example4
}
,
{
name : 'Edit',
bclass : 'edit',
onpress : Example4
}
,
{
name : 'Delete',
bclass : 'delete',
onpress : Example4
}
,
{
separator : true
}
],
searchitems : [ {
display : 'EmployeeID',
name : 'employeeID'
}, {
display : 'Name',
name : 'name',
isdefault : true
} ],
sortname : "iso",
sortorder : "asc",
usepager : true,
title : 'Employees',
useRp : true,
rp : 15,
showTableToggleBtn : true,
width : 750,
height : 200
});
function Example4(com, grid) {
if (com == 'Delete') {
var conf = confirm('Delete ' + $('.trSelected', grid).length + ' items?')
if(conf){
$.each($('.trSelected', grid),
function(key, value){
$.get('example4.php', { Delete: value.firstChild.innerText}
, function(){
// when ajax returns (callback), update the grid to refresh the data
$(".flexme4").flexReload();
});
});
}
}
else if (com == 'Edit') {
var conf = confirm('Edit ' + $('.trSelected', grid).length + ' items?')
if(conf){
$.each($('.trSelected', grid),
function(key, value){
// collect the data
var OrgEmpID = value.children[0].innerText; // in case we're changing the key
var EmpID = prompt("Please enter the New Employee ID",value.children[0].innerText);
var Name = prompt("Please enter the Employee Name",value.children[1].innerText);
var PrimaryLanguage = prompt("Please enter the Employee's Primary Language",value.children[2].innerText);
var FavoriteColor = prompt("Please enter the Employee's Favorite Color",value.children[3].innerText);
var FavoriteAnimal = prompt("Please enter the Employee's Favorite Animal",value.children[4].innerText);
// call the ajax to save the data to the session
$.get('example4.php',
{ Edit: true
, OrgEmpID: OrgEmpID
, EmpID: EmpID
, Name: Name
, PrimaryLanguage: PrimaryLanguage
, FavoriteColor: FavoriteColor
, FavoritePet: FavoriteAnimal }
, function(){
// when ajax returns (callback), update the grid to refresh the data
$(".flexme4").flexReload();
});
});
}
}
else if (com == 'Add') {
// collect the data
var EmpID = prompt("Please enter the Employee ID","5");
var Name = prompt("Please enter the Employee Name","Mark");
var PrimaryLanguage = prompt("Please enter the Employee's Primary Language","php");
var FavoriteColor = prompt("Please enter the Employee's Favorite Color","Tan");
var FavoriteAnimal = prompt("Please enter the Employee's Favorite Animal","Dog");
// call the ajax to save the data to the session
$.get('example4.php', { Add: true, EmpID: EmpID, Name: Name, PrimaryLanguage: PrimaryLanguage, FavoriteColor: FavoriteColor, FavoritePet: FavoriteAnimal }
, function(){
// when ajax returns (callback), update the grid to refresh the data
$(".flexme4").flexReload();
});
}
}