2026-05-17 17:03:21 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>DataTable Demo</title>
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
<style>
|
|
|
|
|
body,
|
|
|
|
|
html {
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.demo-container {
|
|
|
|
|
height: 100vh;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table-wrapper {
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
min-height: 0;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body class="bg-light">
|
2026-05-17 18:50:30 +08:00
|
|
|
<div id="debug-log" style="position:fixed; top:0; right:0; background:rgba(0,0,0,0.8); color:white; z-index:9999; font-family:monospace; padding:10px; max-height:200px; overflow:auto;"></div>
|
2026-05-17 17:03:21 +08:00
|
|
|
<div class="demo-container">
|
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
|
|
|
<h4 class="mb-0 text-primary fw-bold">DataTable Professional</h4>
|
|
|
|
|
<div class="text-muted small">Double-click to edit • Drag/Shift to select • Ctrl+C/V to Copy/Paste</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="table-wrapper">
|
|
|
|
|
<DataTable id="myTable"></DataTable>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="module">
|
|
|
|
|
import { RefreshState, NewState } from '@web/state'
|
|
|
|
|
import '@web/base'
|
|
|
|
|
import '../src/index.js'
|
|
|
|
|
|
2026-05-17 18:50:30 +08:00
|
|
|
const logEl = document.getElementById('debug-log');
|
|
|
|
|
const log = (msg) => {
|
|
|
|
|
console.log(msg);
|
|
|
|
|
logEl.innerText += msg + '\n';
|
|
|
|
|
};
|
2026-05-17 17:03:21 +08:00
|
|
|
|
2026-05-17 18:50:30 +08:00
|
|
|
log('Script starting after imports...');
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const table = document.getElementById('myTable')
|
2026-05-17 17:03:21 +08:00
|
|
|
|
2026-05-17 18:50:30 +08:00
|
|
|
const fields = [
|
|
|
|
|
{ id: 'id', name: 'ID', width: 60, type: 'text', pinned: 'left' },
|
|
|
|
|
{ id: 'name', name: 'User Name', width: 150, type: 'text', pinned: 'left' },
|
|
|
|
|
{ id: 'role', name: 'Role', width: 120, type: 'select', options: ['Admin', 'Editor', 'Viewer'] },
|
|
|
|
|
{ id: 'active', name: 'Active', width: 80, type: 'switch' },
|
|
|
|
|
{ id: 'bio', name: 'Bio', width: 250, type: 'textarea' },
|
|
|
|
|
{ id: 'gender', name: 'Gender', width: 120, type: 'radio', options: ['Male', 'Female', 'Other'] },
|
|
|
|
|
{ id: 'tags', name: 'Tags', width: 150, type: 'TagsInput' },
|
|
|
|
|
{ id: 'score', name: 'Score', width: 100, type: 'number' },
|
|
|
|
|
{ id: 'created', name: 'Created At', width: 150, type: 'date' },
|
|
|
|
|
{ id: 'actions', name: 'Actions', width: 100, type: 'text', pinned: 'right' }
|
|
|
|
|
]
|
2026-05-17 17:03:21 +08:00
|
|
|
|
2026-05-17 18:50:30 +08:00
|
|
|
const generateData = (count) => Array.from({ length: count }, (_, i) => ({
|
|
|
|
|
id: i + 1,
|
|
|
|
|
name: 'User ' + (i + 1),
|
|
|
|
|
role: ['Admin', 'Editor', 'Viewer'][i % 3],
|
|
|
|
|
active: i % 2 === 0,
|
|
|
|
|
bio: 'This is the bio for user ' + (i + 1) + '. It might be a long text that needs a textarea for editing.',
|
|
|
|
|
gender: ['Male', 'Female', 'Other'][i % 3],
|
|
|
|
|
tags: ['State.js', 'Vite', 'Playwright'].slice(0, (i % 3) + 1),
|
|
|
|
|
score: Math.floor(Math.random() * 100),
|
|
|
|
|
created: new Date().toISOString().split('T')[0],
|
|
|
|
|
actions: '...'
|
|
|
|
|
}))
|
2026-05-17 17:03:21 +08:00
|
|
|
|
2026-05-17 18:50:30 +08:00
|
|
|
const data = generateData(500)
|
2026-05-17 17:03:21 +08:00
|
|
|
|
2026-05-17 18:50:30 +08:00
|
|
|
// 数据初始化逻辑
|
2026-05-17 17:03:21 +08:00
|
|
|
setTimeout(() => {
|
2026-05-17 18:50:30 +08:00
|
|
|
try {
|
|
|
|
|
log('Triggering RefreshState before init...');
|
|
|
|
|
RefreshState(table);
|
|
|
|
|
|
|
|
|
|
log('Initializing table state...');
|
|
|
|
|
if (!table.state) table.state = NewState({});
|
|
|
|
|
|
|
|
|
|
Object.assign(table.state, {
|
|
|
|
|
fields: fields,
|
|
|
|
|
list: data
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
window.testStatus = 'passed'
|
|
|
|
|
log('DataTable initialized in test page: PASSED');
|
|
|
|
|
}, 500)
|
|
|
|
|
} catch (e) {
|
|
|
|
|
log('ERROR in state init: ' + e.message + '\n' + e.stack);
|
|
|
|
|
}
|
|
|
|
|
}, 200)
|
|
|
|
|
} catch (e) {
|
|
|
|
|
log('ERROR during startup: ' + e.message);
|
|
|
|
|
}
|
2026-05-17 17:03:21 +08:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
2026-05-17 18:50:30 +08:00
|
|
|
</html>
|
