jQuery 插件 flexigrid?

🏷️ jQuery

下载地址：https://github.com/paulopmx/Flexigrid

Example 1

The most basic example with the zero configuration, with a table converted into flexigrid​

$('.flexme').flexigrid();

Example 2

Table converted into flexigrid with height, and width set to auto, stripes remove.​

$('.flexme2').flexigrid({height:'auto',striped:false});

Example 3

Flexigrid with dynamic data, paging, search, toolbar, and connected to an XML file.

点击查看代码

$(".flexme3").flexigrid({
    url : 'post-xml.php',
    dataType : 'xml',
    colModel : ,
    buttons : ,
    searchitems : ,
    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.

点击查看代码

$(".flexme4").flexigrid({
    url : 'example4.php',
    dataType : 'json',
    colModel : ,
    buttons : ,
    searchitems : ,
    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.innerText; // in case we're changing the key
                    var EmpID = prompt("Please enter the New Employee ID",value.children.innerText);
                    var Name = prompt("Please enter the Employee Name",value.children.innerText);
                    var PrimaryLanguage = prompt("Please enter the Employee's Primary Language",value.children.innerText);
                    var FavoriteColor = prompt("Please enter the Employee's Favorite Color",value.children.innerText);
                    var FavoriteAnimal = prompt("Please enter the Employee's Favorite Animal",value.children.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();
        });
    }
}