как настраивать меню и панель инструментов в GridJs

о настройке меню и кнопок на панели инструментов

Мы не предоставляем полезных API напрямую. Однако мы можем написать некоторые js-функции на основе структуры DOM для достижения этой цели.

Настройка менюбар

например: чтобы оставить только меню Файл, предполагая, что id 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” в меню “Файл”, предполагая, что id 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]);
                }
            }
       }
   }

После вызова этой функции

Настройка элементов панели инструментов

например: оставить только кнопку зума, предполагая, что id 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-ключ для этой кнопки:freeze

добавьте следующее правило 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 класс) - Создает новые листы
2. ‌Выбрать лист‌ (ellipsis класс) - Управление выбором листа

Доступ к 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');
});