Michael Chus
bd96348850
- Удалена кнопка "Выделить страницу" (дублирует функционал чекбокса в заголовке) - Исправлен обработчик rowSelectionChanged - теперь корректно обрабатывает выделение через header checkbox - Изменен подход: при каждом изменении выделения обновляется вся коллекция selectedRowsData - Добавлена синхронизация выделенных строк между страницами - Исправлена ошибка "строки не выбраны" при удалении после выделения через header checkbox
195 lines
4.8 KiB
HTML
195 lines
4.8 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Turbo RFQ</title>
|
||
|
||
<!-- Tabulator CSS/JS (CDN) -->
|
||
<link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet">
|
||
<script src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"></script>
|
||
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
font-family: sans-serif;
|
||
display: flex;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
#sidebar {
|
||
width: 250px;
|
||
border-right: 1px solid #ccc;
|
||
padding: 8px;
|
||
box-sizing: border-box;
|
||
overflow-y: auto;
|
||
flex-shrink: 0;
|
||
}
|
||
#main {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
}
|
||
#toolbar {
|
||
padding: 8px;
|
||
border-bottom: 1px solid #ccc;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
flex-wrap: wrap;
|
||
}
|
||
#table {
|
||
flex: 1;
|
||
position: relative;
|
||
overflow: auto;
|
||
min-height: 0;
|
||
}
|
||
.schema { font-weight: bold; margin-top: 8px; cursor: pointer; }
|
||
.table { margin-left: 12px; cursor: pointer; }
|
||
#loginPanel {
|
||
padding: 8px;
|
||
border-bottom: 1px solid #ccc;
|
||
background: #f7f7f7;
|
||
flex-shrink: 0;
|
||
}
|
||
#csvFileInput { display: none; }
|
||
|
||
/* Стили для Tabulator */
|
||
.tabulator {
|
||
border: none;
|
||
background-color: white;
|
||
}
|
||
|
||
.tabulator .tabulator-header {
|
||
background-color: #f5f5f5;
|
||
border-bottom: 2px solid #ddd;
|
||
}
|
||
|
||
.tabulator .tabulator-tableholder {
|
||
overflow-x: auto !important;
|
||
}
|
||
|
||
/* Размер шрифта при редактировании ячеек */
|
||
.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: #e3f2fd !important;
|
||
}
|
||
|
||
.tabulator-row.tabulator-selected:hover {
|
||
background-color: #bbdefb !important;
|
||
}
|
||
|
||
/* Стили для модальных окон FK */
|
||
.fk-modal {
|
||
font-family: sans-serif;
|
||
}
|
||
|
||
.fk-modal select,
|
||
.fk-modal input {
|
||
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);
|
||
}
|
||
|
||
.fk-modal button:hover {
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* Кнопки toolbar */
|
||
#toolbar button {
|
||
padding: 6px 12px;
|
||
cursor: pointer;
|
||
border: 1px solid #ccc;
|
||
background: #fff;
|
||
border-radius: 3px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
#toolbar button:hover {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
#toolbar button:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* Счетчик выделенных */
|
||
#selectionCounter {
|
||
padding: 6px 12px;
|
||
background: #e3f2fd;
|
||
border-radius: 3px;
|
||
font-size: 13px;
|
||
color: #1976d2;
|
||
font-weight: bold;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.toolbar-divider {
|
||
width: 1px;
|
||
height: 24px;
|
||
background: #ccc;
|
||
margin: 0 4px;
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
<body>
|
||
<div id="sidebar">
|
||
<h3>Базы / таблицы</h3>
|
||
<div id="tree"></div>
|
||
</div>
|
||
<div id="main">
|
||
<div id="loginPanel">
|
||
<label>Login: <input id="loginUser" type="text"></label>
|
||
<label>Password: <input id="loginPass" type="password"></label>
|
||
<button id="loginBtn">Войти</button>
|
||
<span id="loginStatus"></span>
|
||
</div>
|
||
<div id="toolbar">
|
||
<button id="btnInsert">➕ Вставить</button>
|
||
<button id="btnDelete">🗑️ Удалить</button>
|
||
<div class="toolbar-divider"></div>
|
||
<button id="btnSelectAll">☑️ Выделить все</button>
|
||
<button id="btnDeselectAll">⬜ Снять выделение</button>
|
||
<div class="toolbar-divider"></div>
|
||
<button id="btnImportCSV">📥 Импорт CSV</button>
|
||
<input type="file" id="csvFileInput" accept=".csv">
|
||
<button id="btnExportCSV">📤 Экспорт CSV</button>
|
||
<span id="selectionCounter" style="display: none;">Выбрано: 0</span>
|
||
</div>
|
||
<div id="table"></div>
|
||
</div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|