ضبط حجم العناصر داخل لوحة gridstackjs بفعالية

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

1. إعداد Gridstack.js

قبل البدء في التحكم في حجم العناصر، علينا أولاً إعداد مكتبة Gridstack.js. يمكن القيام بذلك بسهولة باستخدام كود JavaScript التالي:

$(document).ready(function() {
    const Gridstack = GridStack.init({ 
        cellHeight: 100, 
        resizable: { handles: 'se, s, e' } 
    });
    // البيانات هنا...
});

في هذا الكود، نبدأ بتعريف إعدادات Gridstack، بما في ذلك ارتفاع الخلية وإمكانية إعادة الحجم. حيث تساعد خيارات handles على تحديد الأجزاء التي يمكن استخدامها لإعادة الحجم.

2. إضافة البيانات إلى الجدول

عند استخدام Gridstack، فإن شريحة البيانات هي جزء أساسي من التطبيق. نقوم بتعريف البيانات كما يلي:

const data = [
    { id: 1, firstName: "Mario", lastName: "Rossi", age: 30 },
    { id: 2, firstName: "Luca", lastName: "Bianchi", age: 25 },
    // المزيد من البيانات...
];

بعد ذلك، نحتاج إلى توصيل هذه البيانات بالجدول. يتم ذلك عن طريق إعداد مصدر البيانات:

const source = {
    localdata: data,
    datatype: "array",
    datafields: [
        { name: 'id', type: 'number' },
        { name: 'firstName', type: 'string' },
        { name: 'lastName', type: 'string' },
        { name: 'age', type: 'number' }
    ]
};

هذا المصدر يحوز على هيكلية بيانات متكاملة لنتمكن من إدراجها داخل لوحة Gridstack.

3. ضبط حجم الجداول داخل Gridstack

عند تثبيت الجدول في Gridstack، نقوم بتعريفه كما يلي:

function initGrid(selector) {
    $(selector).jqxGrid({
        width: '100%',
        height: '100%',
        source: dataAdapter,
        columns: [
            { text: 'ID', datafield: 'id', width: '20%' },
            { text: 'Name', datafield: 'firstName', width: '40%' },
            { text: 'LastName', datafield: 'lastName', width: '40%' }
        ]
    });
}

هذا الكود لا يحدد فقط بيانات الجدول، بل يضبط أيضاً مساحاته لتكون أكثر توافقًا مع تخطيط Gridstack.

4. التعامل مع إعادة الحجم

أحد الميزات المفيدة لـ Gridstack هو القدرة على إعادة حجم العناصر عند السحب. هنا لا بد من إضافة وظيفة للاستجابة للتغييرات:

Gridstack.on('resizestop', function(event, el) {
    const $grid = $(el).find('.jqx-grid');
    if ($grid.length) {
        $grid.jqxGrid('width', $(el).width());
        $grid.jqxGrid('height', $(el).height());
    }
});

هذا الجزء من الكود يضمن أن الجدول داخل Panel Gridstack سيعيد ضبط أبعاده ليملأ المساحة المتاحة.

5. تصميم CSS لتحسين الواجهة

للحصول على تجربة مستخدم مريحة، يعتبر تصميم CSS جزءًا لا يتجزأ من التخطيط. يمكن استعمال الأكواد التالية لتحسين شكل واجهة Gridstack:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.grid-stack-item-content {
    background: #f4f4f4;
    border: 1px solid #ccc;
    overflow: hidden;
}
.jqx-grid {
    width: 100%;
    height: 100%;
}

هذا التنسيق يضمن عرض غير مزدحم، مما يحسن من تفاعل المستخدمين.

الخاتمة

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

يمكن اعتبار هذه الطريقة بمثابة دليل شامل لعناصر HTML وإعادة تحجيمها في لوحات Gridstack.js، مما سيؤدي بالتأكيد إلى تحسين تجارب المستخدم وتحقيق الاستجابات المطلوبة.