Flexigrid Download

Flexigrid for jQueryby Paulo P. Marinas

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

Example 4

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