0

如何保存添加的小部件的状态：以下是我用来在单击按钮时添加小部件的功能：

 $('.js-resize-random').on('click', function() {
    gridster.add_widget('<li class="new">The new widget...</li>', 2, 1);
});

这是html：

<div>
<button class="js-resize-random">Add widget</button></div>

刷新时，我需要添加的小部件来保留其状态。我怎么做？有任何想法吗？？？？？

提前致谢！

4

2 回答 2

0

我最近做了一个指令来保存和加载仪表板小部件的位置。它是小部件 div 的一个简单属性。

appControl.directive('saveLoadGridsterPosition', ['whateverStoringDependency', function($whateverStoringDependency)
{
    return function(scope, element, attrs) {

        var objectLoaded = whateverStoringDependency.load(attrs.saveLoadGridsterPosition);
        // Empty or errorous load
        if ((objectLoaded == undefined ) || (objectLoaded == null )) {
            console.log('Error loading ' + attrs.saveLoadGridsterPosition+'\'s position.');
        }
        else {
            // Here you set the row/col somewhere in the scope, for me its like scope.widget.row
            scope.widget.row = objectLoaded.row;
            scope.widget.col = objectLoaded.col;
        }

        var save = function() {
            // Here you should get the row/col from the scope
            var r = scope.widget.row;
            var c = scope.widget.col;
            var savingObject = {row: r, col: c};
            whateverStoringDependency.save(attrs.saveLoadGridsterPosition, savingObject);
        }

        scope.$on('$destroy', save);
    }
}]);

'whateverStoringDependency'可以是从本地存储、cookie 或会话中保存/加载内容的自定义服务。然后我像这样使用它：

<div gridster="gridsterOpts">
    <ul>
        <li ng-repeat="widget in widgets" gridster-item row="widget.row" col="widget.col" size-x="widget.sizeX" size-y="widget.sizeY">
            <div data-widget="widget" save-load-gridster-position="{{widget.name}}"></div>
        </li>
    </ul>
</div>

也许这不是很好，但对我来说它工作得很好。它也可以在任何角度事件上执行此操作，例如您定义"savePositions"和侦听它而不是"$destroy". 希望能帮助到你！

于 2014-09-16T09:34:36.143 回答
0

我想说，如果您想要永久更改，您可能需要使用 Ajax 将新标记写入数据库。

如果它更特定于会话，您可以使用 cookie 来解决它。

<?php
//check for cookie value
$widgetVar =  $_COOKIE['widgetStatus']; 
?>

<?php if($widgetVar!='true'): ?>
$('.js-resize-random').on('click', function() {
    gridster.add_widget('<li class="new">The new widget...</li>', 2, 1);
    //code to set the cookie once the button is clicked
    document.cookie = "widgetStatus=true";

});
<?php else: ?>

    This markup renders if the cookie is true when the page loads. So this is where the widget would go.

<?php endif; ?>
于 2014-02-21T20:41:22.907 回答