如何保存添加的小部件的状态:下面是我用来点击按钮添加小部件的功能:
$('.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>
在刷新时,我需要添加的小部件来保持其状态。我怎么做? 任何想法?????
提前致谢!
答案 0 :(得分: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; ?>
答案 1 :(得分: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"
。希望能帮助到你!