我目前正在研究angular-gridster2的集成。目的是获得具有固定行高,固定列数和大小的网格。这是我当前的GridsterConfig:
{
setGridSize: true,
margin: 5,
displayGrid: DisplayGrid.OnDragAndResize,
gridType: GridType.VerticalFixed,
keepFixedHeightInMobile: true,
fixedRowHeight: 50,
minCols: 6,
maxCols: 6,
swap: true,
pushItems: true,
resizable: { enabled: true },
draggable: {enabled: true },
enableEmptyCellDrop: true,
}
使用此配置,网格高度将按预期(完美)计算。问题是窗口调整大小后宽度保持不变。当我将setGridSize属性设置为false时,宽度计算将按预期进行,但高度始终是边距的2倍。
答案 0 :(得分:1)
您可以使用gridster内置选项(例如:
vm.options =
{
minCols: 7,
maxCols: 7,
minRows: 4,
maxRows: 4,
maxItemCols: 50,
minItemCols: 1,
maxItemRows: 50,
minItemRows: 1,
maxItemArea: 2500,
minItemArea: 1,
defaultItemCols: 1,
defaultItemRows: 1,
setGridSize: true,
fixedColWidth: 250,
fixedRowHeight: 250,
};
供参考:
答案 1 :(得分:1)
我使用了以下配置,并且对我有用:
itemChangeCallback: ((item: GridsterItem) => {
// Your content here
}),
itemInitCallback: ((item: GridsterItem, itemComponent: GridsterItemComponentInterface) => {
// Your content here
}),
setGridSize: true,
gridType: 'verticalFixed',
fixedRowHeight: 237,
minRows: 2,
maxRows: 100,
minItemRows: 2,
maxItemRows: 2,
defaultItemRows: 1,
minCols: 12,
maxCols: 12,
maxItemCols: 12,
minItemCols: 1,
defaultItemCols: 1,
maxItemArea: 2500,
minItemArea: 1,
swap: true,
displayGrid: 'onDrag&Resize',
compactType: 'compactUp', // 'compactUp&Left',compactLeft&Up'
pushItems: true,
resizable: { enabled: true },
draggable: {
enabled: true
}
希望这会有所帮助
答案 2 :(得分:0)
我现在的解决方案是我创建了一个父容器div,在其中根据网格行设置高度(用行*(fixedRowHeight +边距)计算高度)。