Question

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

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

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

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

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

有没有人在状态发生变化时获得有关保存仪表板的任何提示？我希望它能够与一个保存仪表板设置的PHP脚本交谈。

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

谢谢！

Answer 1

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

请注意，“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

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

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

然后在HTML代码中的某处放置一个ID为savebutton_id的按钮或链接。单击它时，仪表板会将序列化配置发送到预定义的stateChangeUrl。

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

2 个答案: