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