[英]Align gridster items using row and col values angularjs
I have created a dashboard using angularjs, kendoui charts and angular gridster ( https://github.com/ManifestWebDesign/angular-gridster ). 我已经使用angularjs,kendoui图表和angular gridster( https://github.com/ManifestWebDesign/angular-gridster )创建了一个仪表板。
So I have a function to add a gridster with chart like below :- 所以我有一个函数来添加带有如下图表的表格:
// add widget to a dashboard $scope.addWidget = function () { // new widget configuration var newWidget = { id: $scope.allWidgetData.selectedOption.id, data_source: {}, config: { name: $scope.allWidgetData.selectedOption.name, sizeX: 3, sizeY: 2, row: $scope.row, col: $scope.col } }; } // make api call and save data
I can save this object to backend and get the values too. 我可以将此对象保存到后端并获取值。 I am setting row and col values for each chart as follows as the sizeX and sizeY values are constant as 3 and 2.
我正在为每个图表设置行和列值,如下所示,因为sizeX和sizeY值恒定为3和2。
I referred and searched for solution on below pages :- 我在以下页面上参考并搜索了解决方案:-
Save gridster layout using angularjs 使用angularjs保存gridster布局
https://github.com/ManifestWebDesign/angular-gridster https://github.com/ManifestWebDesign/angular-gridster
So now my HTML is like below so I set row and col values:- 所以现在我的HTML如下所示,所以我设置了row和col值:
<div gridster="gridsterOptions" ng-if="isShowing(index)"> <ul> <li gridster-item="widget" ng-repeat="widget in widgetData.availableOptions" row="widget.config.row" col="widget.config.col" style="overflow:hidden;" > <div class="box"> // kendo ui chart in div </li> </ul> </div>
My gridster configuration is like below :- 我的gridster配置如下:
$scope.gridsterOptions = { minRows: 2, // the minimum height of the grid, in rows maxRows: 100, columns: 6, // the width of the grid, in columns colWidth: 'auto', // can be an integer or 'auto'. 'auto' uses the pixel width of the element divided by 'columns' rowHeight: 'match', // can be an integer or 'match'. Match uses the colWidth, giving you square widgets. margins: [10, 10], // the pixel distance between each widget defaultSizeX: 3, // the default width of a gridster item, if not specifed defaultSizeY: 2, // the default height of a gridster item, if not specified mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items swapping: false, pushing: true, floating: false, resizable: { enabled: true, start: function(event, uiWidget, $element) {}, // optional callback fired when resize is started, resize: function (event, uiWidget, $element) { }, // optional callback fired when item is resized, stop: function(event, uiWidget, $element) { } // optional callback fired when item is finished resizing }, draggable: { enabled: true, // whether dragging items is supported handle: '.box-header', // optional selector for resize handle start: function(event, uiWidget, $element) {}, // optional callback fired when drag is started, drag: function(event, uiWidget, $element) {}, // optional callback fired when item is moved, stop: function(event, uiWidget, $element) { } // optional callback fired when item is finished dragging } };
When I get the gridster items from backend they are in random order and gridster does not align them as per row and col values.
当我从后端获取gridster项目时,它们的顺序是随机的,并且gridster不会按照行和col值对齐它们。
I created a working pen for you how to do this: https://codepen.io/shnigi/pen/JLVZpK 我为您创建了一支工作笔,具体操作方法如下: https : //codepen.io/shnigi/pen/JLVZpK
I had a similar problem, this is how I tackled it. 我有一个类似的问题,这就是我解决的方法。 Make sure you are referencing to right object value.
确保您引用的是正确的对象值。 You may also have to set positions when your ajax call is ready:
准备好ajax调用时,您可能还需要设置位置:
<li ng-repeat="widget in widgets"
class="panel" gridster-item
row="widget.posY"
col="widget.posX"
size-x="widget.width"
size-y="widget.height">
<div class="panel-heading">
<h3 class="panel-title">{{widget.title}}</h3>
</div>
</li>
Mobile breakpoints are also issue as you set the widget position and then you may have different resolution. 设置小部件位置时,移动断点也会出现问题,然后可能会有不同的分辨率。 So what I did here is that I am now using this fork:
所以我在这里所做的是,我现在正在使用此fork:
https://github.com/arkabide/angular-gridster https://github.com/arkabide/angular-gridster
I count the columns based on resolution and have "dynamic" columns turned on. 我根据分辨率对列进行计数,并启用了“动态”列。
$scope.gridsterOptions = {
resizable: {
enabled: false,
},
floating: true,
pushing: true,
swapping: true,
isMobile: true,
mobileBreakPoint: 768,
columns: getColumns(),
dynamicColumns: true,
minWidthToAddANewColumn: 255,
rowHeight: 400,
draggable: {
enabled: true,
handle: '.panel-heading'
}
};
const getColumns = () => {
const browserWidth = $window.innerWidth;
if (browserWidth < 1300) {
return 3;
} else if (browserWidth < 1500) {
return 4;
} else if (browserWidth < 1700) {
return 5;
}
return 6;
};
There are some issues with the widget positioning if resolution changes, but this is the best solution I have got so far. 如果分辨率发生变化,则小部件的位置会存在一些问题,但这是到目前为止我获得的最好的解决方案。
So make sure you load all data before assigning it using promises. 因此,请确保在使用Promise分配数据之前先加载所有数据。 Pseudo code like this:
伪代码是这样的:
const loadedWidgets = [];
if (settings) {
const loadAllWidgets = () => new Promise(resolve =>
loadedWidgets.push(widget);
resolve();
}));
const actions = settings.chartsettings.map(loadAllWidgets);
Promise.all(actions).then(() => {
const widgetList = loadedWidgets.map(widget => widget);
$scope.widgets = widgetList;
});
}
I guess your issue is related to object referencing or you are not setting position with promises. 我猜您的问题与对象引用有关,或者您没有设置承诺。 You can also try the fork I am using.
您也可以尝试使用我正在使用的叉子。 Because for me this setup works and the widgets appear where I save them.
因为对我来说,此设置有效,并且小部件出现在我保存它们的位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.