refactor: переход на чекбоксы для выбора строк и упрощение интерфейса

- Добавлены чекбоксы для множественного выбора строк
- Убрана кнопка "Сохранить строку" (сохранение по Enter)
- Изменена логика кнопки "Вставить": добавляет строку над выбранной или внизу
- Убрана подсказка про Ctrl+Click
- Упрощен код выбора строк (rowClick теперь не нужен)
- Очищено визуальное оформление
This commit is contained in:
2026-01-21 04:02:18 +03:00
parent d198ea8891
commit 2150792d20
2 changed files with 91 additions and 125 deletions

View File

@@ -52,7 +52,7 @@
}
#csvFileInput { display: none; }
/* Стили для Tabulator */
/* Стили для Tabulator */
.tabulator {
border: none;
background-color: white;
@@ -67,7 +67,7 @@
overflow-x: auto !important;
}
/* ✅ ИСПРАВЛЕНИЕ: Размер шрифта при редактировании ячеек */
/* Размер шрифта при редактировании ячеек */
.tabulator-cell input,
.tabulator-cell select,
.tabulator-cell textarea {
@@ -88,16 +88,16 @@
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2) !important;
}
/* Стили для выделенных строк */
/* Стили для выделенных строк */
.tabulator-row.tabulator-selected {
background-color: #d4e9ff !important;
background-color: #e3f2fd !important;
}
.tabulator-row.tabulator-selected:hover {
background-color: #c0dcf5 !important;
background-color: #bbdefb !important;
}
/* Стили для модальных окон FK */
/* Стили для модальных окон FK */
.fk-modal {
font-family: sans-serif;
}
@@ -118,19 +118,22 @@
.fk-modal button:hover {
opacity: 0.9;
}
/* ✅ Подсказка для множественного выбора */
#toolbar::after {
content: "💡 Используйте Ctrl+Click для выбора нескольких строк";
display: inline-block;
margin-left: 20px;
font-size: 12px;
color: #666;
font-style: italic;
/* Кнопки toolbar */
#toolbar button {
padding: 6px 12px;
margin-right: 4px;
cursor: pointer;
border: 1px solid #ccc;
background: #fff;
border-radius: 3px;
}
#toolbar button:hover {
background: #f0f0f0;
}
</style>
</head>
<body>
<div id="sidebar">
@@ -144,18 +147,16 @@
<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="btnDeselectAll">Снять выделение</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="btnDelete">🗑️ Удалить</button>
<button id="btnImportCSV">📥 Импорт CSV</button>
<input type="file" id="csvFileInput" accept=".csv">
<button id="btnExportCSV">📤 Экспорт CSV</button>
</div>
<div id="table"></div>
</div>
<script src="app.js"></script>
</body>
</html>
</html>