Question

当我加载已保存的布局时，如果布局的高度大于页面上已加载的高度（$。'grid-stack'）。attr（'data-gs-current-height'），具有y轴的元素超过页面顶部位置处的负载。它们的y轴标签在DOM中正确反映。

如果文档的高度没有变化，则按预期工作。仅当新加载的窗口小部件的组合高度高于它们加载到的文档时才会出现这种情况。

我使用以下代码更改（'.grid-stack'）。attr（'data-gs-current-height'）值以及加载小部件之前元素值的高度，但是他们尽管data-gs-current-height确实显示它已经在DOM中加载小部件新值之前已经更新，但仍然会将它们堆叠在一起。

我用来改变网格堆栈高度的代码是：

var changeGridStackHeight = function(gridStackHeight, docHeight, json){
        $('.grid-stack').attr("data-gs-current-height", gridStackHeight);
        $('.grid-stack').css('height', docHeight);
        loadUserTemplate(json);
    };

和loadUserTemplate（json）是：

var loadUserTemplate = function(json){
        var firstArray = json[0];
        var parsed = (JSON.parse(firstArray));
        var gridStack = $('.grid-stack-item');
        var plength = parsed.length;

        gridStack.each(function(index){
            var count = 0;
            var gridstackId = $(this).attr('data-custom-id');
            for(var i=0; i < plength; i++){
                if($(this).attr('data-custom-id') === parsed[i].id){
                    $(this).attr('data-gs-x', parsed[i].x);
                    $(this).attr('data-gs-y', parsed[i].y);
                    $(this).attr('data-gs-width', parsed[i].width);
                    $(this).attr('data-gs-height', parsed[i].height);
                }
                var equals = Number(parsed[i].id) == Number(gridstackId);
                if(equals === true){
                    count++;
                }
            }
            if(count === 0){
                $(this).css('display', 'none');
            }
        });
        var reposition = window.setTimeout(function(){
            fixSizes();
        },1000);
    };

Answer 1

我找到了解决我的特定问题的方法，虽然我不认为这是打算修复的方式，因为它确实存在与之相关的其他问题。如果将来的任何人都有更适合的方式，请发布它，我会将答案标记为正确的方式。

我发现gridstack正在创建它自己的样式表，它将_max：设置为我的网格加起来的任何高度。它遍历每个小部件并稳定在最终高度。 gridstack.js中有一行更新maxHeight。我添加了“105”到它的末尾，因为这对于我的特定情况来说就像我需要它一样大。这行代码现在看起来像这样：

self._updateStyles(maxHeight + 105);

它创建的问题是，当用户尝试更改已加载的网格时，它会将小部件全部放在板上。我可能会这样做，所以小部件无法调整大小或从已保存的模板移动，但同样，这不是插件的正确功能。

GridStack在遇到特定的y轴点后，未在页面上正确定位元素

1 个答案: