Il existe (à ma connaissance) deux manières de créer une grille w2ui.
La première est très simple et permet de créer une grille rapidement mais sans perdre de sa puissance ni de ses nombreuses possibilités de personnalisation, la seconde est un peu plus sophistiquée car elle permet en plus de la grille de gérer l'ensemble des objets qui composent la librairie.
Ces exemples ne requièrent pas de fichier externe, les enregistrements (records) sont inclus dans le programme. Le codes des grilles est tiré en grande partie des démos sur le site internet de w2ui.
Copiez & collez le listing dans votre traitement de texte favori, sauvegardez le fichier (.html), double-clickez le afin de lancer votre navigateur (Chrome, Firefox ou Opéra). Ou plus simple téléchargez le (voir plus bas).

Première manière

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>W2UI Demo:grid</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui-1.5.rc1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui-1.5.rc1.min.css" />
    </head>
    <body>
        <div id="grid" style="width: 100%; height: 300px;"></div>
        <script type="text/javascript">
            $(function () {
                $('#grid').w2grid({
                    name: 'gridName',
                    show: {
                        lineNumbers: true,
                        footer: true
                    },
                    sortData: [ { field: 'recid', direction: 'asc' } ],
                    columns: [
                        { field: 'recid', caption: 'recID', size: '60px', sortable: true },
                        { field: 'fname', caption: 'First Name', size: '30%' },
                        { field: 'lname', caption: 'Last Name', size: '30%' },
                        { field: 'email', caption: 'Email', size: '40%' },
                        { field: 'sdate', caption: 'Dates', size: '90px', attr: "align=center" }
                    ],
                    records: [
                        { recid: 1, fname: "John", lname: "Doe", email: "jdoe@gmail.com", sdate: "4/3/2012" },
                        { recid: 2, fname: "Stuart", lname: "Motzart", email: "jdoe@gmail.com", sdate: "4/3/2012" },
                        { recid: 3, fname: "Jin", lname: "Franson", email: "jdoe@gmail.com", sdate: "4/3/2012" },
                        { recid: 4, fname: "Susan", lname: "Ottie", email: "jdoe@gmail.com", sdate: "4/3/2012" },
                        { recid: 5, fname: "Kelly", lname: "Silver", email: "jdoe@gmail.com", sdate: "4/3/2012" },
                        { recid: 6, fname: "Francis", lname: "Gatos", email: "jdoe@gmail.com", sdate: "4/3/2012" },
                        { recid: 7, fname: "Mark", lname: "Welldo", email: "jdoe@gmail.com", sdate: "4/3/2012" },
                        { recid: 8, fname: "Thomas", lname: "Bahh", email: "jdoe@gmail.com", sdate: "4/3/2012" },
                        { recid: 9, fname: "Sergei", lname: "Rachmaninov", email: "jdoe@gmail.com", sdate: "4/3/2012" }
                    ]
                });
            });
        </script>
    </body>
</html>

download Le source complet est téléchargeable ici.

Seconde manière

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>W2UI Demo2: grid</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui-1.5.rc1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui-1.5.rc1.min.css" />
    </head>
    <body>
        <div id="main" style="width: 100%; height: 360px; margin-bottom:20px;">
            <script type="text/javascript">
                var config = {
                    layout: {
                        name: 'layout',
                        panels: [{
                            type: 'main',
                            style: 'background-color: white; border: 1px solid silver;'
                        }]
                    },
                    grid: {
                        name: 'gridName',
                        show: {
                            lineNumbers: true,
                            footer: true
                        },
                        sortData: [ { field: 'recid', direction: 'asc' } ],
                        columns: [
                            { field: 'recid', caption: 'recID', size: '60px', sortable: true },
                            { field: 'fname', caption: 'First Name', size: '30%' },
                            { field: 'lname', caption: 'Last Name', size: '30%' },
                            { field: 'email', caption: 'Email', size: '40%' },
                            { field: 'sdate', caption: 'Dates', size: '90px', attr: "align=center" }
                        ],
                        records: [
                            { recid: 1, fname: "John", lname: "Doe", email: "jdoe@gmail.com", sdate: "4/3/2012" },
                            { recid: 2, fname: "Stuart", lname: "Motzart", email: "jdoe@gmail.com", sdate: "4/3/2012" },
                            { recid: 3, fname: "Jin", lname: "Franson", email: "jdoe@gmail.com", sdate: "4/3/2012" },
                            { recid: 4, fname: "Susan", lname: "Ottie", email: "jdoe@gmail.com", sdate: "4/3/2012" },
                            { recid: 5, fname: "Kelly", lname: "Silver", email: "jdoe@gmail.com", sdate: "4/3/2012" },
                            { recid: 6, fname: "Francis", lname: "Gatos", email: "jdoe@gmail.com", sdate: "4/3/2012" },
                            { recid: 7, fname: "Mark", lname: "Welldo", email: "jdoe@gmail.com", sdate: "4/3/2012" },
                            { recid: 8, fname: "Thomas", lname: "Bahh", email: "jdoe@gmail.com", sdate: "4/3/2012" },
                            { recid: 9, fname: "Sergei", lname: "Rachmaninov", email: "jdoe@gmail.com", sdate: "4/3/2012" }
                        ]
                    }
                }
                $( document ).ready(function() {
                    /*initialization*/
                    $('#main').w2layout(config.layout);
                    /*in memory initialization*/
                    $().w2grid(config.grid);
                    w2ui.layout.html('main', w2ui.gridName);
                });
            </script>
        </div>
    </body>
</html>

download Le source complet est téléchargeable ici.


Ecrire un commentaire