كيفية تخصيص القوائم وأشرطة الأدوات في GridJs

حول تخصيص القوائم وأزرار شريط الأدوات

نحن لا نوفر واجهات برمجة تطبيقات مفيدة مباشرة. ولكن يمكننا كتابة بعض وظائف جافا سكريبت استنادًا إلى بنية DOM لتحقيق ذلك.

تخصيص شريط القوائم

على سبيل المثال: للحفاظ على قائمة الملفات فقط، افترض أن معرف div لـ GridJs هو “gridjs-divid”

   //get menubar parent dom
   const menubar=document.querySelector("#gridjs-divid > div > div:nth-child(1) > div > div.x-spreadsheet-banner-info-s > div.x-spreadsheet-toolbar.x-spreadsheet-menubar");
   var childs = menubar.childNodes;


   for (var i = childs.length - 1; i >= 0; i--)
   {  
     // keep File menu  only
     if(childs[i].childNodes[0].childNodes[0].textContent!=="File")
       {
         menubar.removeChild(childs[i]);
       }
   }

بعد استدعاء هذه الدالة

تخصيص عناصر في شريط القوائم

على سبيل المثال: للحفاظ على عنصر قائمة “تحميل كملف XLSX” في قائمة الملف فقط، افترض أن معرف div لـ GridJs هو “gridjs-divid”

   //get menubar parent dom
   const menubar=document.querySelector("#gridjs-divid > div > div:nth-child(1) > div > div.x-spreadsheet-banner-info-s > div.x-spreadsheet-toolbar.x-spreadsheet-menubar");
   var childs = menubar.childNodes;

   // keep the first one ->File menu  only
   for (var i = childs.length - 1; i >= 0; i--)
   {  //find the File menu
     if(childs[i].childNodes[0].childNodes[0].textContent==="File")
       {
            var dropdownparent = childs[i].childNodes[0].childNodes[1];
            var menuitems = dropdownparent.childNodes;
            for (var ii = menuitems.length - 1; ii >=0; ii--)
            {   
	        //remove other menu item that is not "Download As XLSX"
                if (menuitems[ii].textContent !== 'Download As XLSX')
                {
                    dropdownparent.removeChild(menuitems[ii]);
                }
            }
       }
   }

بعد استدعاء هذه الدالة

تخصيص عناصر شريط الأدوات

على سبيل المثال: للحفاظ على زر التكبير فقط، افترض أن معرف div لـ GridJs هو “gridjs-divid”

   //get toolbar parent dom
   const toolbar=document.querySelector("#gridjs-divid > div > div.x-spreadsheet-toolbar > div.x-spreadsheet-toolbar-btns");
   var childs = toolbar.childNodes;


   for (var i = childs.length - 1; i >= 0; i--)
   {  
     // keep File menu  only
     if(childs[i].getAttribute("data-tooltip")!=="Zoom")
       {
         toolbar.removeChild(childs[i]);
       }
   }

بعد استدعاء هذه الدالة

تخصيص تأثير المرور على شريط الأدوات

افتح نافذة فحص المتصفح، اختر زر شريط الأدوات،

ثم يمكننا العثور على المفتاح المرتبط بـ CSS لهذا الزر وهو: تجميد

أضف قاعدة CSS التالية:

.x-spreadsheet-toolbar .x-spreadsheet-toolbar-btn:hover .x-spreadsheet-icon-img.freeze,
.x-spreadsheet-toolbar .x-spreadsheet-toolbar-btn.active .x-spreadsheet-icon-img.freeze {
  background: rgba(4, 71, 33, 0.08);
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

النتيجة ستكون:

تخصيص العناصر في شريط الأسفل

نظرة عامة

يحتوي شريط الأسفل على زرَّين تفاعليين:

1. ‌زر إضافة ورقة عمل‌ (add class) - ينشئ أوراق عمل جديدة
2. ‌زر اختيار ورقة العمل‌ (ellipsis class) - يدير اختيار ورقة العمل

الوصول إلى DOM

يمكنك الوصول إلى هذه العناصر باستخدام:

// Add Worksheet Button
const addButton = document.querySelector('.x-spreadsheet-icon-img.add');

// Select Worksheet Button
const selectButton = document.querySelector('.x-spreadsheet-icon-img.ellipsis');

أمثلة على التخصيص

1. إخفاء الأزرار لإزالة زر من DOM:

// Hide Add Worksheet Button
const addButton = document.querySelector('.x-spreadsheet-icon-img.add');
addButton.parentElement.removeChild(addButton);

// Hide Select Worksheet Button
const selectButton = document.querySelector('.x-spreadsheet-icon-img.ellipsis');
selectButton.parentElement.removeChild(selectButton);

2. تغيير الأيقونات يمكنك استبدال الأيقونات إما باستخدام ملفات SVG خارجية أو بيانات SVG مدمجة.

const addButton = document.querySelector('.x-spreadsheet-icon-img.add');
addButton.style.backgroundImage = "url('https://example.com/fish-icon.svg')";
// Adjust size and position
addButton.style.width = '18px';
addButton.style.height = '18px';
addButton.style.left = '0';
addButton.style.top = '0';

3. تغيير سلوك الزر يمكنك تعديل حدث النقر لتخصيص الوظيفة:

const addButton = document.querySelector('.x-spreadsheet-icon-img.add');
addButton.addEventListener('click', function() {
  // Custom action here
  console.log('Custom add worksheet action');
});