web/dataTable
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

release: v1.0.1 with performance optimizations

Browse Source
This commit is contained in:
AI Engineer 2026-05-17 17:49:48 +08:00
parent 5759b2f061
commit 0bae1edceb
3 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
dist/datatable.js vendored
View File

@ -17,7 +17,7 @@ Component.register("DataTable", (container) => {
multiSelections: [], multiSelections: [],
isSelecting: false isSelecting: false
}); });
container.refresh = () => { const refresh = () => {
const scrollEl = container.querySelector(".dt-body"); const scrollEl = container.querySelector(".dt-body");
if (!scrollEl) return; if (!scrollEl) return;
const res = vs.calc(scrollEl, state.list); const res = vs.calc(scrollEl, state.list);
@ -28,17 +28,18 @@ Component.register("DataTable", (container) => {
renderedList: res.renderedList renderedList: res.renderedList
}); });
}; };
container.refresh = refresh;
state.__watch("list", (list) => { state.__watch("list", (list) => {
if (list && list.length > 0 && !list[0].__watch) { if (list && list.length > 0 && !list[0].__watch) {
state.list = list.map((item) => item.__watch ? item : NewState(item)); state.list = list.map((item) => NewState(item));
return; return;
} }
state._listStartIndex = 0; state._listStartIndex = 0;
const scrollEl = container.querySelector(".dt-body"); const scrollEl = container.querySelector(".dt-body");
state.renderedList = vs.reset(list, scrollEl || { clientHeight: 800 }) || []; state.renderedList = vs.reset(list, scrollEl || { clientHeight: 800 }) || [];
if (scrollEl) { if (scrollEl) {
vs.init(list, container.refresh); vs.init(list, refresh);
requestAnimationFrame(() => container.refresh()); requestAnimationFrame(() => refresh());
} }
}); });
container.onItemUpdate = (rIdx, node) => vs.update(rIdx + state._listStartIndex, node); container.onItemUpdate = (rIdx, node) => vs.update(rIdx + state._listStartIndex, node);
@ -241,4 +242,8 @@ Component.register("DataTable", (container) => {
</div> </div>
` `
)); ));
if (typeof document !== "undefined") RefreshState(document.documentElement); if (typeof document !== "undefined") {
const initDataTable = () => RefreshState(document.documentElement);
if (document.readyState !== "loading") initDataTable();
else document.addEventListener("DOMContentLoaded", initDataTable, true);
}

2
dist/datatable.min.js vendored
View File

File diff suppressed because one or more lines are too long

15
src/index.js
View File

@ -13,7 +13,7 @@ Component.register('DataTable', container => {
isSelecting: false isSelecting: false
}) })
container.refresh = () => { const refresh = () => {
const scrollEl = container.querySelector('.dt-body') const scrollEl = container.querySelector('.dt-body')
if (!scrollEl) return if (!scrollEl) return
const res = vs.calc(scrollEl, state.list) const res = vs.calc(scrollEl, state.list)
@ -22,18 +22,19 @@ Component.register('DataTable', container => {
_listStartIndex: res.listStartIndex, renderedList: res.renderedList _listStartIndex: res.listStartIndex, renderedList: res.renderedList
}) })
} }
container.refresh = refresh
state.__watch('list', list => { state.__watch('list', list => {
if (list && list.length > 0 && !list[0].__watch) { if (list && list.length > 0 && !list[0].__watch) {
state.list = list.map(item => item.__watch ? item : NewState(item)) state.list = list.map(item => NewState(item))
return return
} }
state._listStartIndex = 0 state._listStartIndex = 0
const scrollEl = container.querySelector('.dt-body') const scrollEl = container.querySelector('.dt-body')
state.renderedList = vs.reset(list, scrollEl || { clientHeight: 800 }) || [] state.renderedList = vs.reset(list, scrollEl || { clientHeight: 800 }) || []
if (scrollEl) { if (scrollEl) {
vs.init(list, container.refresh) vs.init(list, refresh)
requestAnimationFrame(() => container.refresh()) requestAnimationFrame(() => refresh())
} }
}) })
@ -232,4 +233,8 @@ Component.register('DataTable', container => {
</div> </div>
`)) `))
if (typeof document !== 'undefined') RefreshState(document.documentElement) if (typeof document !== 'undefined') {
const initDataTable = () => RefreshState(document.documentElement)
if (document.readyState !== 'loading') initDataTable()
else document.addEventListener('DOMContentLoaded', initDataTable, true)
}