jQuery Dashboard 插件 - 如何保存状态更改

Question

我已经开始使用此处演示的仪表板插件 - http://www.gxdeveloperweb。 com/dashboardplugin/demo/dashboard.html

我正在努力处理文档。主要是关于如何保存最终用户更改的仪表板配置。

在文档中，它告诉您如何执行“dashboardStateChange”：

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

但我真的不明白它在仪表板设置中的位置，以及如何使用它来保存更改。我认为当发生某些事情时我可以从 DOM 中访问仪表板状态更改，但甚至无法理解这是如何完成的。

有没有人有任何关于在仪表板状态发生变化时保存仪表板的提示？我希望它能够与保存仪表板设置的 php 脚本对话。

不幸的是，没有任何关于此类功能的优秀教程。

谢谢！

Answer 1

我不知道这个问题是否仍然有趣，但我已经使用这个插件很长一段时间了，它实际上很容易使用。
几乎所有答案都可以在插件附带的示例中找到，对于您的问题，您可能需要查看以下示例代码，我用它来使仪表板的当前布局在服务器上持久化。

请注意，“saveID”是“保存”按钮的 ID，“saveConfiguration”是在服务器上保存布局的 URL。

// 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

您可以使用内置的仪表板功能来快速保存简单的。在初始化仪表板的页面上，将其放在 initDashboard() 函数之后，但在 dashboard.init() 之前：

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

然后放置一个带有以下内容的 Button 或 Link HTML 代码中某处的 id savebutton_id 。当您单击它时，仪表板会将序列化配置发送到您预定义的 stateChangeUrl。