Voici un exemple intéressant qui permet d'importer un fichier .json dans la grille, d'ajouter des enregistrements puis de sauvegarder le contenu de la grille dans un fichier .json.
Vérifiez dans votre dossier 'Downloads' (Téléchargements) la présence d'un fichier .json nommé people.json, si vous ne le trouvez pas , créez le . C'est lui que vous devrez importer pour tester la grille.

Ajouter une fonction de sauvegarde en local (.json ) des données d'une grille w2ui

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>W2UI Save to JSON Demo</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>
        <script type="text/javascript" src="saveGridToJSON.js"></script>
        <script src="FileSaver.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: 360px; margin-bottom:20px;"></div>
        <input type="file" id="jsonFileInput" onchange="handleJsonFiles(this.files)" accept=".json" style="display:none;">
        <button class="w2ui-btn" onclick="$('#jsonFileInput').trigger('click');">Importer le fichier</button>
        <button class="w2ui-btn" onclick="addRecords('gridName');">Ajouter des enregistrements</button>
        <button class="w2ui-btn" onclick="saveRecords('gridName')">Sauvegarder le fichier</button>
        <script type="text/javascript">
            $(function () {
                $('#grid').w2grid({
                    name: 'gridName',
                    show: {
                        lineNumbers: true,
                        footer: true
                    },
                    columns: [
                        { field: 'recid', caption: 'recID', size: '60px', sortable: true },
                        { field: 'lname', caption: 'Last Name', size: '30%' },
                        { field: 'fname', caption: 'First Name', size: '30%' },
                        { field: 'email', caption: 'Email', size: '40%' },
                        { field: 'sdate', caption: 'Start Date', size: '90px' }
                    ]
                });
                sessionStorage.gridName = "gridName";
            });
        </script>
    </body>
</html>
Javascript
function handleJsonFiles(files)
{
    jsonGetAsText(files[0]);
    /* reset nécessaire de l'input, sinon on ne peut charger deux fois de suite le même fichier.*/
    $("#jsonFileInput").val("");
}

function jsonGetAsText(fileToRead)
{
    var reader = new FileReader();
    reader.onload = jsonLoadHandler;
    reader.onerror = jsonErrorHandler;
    /* Read file into memory as UTF-8*/
    reader.readAsText(fileToRead);
}

function jsonLoadHandler(event)
{
    var importData = JSON.parse(event.target.result);
    w2ui[sessionStorage.gridName].add(importData);
    w2ui[sessionStorage.gridName].refresh();
}

function jsonErrorHandler(evt)
{
    console.log(evt.target.error.name);
}

function addRecords(gridName)
{
    var g = w2ui[gridName].records.length;
    if( g === 0 ) return;
    var people_plus = [
        { recid: g + 1, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 2, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 3, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 4, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 5, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 6, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 7, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 8, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 9, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 10, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 11, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 12, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 13, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 14, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 15, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 16, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 17, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 18, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 19, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 20, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 21, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 22, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 23, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 24, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: g + 25, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
    ];
    w2ui[gridName].add(people_plus);
    w2ui[gridName].refresh();
}

function saveRecords(gridName)
{
    var records = w2ui[gridName].records;
    var serializedData = JSON.stringify(records);
    /*Utilisation de la librairie 'FileSaver.js'*/
    /*https://github.com/eligrey/FileSaver.js */
    var blob = new Blob([serializedData], {type: "application/json"});
    var saveAs = window.saveAs;
    saveAs(blob, "people.json");
    w2ui[gridName].clear();
}

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


Ecrire un commentaire