Gridstack.js: 백분율 대신 픽셀을 기반으로 고정 너비 격자를 만듭니다.

@cblokker 이 작업을 수행하는 방법을 알아

이것은 나에게 슬픔을 일으키는 기능입니다.

    GridStack.prototype.cellWidth = function() {
        return Math.round(this.container.outerWidth() / this.opts.width);
    };

픽셀 기반 너비의 경우 열을 픽셀 단위로 정의하는 CSS와 함께 this.opts.width 만 반환하려면이 함수가 필요합니다.

어떤 모델에 있었는지 (% 또는 px) 결정하기 위해 gridstack에 스마트 기능이 필요하거나 어떤 모드인지 알려주는 구성 옵션이 있어야한다고 생각합니다.

편집 : 그렇게 간단하지 않을 수도 있습니다. 나는 지금 그것을보고 놀고있다.

편집 2 : 내 5 분 수정. 적어도 아직 반응 형 흐름이 아직 없습니다.
Diff : 지원 픽셀 너비

4k 화면에서 그리드를 보는 데 문제가 있기 때문에 때때로 웹 페이지를 넓게 만들고 싶을 때 크기가 거의 절반 인 새 그리드를 설정 한 다음 크기를 조정할 때 다른 사람들이 사용할 해상도로 페이지를 내려 가면 너비가 너무 좁습니다.

저도이 기능이 gridstack에서 지원되는 것을보고 싶습니다.

여기에서도 마찬가지입니다. 그리드 스택에서보고 싶습니다.

그 동안 간단한 사용 사례 (1 행, disabledOneColumnMode, height = 1)를 위해 해킹 할 수있었습니다.
모든 타일을 100px 너비로 강제하려면 (내 모든 타일은 너비 = 1이며 너비에 대해 어렵지 않아야 함) :
CSS에서
$tile-width: 100px; /*100px*/ .grid-stack-item[data-gs-width="1"] { width: $tile-width; min-width: $tile-width; max-width: $tile-width; } .grid-stack-item { <strong i="9">@for</strong> $i from 1 through 20 { &[data-gs-x='#{$i}'] { left: $i * $tile-width; } } }
건설자:
const width = $('.grid-stack').outerWidth(); this.grid = $('.grid-stack').gridstack({ auto: false, cellHeight: 80, disableResize: true, verticalMargin: 0, width: Math.round(width/100), height: 1, disableOneColumnMode: true }).data('gridstack');
크기 조정 핸들러에서 너비 재설정
resizeHandler() { const width = $('.grid-stack').outerWidth(); const grid = $('.grid-stack').data('gridstack'); grid.setGridWidth(Math.round(width/100), true); }
해킹은 현재 그리드 너비 (px)를 기준으로 너비 (열 수)를 조정하여 cellWidth를 100px (CSS에 설정된대로)로 강제하는 것입니다.

cellHeight 를 원하는대로 설정할 수 있으며 컨테이너를 만들고 옵션을 gridstack에 전달하기 전에 Javascript를 사용하여 차원을 결정할 수 있습니다. 이러한 방식으로 원하는 비율을 설정하고 특정 픽셀 기반 너비와 높이를 설정할 수도 있습니다.