Gridstack.js: إزالة عنصر واجهة مستخدم الشبكة الرئيسية المتداخلة من الصف الأخير من الشبكة الرئيسية مما تسبب في فقدان بعض أدوات الشبكة الرئيسية لموقعها

أهلا،

لقد واجهت سلوكًا غريبًا عندما أغير الحجم ثم أزل شبكة متداخلة من شبكتها الأصلية.

لدي شبكتان ، إحداهما متداخلة في العنصر المحدد للآخر.
من الممكن إضافة وإزالة عناصر واجهة المستخدم في كلتا الشبكتين عن طريق تحديد / إلغاء تحديد بعض مربعات الاختيار.
عندما أقوم بإزالة عناصر واجهة المستخدم من الشبكة المتداخلة ، أقوم بتغيير حجم عنصر واجهة الشبكة الأصلي ليكون دائمًا بحد أقصى ارتفاع الشبكة المتداخلة.
عندما تصبح الشبكة المتداخلة فارغة ، يجب إزالتها من الشبكة الرئيسية.

في الواقع كل شيء يعمل بشكل جيد حتى حالة واحدة محددة:

1. الشبكة المتداخلة موجودة في الصف الأخير من الشبكة الرئيسية
2. يتم إجراء تغيير حجم الشبكة المتداخلة باستخدام grid.resize ()
3. إزالة آخر عنصر واجهة مستخدم من الشبكة المتداخلة مع gridNested.removeWidget ()
4. إزالة عنصر واجهة المستخدم الأصلي للشبكة المتداخلة من الشبكة الرئيسية باستخدام grid.removeWidget ().

عند الانتهاء من هذه الخطوات ، فقدت الأدوات القليلة الأخيرة من عناصر واجهة المستخدم للشبكة مواقعها وتقفز إلى الصف الأول من الشبكة الرئيسية - تظل جميع سمات البيانات الخاصة بها صحيحة ، ويصبح موضعها خاطئًا (أعلى: 0 ، أسفل: ارتفاع الشبكة) ). عندما أقوم بإعادة إضافة الشبكة المتداخلة ، يعود كل شيء إلى الموضع الصحيح ، ولكن بعد إزالة الشبكة المتداخلة مرة أخرى ، يحدث الشيء الغريب مرة أخرى. عندما قمت بتنفيذ الخطوات المذكورة أعلاه مرة واحدة ثم حاولت إزالة عناصر واجهة المستخدم من الشبكة الرئيسية ، فإن هذه الأدوات تظل تطفو أيضًا إلى الصف الأول ثم تعود بعد إضافة عنصر واجهة مستخدم. عندما أقوم بنقل الشبكة المتداخلة في أي مكان آخر غير الصف الأخير ، فلن تحدث إعادة تعيين غير صحيحة.

أثناء التحقيق ، لن تحدث إعادة الوضع الغريبة إلا بعد أن قمت مرة واحدة بتغيير حجم الأداة الرئيسية للشبكة المتداخلة ، حتى تعمل إضافة وإزالة الحاجيات إلى كلتا الشبكتين بشكل جيد. لذلك يبدو أن تغيير الحجم يفسد الأشياء.

لسوء الحظ لا يمكنني تقديم كمان عملي لأن هذا ليس سوى جزء من نص أكبر ، يمكنني فقط إرفاق لقطات شاشة لكيفية ظهوره.

قبل إزالة الشبكة المتداخلة (ذات الحدود):

بعد إزالة الشبكة المتداخلة ، اختفت بعض الأدوات الأخرى من موضعها الأصلي وتطفو إلى الصف الأول من الشبكة الرئيسية ، بينما يتم الاحتفاظ بمكانها في الشبكة في الموضع الصحيح (مساحة بيضاء فارغة في الأسفل):

يتم تهيئة شبكاتي باستخدام هذه الخيارات:

grid = $('#grid.grid-stack').gridstack({
            width: 2,
            cellHeight: 84,
            verticalMargin: 4,
            animate: true,
            disableOneColumnMode: true,
            height: 0
}).data('gridstack');        

gridNested = $('#gridNested.grid-stack').gridstack({
            width: 2,
            cellHeight: 80,
            verticalMargin: 4,
            animate: true,
            disableOneColumnMode: true,
            float: true,
            height: 0
}).data('gridstack');

تبدو بنية HTML كما يلي:

<div id="grid"  class="grid-stack grid-stack-2">
    <div id="element1" class="grid-stack-item element nestedblock" data-id="1" data-gs-width="2" data-gs-height="1" data-gs-min-width="2" data-gs-max-width="2" data-gs-max-height="8" data-gs-y="0" data-gs-x="0">
         <div class="grid-stack-item-content">
             <div id="gridNested" class="grid-stack grid-stack-2">
                 <div id="element20" class="grid-stack-item element" data-id="20" data-gs-width="1" data-gs-height="1" data-gs-min-width="1" data-gs-max-width="2" data-gs-max-height="1" data-gs-y="0" data-gs-x="0">
                     <div class="grid-stack-item-content">
                        <!--contents-->
                    </div>
                </div>
                <div id="element21" class="grid-stack-item element" data-id="21" data-gs-width="1" data-gs-height="1" data-gs-min-width="1" data-gs-max-width="2" data-gs-max-height="1" data-gs-y="0" data-gs-x="1">
                     <div class="grid-stack-item-content">
                        <!--contents-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="element2" class="grid-stack-item element" data-id="2" data-gs-width="1" data-gs-height="1" data-gs-min-width="1" data-gs-max-width="2" data-gs-max-height="1" data-gs-y="1" data-gs-x="0">
         <div class="grid-stack-item-content">
             <!--contents-->
         </div>
    </div>
    <div id="element3" class="grid-stack-item element" data-id="3" data-gs-width="1" data-gs-height="1" data-gs-min-width="1" data-gs-max-width="2" data-gs-max-height="1" data-gs-y="1" data-gs-x="1">
         <div class="grid-stack-item-content">
             <!--contents-->
         </div>
    </div>
</div>

أقوم بتغيير حجم عنصر واجهة المستخدم الأصلي للشبكة المتداخلة بهذه الطريقة:

function resizeNestedParentWidget(){
    var nestedParentWidget = $('#grid .grid-stack-item.nestedblock');
    var nestedGridHeight = parseInt($('#gridNested').attr('data-gs-current-height'));
    var nestedParentWidgetCurrentHeight = parseInt($(nestedParentWidget).attr('data-gs-height'));
    if(nestedGridHeight < nestedParentWidgetCurrentHeight){
        grid.resize(nestedParentWidget,null,nestedGridHeight);
    }
}

أقوم بإزالة عناصر واجهة المستخدم من الشبكة المتداخلة بهذه الطريقة:

![gridstack1](https://cloud.githubusercontent.com/assets/15252130/25693244/9b3f9ac8-30a8-11e7-9621-1c13cfe5acdb.jpg)

var elem = $('#grid #element'+elemID);
gridNested.removeWidget(elem);

if($('#gridNested .grid-stack-item').length < 1){
    grid.removeWidget($('#grid .grid-stack-item.nestedblock'));
} else {
    resizeNestedParentWidget();
}

ما الخطأ الذي افعله؟ هل أسيء استخدام شيء ما؟ أو هل وجدت خطأ؟ :)

شكرا لك مقدما.