87 lines
3.3 KiB
HTML
87 lines
3.3 KiB
HTML
<!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>
|
|
<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">
|
|
<!-- 0. Bootstrap -->
|
|
<script src="lib/bootstrap.js"></script>
|
|
<div class="demo-container">
|
|
<div class="table-wrapper">
|
|
<DataTable id="myTable" editable></DataTable>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 1. 基础状态机 -->
|
|
<script src="lib/state.js"></script>
|
|
<!-- 2. 业务组件库 -->
|
|
<script src="lib/base.js"></script>
|
|
<!-- 3. DataTable -->
|
|
<script src="lib/datatable.js"></script>
|
|
|
|
<script>
|
|
const { NewState, DataTable } = globalThis;
|
|
|
|
// Externally register TagsInput
|
|
DataTable.registerFieldType({
|
|
value: 'TagsInput', label: '{#Tags#}', typeForDB: 'v4096',
|
|
schema: [{ name: 'placeholder', label: 'Placeholder', type: 'text', if: 'this.data.user_type=="TagsInput"' }],
|
|
formatter: (val) => Array.isArray(val) ? val.join(' | ') : val
|
|
});
|
|
|
|
const table = document.getElementById('myTable')
|
|
|
|
const fields = [
|
|
{ id: 'id', name: 'ID', type: 'string', settings: { width: 60, formType: 'text', pinned: 'left' } },
|
|
{ id: 'name', name: 'User Name', type: 'string', settings: { width: 150, formType: 'text', pinned: 'left' } },
|
|
{ id: 'role', name: 'Role', type: 'string', settings: { width: 120, formType: 'select', options: [{label:'Administrator', value:'Admin'}, {label:'Content Editor', value:'Editor'}, {label:'Viewer', value:'Viewer'}] } },
|
|
{ id: 'active', name: 'Active', type: 'boolean', settings: { width: 80, formType: 'switch', labelOn: 'YES', labelOff: 'NO' } },
|
|
{ id: 'bio', name: 'Bio', type: 'string', settings: { width: 250, formType: 'textarea' } },
|
|
{ id: 'gender', name: 'Gender', type: 'string', settings: { width: 120, formType: 'radio', options: ['Male', 'Female', 'Other'] } },
|
|
{ id: 'tags', name: 'Tags', type: 'object', settings: { width: 150, formType: 'TagsInput' } },
|
|
{ id: 'score', name: 'Score', type: 'number', settings: { width: 100, formType: 'number', prefix: '$', decimals: 2, thousandSep: true } },
|
|
{ id: 'created', name: 'Created At', type: 'date', settings: { width: 150, formType: 'date' } },
|
|
{ id: 'actions', name: 'Actions', type: 'string', settings: { width: 100, formType: 'text', pinned: 'right' }, formatter: () => '🔧 Edit' }
|
|
]
|
|
|
|
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: 'Bio ' + (i + 1),
|
|
gender: ['Male', 'Female', 'Other'][i % 3],
|
|
tags: ['State.js', 'Vite'].slice(0, (i % 2) + 1),
|
|
score: 8000.5,
|
|
created: '2026-05-17',
|
|
actions: '...'
|
|
}))
|
|
|
|
const data = generateData(1000)
|
|
|
|
const init = () => {
|
|
if (table.state) {
|
|
table.state.fields = fields;
|
|
table.state.list = data;
|
|
window.testStatus = 'passed';
|
|
} else {
|
|
setTimeout(init, 50);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
init();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|