plugin jQuery Tableau de bord - comment enregistrer un changement d'état

Question

j'ai commencé à utiliser le plug-in du tableau de bord qui est demoed ici - http://www.gxdeveloperweb.com/dashboardplugin/demo/dashboard.html

Je me bats avec la documentation. Principalement sur la façon d'enregistrer les configurations de tableau de bord modifiées par l'utilisateur final.

Dans la documentation, il vous indique comment faire un « dashboardStateChange »:

dashboard.element.trigger("dashboardStateChange",{"stateChange":"widgetAdded","widget":widget}); 

Mais je ne comprends pas vraiment où est d'aller dans le setup du tableau de bord, et la façon dont vous utilisez cette option pour enregistrer les changements. Je pensais que je pourrais accéder à dashboardStateChange depuis le DOM quand quelque chose se passe, mais même ne pas comprendre comment cela est fait.

Quelqu'un a-t-il des conseils pour sauvegarder le tableau de bord lorsque son état a changé? Je voudrais qu'il parle à un script php qui enregistre la configuration du tableau de bord.

Malheureusement, il n'existe pas de tutoriels sur ce type de fonctionnalités.

Merci!

Answer 1

Je ne sais pas si cette question est toujours d'intérêt mais j'utilise ce plugin depuis un bon moment et c'est assez facile à utiliser. Vous trouverez une bonne partie de la réponse dans l'exemple fourni avec le plugin et, pour votre problème, vous pouvez consulter l'exemple de code suivant que j'utilise pour rendre la disposition actuelle du tableau de bord persistante sur le serveur.

Veuillez noter que "saveID" est l'ID d'un bouton Enregistrer et "saveConfiguration" est l'URL qui sauvegarde la mise en page sur le serveur.

// binding for saving the current configuration 
$("#saveID").bind("click", function() { 
    var conf = $.parseJSON(dashboard.serialize()), 
     // get the serialized configuration 
     len = conf.data.length, 
     // generate the new parameter to submit 
     para = "lay=" + conf.layout + "&len=" + len, 
     i = 0; 
    for (i = 0; i < len; i += 1) { 
     para = para + "&pid" + i + "=" + conf.data[i].id + "&col" + i + "=" + conf.data[i].column; 
    } 

    // Invoke the "saveConfiguration" on the server via AJAX 
    $.ajax({ 
     url: "saveConfiguration", 
     data: para, 
     dataType: "json", 
     success: function (jsonResponse) { 
      if (jsonResponse.valid === true) { 
       alert("Configuration has been saved"); 
      } else { 
       alert("Error when trying to save the configuration\n" + jsonResponse.error); 
      } 
     }, 
     error: function (jqXHR, textStatus, errorThrown) { 
      alert(textStatus + " - " + errorThrown); 
     } 
    }); 
    return false; 
}); 

Answer 2

Vous pouvez utiliser la fonction intégrée de tableau de bord pour sauver rapide & facile. Sur la page où vous initialiser le tableau de bord, mettez cette fois la fonction initDashboard(), mais avant la dashboard.init():

$("#savebutton_id").bind("click", function() { 
    dashboard.element.trigger("dashboardStateChange",{"stateChange":"widgetMoved","widget":"w"}); 
    alert("Saved"); 
}); 

Ensuite, vous mettez un bouton ou un lien avec l'id savebutton_id quelque part dans votre code HTML. Lorsque vous cliquez dessus, le tableau de bord envoie la configuration sérialisée à votre stateChangeUrl prédéfini.