W2ui s'accorde parfaitement avec le format .json. Voici un exemple complet de grille avec la possibilité de charger un fichier .json local, qu'on peut considérer comme une mini base de données.
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

Importer un fichier .json local dans une grille w2ui

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>W2UI IDB 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="importJSONToGrid.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>
        <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%', sortable: true },
                        { field: 'email', caption: 'Email', size: '40%' },
                        { field: 'sdate', caption: 'Dates', size: '90px', attr: "align=center" }
                    ],
                });
                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);
}
JSON
[
    { 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" }
]
Le format du fichier .json est ultra simple et fonctionne très bien avec IndexedDB et w2ui. Il s'agit tout simplement d'un tableau d'objets.

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


Ecrire un commentaire