mchus/turborfq
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: добавлено множественное выделение строк и исправлен размер шрифта при редактировании

Browse Source 
- Включено множественное выделение строк (selectableRows: true)
- Исправлен размер шрифта в ячейках при редактировании (добавлены CSS стили для tabulator-cell input)
- Улучшено визуальное отображение редактируемых ячеек
- Обновлена логика удаления для работы с множественным выбором
This commit is contained in:
Michael Chus
2026-01-21 03:54:03 +03:00
parent a5e046e194
commit d198ea8891
2 changed files with 97 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
public/index.html
View File

@@ -14,7 +14,7 @@
font-family: sans-serif;
display: flex;
height: 100vh;
overflow: hidden; /* ✅ Предотвращаем скролл body */
overflow: hidden;
}
#sidebar {
width: 250px;
@@ -22,25 +22,25 @@
padding: 8px;
box-sizing: border-box;
overflow-y: auto;
flex-shrink: 0; /* ✅ Sidebar не сжимается */
flex-shrink: 0;
}
#main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0; /* ✅ Позволяет flex-элементу сжиматься */
overflow: hidden; /* ✅ Контролируем overflow */
min-width: 0;
overflow: hidden;
}
#toolbar {
padding: 8px;
border-bottom: 1px solid #ccc;
flex-shrink: 0; /* ✅ Toolbar не сжимается */
flex-shrink: 0;
}
#table {
flex: 1;
position: relative;
overflow: auto; /* ✅ Скролл только внутри таблицы */
min-height: 0; /* ✅ Важно для flex-контейнера */
overflow: auto;
min-height: 0;
}
.schema { font-weight: bold; margin-top: 8px; cursor: pointer; }
.table { margin-left: 12px; cursor: pointer; }
@@ -48,7 +48,7 @@
padding: 8px;
border-bottom: 1px solid #ccc;
background: #f7f7f7;
flex-shrink: 0; /* ✅ Login panel не сжимается */
flex-shrink: 0;
}
#csvFileInput { display: none; }
@@ -64,31 +64,73 @@
}
.tabulator .tabulator-tableholder {
overflow-x: auto !important; /* ✅ Горизонтальный скролл при необходимости */
overflow-x: auto !important;
}
.fk-modal {
font-family: sans-serif;
/* ✅ ИСПРАВЛЕНИЕ: Размер шрифта при редактировании ячеек */
.tabulator-cell input,
.tabulator-cell select,
.tabulator-cell textarea {
font-size: 14px !important;
font-family: sans-serif !important;
padding: 4px !important;
border: 1px solid #4CAF50 !important;
box-sizing: border-box !important;
width: 100% !important;
min-height: 24px !important;
}
.tabulator-cell input:focus,
.tabulator-cell select:focus,
.tabulator-cell textarea:focus {
outline: none !important;
border-color: #45a049 !important;
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2) !important;
}
/* ✅ Стили для выделенных строк */
.tabulator-row.tabulator-selected {
background-color: #d4e9ff !important;
}
.tabulator-row.tabulator-selected:hover {
background-color: #c0dcf5 !important;
}
/* ✅ Стили для модальных окон FK */
.fk-modal {
font-family: sans-serif;
}
.fk-modal select,
.fk-modal input {
border: 1px solid #ccc;
border-radius: 4px;
border: 1px solid #ccc;
border-radius: 4px;
}
.fk-modal select:focus,
.fk-modal input:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}
.fk-modal button:hover {
opacity: 0.9;
opacity: 0.9;
}
/* ✅ Подсказка для множественного выбора */
#toolbar::after {
content: "💡 Используйте Ctrl+Click для выбора нескольких строк";
display: inline-block;
margin-left: 20px;
font-size: 12px;
color: #666;
font-style: italic;
}
</style>
</head>
<body>
<div id="sidebar">
@@ -102,14 +144,15 @@
<button id="loginBtn">Войти</button>
<span id="loginStatus"></span>
</div>
<div id="toolbar">
<button id="btnInsert">Вставить</button>
<button id="btnUpdate">Сохранить строку</button>
<button id="btnDelete">Удалить</button>
<button id="btnImportCSV">Импорт CSV</button>
<input type="file" id="csvFileInput" accept=".csv">
<button id="btnExportCSV">Экспорт CSV</button>
</div>
<div id="toolbar">
<button id="btnInsert">Вставить</button>
<button id="btnUpdate">Сохранить строку</button>
<button id="btnDelete">Удалить</button>
<button id="btnDeselectAll">Снять выделение</button> <!-- ✅ Новая кнопка -->
<button id="btnImportCSV">Импорт CSV</button>
<input type="file" id="csvFileInput" accept=".csv">
<button id="btnExportCSV">Экспорт CSV</button>
</div>
<div id="table"></div>
</div>