使用row和col值angularjs对齐gridster项目 [英] Align gridster items using row and col values angularjs
问题描述
我使用angularjs，kendoui图表和角栅格创建了一个仪表板（ https://github.com / ManifestWebDesign / angular-gridster ）。
所以我有一个函数来添加一个grids，如下图所示： - $ /
//将小部件添加到仪表板$ scope.addWidget = function（）{//新的小部件配置var newWidget = {id：$ scope.allWidgetData.selectedOption.id，data_source：{}，config：{name：$ scope.allWidgetData.selectedOption.name，sizeX：3，sizeY：2，row：$ scope.row，col：$
我可以将这个对象保存到后端并获取值。我为每个图表设置了行和列值，如下所示，因为sizeX和sizeY的值是常数3和2.
- 第一个图表行：0和col：0
- 第二个图表行：0和col：3
- 第三个图表行：2和col：0
- 第四个图表行：2和col：3
我在下面的页面上引用和搜索解决方案： -
所以现在我的HTML如下所示，所以我设置了行和列值： -
< div gridster =gridsterOptionsng-if =isShowing（index）> < UL> < li gridster-item =widgetng-repeat =widget in widgetData.availableOptionsrow =widget.config.rowcol =widget.config.colstyle =overflow：hidden; > < div class =box> // kendo ui chart in div< / li> < / UL> < / DIV>
我的gridster配置如下所示： -
$ scope.gridsterOptions = {minRows：2，//网格的最小高度，in行maxRows：100，列：6，//网格的宽度，列colWidth：'auto'，//可以是整数或'auto'。 'auto'使用元素除以'columns'的像素宽度rowHeight：'match'，//可以是整数或'match'。 Match使用colWidth，为您提供方形小部件。边距：[10，10]，//每个部件之间的像素距离defaultSizeX：3，//如果没有指定gridster项目的默认宽度defaultSizeY：2，//如果未指定gridster项目的默认高度mobileBreakPoint：600，//如果屏幕宽度不是这样的，请移除网格布局并堆叠项目交换：false，推送：true，floating：false，resizable：{enabled：true，start：function（event，uiWidget， （event，uiWidget，$ element）{}，//当item被调整大小时触发可选的回调函数，stop：function（event，uiWidget，$ element，$ element）{}，//可选的回调函数， ）{} //当item完成调整时可选的回调调整大小}，draggable：{enabled：true，//是否支持拖动项目句柄：'.box-header'，//可选择调整大小的选择器start：function（event ，uiWidget，$ element）{} ，//当开始拖动时触发可选的回调函数，drag：function（event，uiWidget，$ element）{}，//当item移动时触发可选的回调函数，stop：function（event，uiWidget，$ element）{} //项目完成时可选的回调拖动}};
从后端开始，它们是以随机顺序排列的
，并且gridster并不按照每行和每列值排列它们。
我为您制作了一支工作笔，如何操作： https：// codepen .io / shnigi / pen / JLVZpK
我有类似的问题，这是我如何处理它。确保你正在引用正确的对象值。当您的ajax调用已准备就绪时，您可能还必须设置位置：
< li ng-repeat =窗口小部件中的窗口小部件
class =panelgridster-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>
在设置小工具位置时，移动断点也是问题，然后您可能会有不同的分辨率。所以我在这里做的是我现在正在使用这个分支：
https://github.com/arkabide/angular-gridster
我根据分辨率对列进行计数并具有动态列打开。
$ scope.gridsterOptions = {
可调整大小：{
启用：false，
$ mobileBreakPoint $ 7 b
$ mobileBreakPoint $ 7 $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ getColumns（），
dynamicColumns：true，
minWidthToAddANewColumn：255，
rowHeight：400，
可拖动：{
启用：true，
句柄：' .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;
}
返回6;
};
如果解决方案发生变化，小部件定位会出现一些问题，但这是我获得的最佳解决方案至今。
因此，请确保在使用承诺分配数据之前加载所有数据。像这样的伪代码：
const loadedWidgets = [];
if（settings）{
const loadAllWidgets =（）=>新的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 have created a dashboard using angularjs, kendoui charts and 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.
- First chart row:0 and col:0
- Second chart row:0 and col:3
- Third chart row:2 and col:0
- Fourth chart row:2 and col:3
I referred and searched for solution on below pages :-
So now my HTML is like below so I set row and col values:-
<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 :-
$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.
I created a working pen for you how to do this: 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:
<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:
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. 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.
这篇关于使用row和col值angularjs对齐gridster项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
