1021 lines
35 KiB
JavaScript
1021 lines
35 KiB
JavaScript
import { isMobile, global, nullOrEmpty, throttle, truncate, isPositive } from "../utility";
|
|
import { r } from "../utility/lgres";
|
|
import { createIcon } from "../ui/icon";
|
|
import { createCheckbox } from "../ui/checkbox";
|
|
|
|
const ColumnChangedType = {
|
|
Reorder: 'reorder',
|
|
Resize: 'resize',
|
|
Sort: 'sort'
|
|
};
|
|
const RefreshInterval = isMobile() ? 32 : 0;
|
|
const MaxColumnBit = 10;
|
|
const MaxColumnMask = 0x3ff;
|
|
const RedumCount = 4;
|
|
const MiniDragOffset = 4;
|
|
const MiniColumnWidth = 50;
|
|
|
|
class GridColumn {
|
|
static create() { return document.createElement('span') }
|
|
|
|
static setValue(element, val) { element.innerText = val }
|
|
|
|
static getValue(element) { return element.innerText }
|
|
|
|
static setStyle(element, style) {
|
|
for (let css of Object.entries(style)) {
|
|
element.style.setProperty(css[0], css[1]);
|
|
}
|
|
}
|
|
}
|
|
|
|
class GridInputColumn extends GridColumn {
|
|
static createEdit(trigger) {
|
|
const input = document.createElement('input');
|
|
input.setAttribute('type', 'text');
|
|
if (typeof trigger === 'function') {
|
|
input.addEventListener('change', trigger);
|
|
}
|
|
return input;
|
|
}
|
|
|
|
static setValue(element, val) {
|
|
if (element.tagName !== 'INPUT') {
|
|
super.setValue(element, val);
|
|
} else {
|
|
element.value = val;
|
|
}
|
|
}
|
|
|
|
static getValue(e) { return e.target.value }
|
|
|
|
static setEnabled(element, enabled) { element.disabled = enabled === false }
|
|
}
|
|
|
|
class GridDropdownColumn extends GridColumn {
|
|
}
|
|
|
|
class GridCheckboxColumn extends GridColumn {
|
|
static createEdit(trigger) {
|
|
const check = createCheckbox({
|
|
onchange: typeof trigger === 'function' ? trigger : null
|
|
});
|
|
return check;
|
|
}
|
|
|
|
static setValue(element, val) { element.querySelector('input').checked = val }
|
|
|
|
static getValue(e) { return e.target.checked }
|
|
|
|
static setEnabled(element, enabled) { element.querySelector('input').disabled = enabled === false }
|
|
}
|
|
|
|
const ColumnTypes = {
|
|
0: GridColumn,
|
|
1: GridInputColumn,
|
|
2: GridDropdownColumn,
|
|
3: GridCheckboxColumn
|
|
};
|
|
|
|
class Grid {
|
|
#source;
|
|
#currentSource;
|
|
#parent;
|
|
#el;
|
|
#refs;
|
|
#rendering;
|
|
#selectedColumnIndex = -1;
|
|
#selectedIndexes;
|
|
#startIndex = 0;
|
|
#needResize;
|
|
#containerHeight;
|
|
#bodyClientWidth;
|
|
#rowCount = -1;
|
|
#overflows;
|
|
#scrollTop;
|
|
#scrollLeft;
|
|
#colTypes = {};
|
|
#colAttrs = {};
|
|
|
|
columns = [];
|
|
langs = {
|
|
all: r('allItem', '( All )'),
|
|
ok: r('ok', 'OK'),
|
|
reset: r('reset', 'Reset')
|
|
};
|
|
virtualCount = 100;
|
|
rowHeight = 39;
|
|
filterRowHeight = 30;
|
|
height;
|
|
readonly;
|
|
multiSelect = false;
|
|
fullrowClick = true;
|
|
allowHtml = false;
|
|
holderDisabled = false;
|
|
window = global;
|
|
sortIndex = -1;
|
|
sortDirection = 1;
|
|
|
|
willSelect;
|
|
selectedRowChanged;
|
|
cellDblClicked;
|
|
cellClicked;
|
|
rowDblClicked;
|
|
columnChanged;
|
|
|
|
static ColumnTypes = {
|
|
Common: 0,
|
|
Input: 1,
|
|
Dropdown: 2,
|
|
Checkbox: 3,
|
|
isCheckbox(type) { return type === 3 }
|
|
};
|
|
|
|
constructor(container) {
|
|
this.#parent = container;
|
|
}
|
|
|
|
get source() { return this.#source?.map(s => s.values) }
|
|
set source(list) {
|
|
if (this.#el == null) {
|
|
throw new Error('grid has not been initialized.')
|
|
}
|
|
if (!Array.isArray(list)) {
|
|
throw new Error('source is not an Array.')
|
|
}
|
|
list = list.map(i => { return { values: i } });
|
|
this.#source = list;
|
|
// TODO: filter to currentSource;
|
|
this.#currentSource = list;
|
|
this.#overflows = {};
|
|
this.#selectedColumnIndex = -1;
|
|
this.#selectedIndexes = [];
|
|
this.#startIndex = 0;
|
|
this.#scrollTop = 0;
|
|
this.#scrollLeft = 0;
|
|
this.#rowCount = -1;
|
|
|
|
if (this.sortIndex >= 0) {
|
|
this.sortColumn(true);
|
|
} else {
|
|
this.resize();
|
|
}
|
|
}
|
|
|
|
get virtual() { return this.#currentSource?.length > this.virtualCount }
|
|
|
|
get sortKey() {
|
|
if (this.columns == null) {
|
|
return null;
|
|
}
|
|
return this.columns[this.sortIndex]?.key;
|
|
}
|
|
|
|
get selectedIndexes() { return this.#selectedIndexes }
|
|
set selectedIndexes(indexes) {
|
|
const startIndex = this.#startIndex;
|
|
this.#selectedIndexes.splice(0, this.#selectedIndexes.length, ...indexes);
|
|
if (this.readonly !== true) {
|
|
this.refresh();
|
|
} else {
|
|
[...this.#refs.bodyContent.children].forEach((row, i) => {
|
|
if (indexes.indexOf(startIndex + i) >= 0) {
|
|
row.classList.add('selected');
|
|
} else if (row.classList.contains('selected')) {
|
|
row.classList.remove('selected');
|
|
}
|
|
});
|
|
}
|
|
if (typeof this.selectedRowChanged === 'function') {
|
|
this.selectedRowChanged();
|
|
}
|
|
}
|
|
|
|
get selectedIndex() { return (this.#selectedIndexes && this.#selectedIndexes[0]) ?? -1 }
|
|
|
|
get loading() { return this.#refs.loading?.style.visibility === 'visible' }
|
|
set loading(flag) {
|
|
if (this.#refs.loading == null) {
|
|
return;
|
|
}
|
|
if (flag === false) {
|
|
this.#refs.loading.style.visibility = 'hidden';
|
|
this.#refs.loading.style.opacity = 0;
|
|
} else {
|
|
this.#refs.loading.style.visibility = 'visible';
|
|
this.#refs.loading.style.opacity = 1;
|
|
}
|
|
}
|
|
|
|
get scrollTop() { return this.#refs.body?.scrollTop; }
|
|
set scrollTop(top) {
|
|
if (this.#refs.body == null) {
|
|
return;
|
|
}
|
|
this.#refs.body.scrollTop = top;
|
|
this.reload();
|
|
}
|
|
|
|
init(container = this.#parent) {
|
|
this.#el = null;
|
|
this.#refs = {};
|
|
this.#rendering = true;
|
|
if (!(container instanceof HTMLElement)) {
|
|
throw new Error('no specified parent.');
|
|
}
|
|
this.#parent = container;
|
|
const grid = document.createElement('div');
|
|
grid.className = 'grid';
|
|
grid.setAttribute('tabindex', 0);
|
|
grid.addEventListener('keydown', e => {
|
|
let index = this.selectedIndex;
|
|
let flag = false;
|
|
if (e.key === 'ArrowUp') {
|
|
// up
|
|
if (index > 0) {
|
|
flag = true;
|
|
index -= 1;
|
|
}
|
|
} else if (e.key === 'ArrowDown') {
|
|
// down
|
|
const count = this.#currentSource?.length ?? 0;
|
|
if (index < count - 1) {
|
|
flag = true;
|
|
index += 1;
|
|
}
|
|
}
|
|
if (flag) {
|
|
this.#selectedIndexes = [index];
|
|
this.scrollToIndex(index);
|
|
this.refresh();
|
|
if (typeof this.selectedRowChanged === 'function') {
|
|
this.selectedRowChanged(index);
|
|
}
|
|
e.stopPropagation();
|
|
}
|
|
});
|
|
container.replaceChildren(grid);
|
|
const sizer = document.createElement('span');
|
|
sizer.className = 'grid-sizer';
|
|
grid.appendChild(sizer);
|
|
this.#refs.sizer = sizer;
|
|
|
|
// header & body
|
|
const header = this.#createHeader();
|
|
grid.appendChild(header);
|
|
const body = this.#createBody();
|
|
grid.appendChild(body);
|
|
|
|
// loading
|
|
const loading = document.createElement('div');
|
|
loading.className = 'grid-loading';
|
|
const loadingHolder = document.createElement('div');
|
|
loadingHolder.appendChild(createIcon('fa-regular', 'spinner-third'));
|
|
loading.appendChild(loadingHolder);
|
|
this.#refs.loading = loading;
|
|
grid.appendChild(loading);
|
|
this.#el = grid;
|
|
|
|
this.#rendering = false;
|
|
if (this.sortIndex >= 0) {
|
|
this.sortColumn();
|
|
}
|
|
}
|
|
|
|
scrollToIndex(index) {
|
|
const top = this.#scrollToTop(index * this.rowHeight, true);
|
|
this.#refs.body.scrollTop = top;
|
|
}
|
|
|
|
resize(force) {
|
|
if (this.#rendering || this.#el == null) {
|
|
return;
|
|
}
|
|
const body = this.#refs.body;
|
|
// let height = this.#refs.header.offsetHeight + 2;
|
|
// let top = body.offsetTop;
|
|
// if (top !== height) {
|
|
// body.style.top = `${height}px`;
|
|
// top = height;
|
|
// }
|
|
const top = this.#refs.header.offsetHeight;
|
|
|
|
let height = this.height;
|
|
if (isNaN(height) || height <= 0) {
|
|
height = this.#el.offsetHeight - top;
|
|
}
|
|
const count = truncate((height - 1) / this.rowHeight) * (RedumCount * 2) + 1;
|
|
if (force || count !== this.#rowCount) {
|
|
this.#rowCount = count;
|
|
this.reload();
|
|
}
|
|
this.#bodyClientWidth = body.clientWidth;
|
|
}
|
|
|
|
reload() {
|
|
this.#containerHeight = this.#currentSource.length * this.rowHeight;
|
|
this.#refs.body.scrollTop = 0;
|
|
this.#refs.body.scrollLeft = 0;
|
|
this.#refs.bodyContent.style.top = '0px';
|
|
this.#refs.bodyContainer.style.height = `${this.#containerHeight}px`;
|
|
this.#adjustRows(this.#refs.bodyContent);
|
|
this.refresh();
|
|
}
|
|
|
|
refresh() {
|
|
if (this.#refs.bodyContent == null) {
|
|
throw new Error('body has not been created.');
|
|
}
|
|
const rows = this.#refs.bodyContent.children;
|
|
const widths = {};
|
|
this.#fillRows(rows, this.columns, widths);
|
|
if (this.#needResize && widths.flag) {
|
|
this.#needResize = false;
|
|
this.columns.forEach((col, i) => {
|
|
if (!col.autoResize) {
|
|
return;
|
|
}
|
|
let width = widths[i];
|
|
if (width < col.width) {
|
|
width = col.width;
|
|
}
|
|
if (width > 0) {
|
|
this.#changeColumnWidth(i, width);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
resetChange() {
|
|
if (this.#currentSource == null) {
|
|
return;
|
|
}
|
|
for (let row of this.#currentSource) {
|
|
delete row.__changed;
|
|
}
|
|
}
|
|
|
|
sortColumn(reload) {
|
|
const index = this.sortIndex;
|
|
const col = this.columns[index];
|
|
if (col == null) {
|
|
return;
|
|
}
|
|
const direction = this.sortDirection;
|
|
[...this.#refs.header.children].forEach((th, i) => {
|
|
const arrow = th.children[1]; // th.querySelector('layer.arrow');
|
|
if (arrow == null) {
|
|
return;
|
|
}
|
|
if (i === index) {
|
|
arrow.className = `arrow ${(direction !== 1 ? 'desc' : 'asc')}`;
|
|
} else if (arrow.className !== 'arrow') {
|
|
arrow.className = 'arrow';
|
|
}
|
|
});
|
|
let comparer;
|
|
if (typeof col.sortFilter !== 'function') {
|
|
const direction = this.sortDirection;
|
|
if (isNaN(direction)) {
|
|
direction = 1;
|
|
}
|
|
comparer = (a, b) => {
|
|
const ta = a.values[col.key];
|
|
const tb = b.values[col.key];
|
|
if ((ta == null || tb == null) && typeof col.filter === 'function') {
|
|
a = col.filter(a.values);
|
|
b = col.filter(b.values);
|
|
} else {
|
|
a = ta;
|
|
b = tb;
|
|
}
|
|
if (a?.value != null) {
|
|
a = a.value;
|
|
}
|
|
if (b?.value != null) {
|
|
b = b.value;
|
|
}
|
|
if (a == null && typeof b === 'number') {
|
|
a = 0;
|
|
} else if (typeof a === 'number' && b == null) {
|
|
b = 0;
|
|
} else if (a != null && b == null) {
|
|
return direction;
|
|
} else if (typeof a === 'string' && typeof b === 'string') {
|
|
a = a.toLowerCase();
|
|
b = b.toLowerCase();
|
|
}
|
|
return a === b ? 0 : (a > b ? 1 : -1) * direction;
|
|
};
|
|
} else {
|
|
comparer = (a, b) => col.sortFilter(a, b) * direction;
|
|
}
|
|
this.#source.sort(comparer);
|
|
// TODO: filter to currentSource;
|
|
this.#currentSource = this.#source;
|
|
if (reload) {
|
|
this.reload();
|
|
} else {
|
|
this.refresh();
|
|
}
|
|
}
|
|
|
|
#createHeader() {
|
|
const thead = document.createElement('table');
|
|
thead.className = 'grid-header';
|
|
const header = document.createElement('tr');
|
|
thead.appendChild(header);
|
|
const sizer = this.#refs.sizer;
|
|
for (let col of this.columns) {
|
|
if (col.visible === false) {
|
|
const hidden = document.createElement('th');
|
|
hidden.style.display = 'none';
|
|
if (col.sortable === true) {
|
|
hidden.dataset.key = col.key;
|
|
hidden.addEventListener('mouseup', e => this.#onHeaderClicked(col, e, true));
|
|
}
|
|
header.appendChild(hidden);
|
|
continue;
|
|
}
|
|
// style
|
|
const isCheckbox = Grid.ColumnTypes.isCheckbox(col.type);
|
|
if (col.width > 0 || col.shrink) {
|
|
col.autoResize = false;
|
|
} else {
|
|
col.autoResize = true;
|
|
this.#needResize = true;
|
|
sizer.innerText = col.caption;
|
|
let width = sizer.offsetWidth + 22;
|
|
if (col.allcheck && isCheckbox) {
|
|
width += 32;
|
|
}
|
|
if (width < MiniColumnWidth) {
|
|
width = MiniColumnWidth;
|
|
}
|
|
col.width = width;
|
|
}
|
|
col.align ??= isCheckbox ? 'center' : 'left';
|
|
if (col.sortable !== false) {
|
|
col.sortable = true;
|
|
}
|
|
if (col.shrink) {
|
|
col.style = { 'text-align': col.align };
|
|
} else {
|
|
const w = `${col.width}px`;
|
|
col.style = {
|
|
'width': w,
|
|
'max-width': w,
|
|
'min-width': w,
|
|
'text-align': col.align
|
|
};
|
|
}
|
|
// element
|
|
const th = document.createElement('th');
|
|
th.dataset.key = col.key;
|
|
for (let css of Object.entries(col.style)) {
|
|
th.style.setProperty(css[0], css[1]);
|
|
}
|
|
th.style.cursor = col.sortable ? 'pointer' : 'auto';
|
|
th.addEventListener('mouseup', e => this.#onHeaderClicked(col, e));
|
|
th.addEventListener('mousedown', e => this.#onDragStart(col, e));
|
|
const wrapper = document.createElement('div');
|
|
th.appendChild(wrapper);
|
|
if (col.enabled !== false && col.allcheck && isCheckbox) {
|
|
const check = createCheckbox({
|
|
onchange: e => this.#onColumnAllChecked(col, e.target.checked)
|
|
});
|
|
wrapper.appendChild(check);
|
|
}
|
|
const caption = document.createElement('span');
|
|
if (col.textStyle != null) {
|
|
for (let css of Object.entries(col.textStyle)) {
|
|
caption.style.setProperty(css[0], css[1]);
|
|
}
|
|
}
|
|
caption.innerText = col.caption;
|
|
wrapper.appendChild(caption);
|
|
// order arrow
|
|
if (col.sortable) {
|
|
const arrow = document.createElement('layer');
|
|
arrow.className = 'arrow';
|
|
th.appendChild(arrow);
|
|
}
|
|
// filter
|
|
if (col.allowFilter) {
|
|
// TODO: filter
|
|
}
|
|
// resize spliter
|
|
if (col.resizable !== false) {
|
|
const spliter = document.createElement('layer');
|
|
spliter.className = 'spliter';
|
|
spliter.addEventListener('mousedown', e => this.#onResizeStart(col, e));
|
|
th.appendChild(spliter);
|
|
}
|
|
// tooltip
|
|
!nullOrEmpty(col.tooltip) && th.setAttribute('title', col.tooltip);
|
|
header.appendChild(th);
|
|
}
|
|
const placeholder = document.createElement('th');
|
|
const dragger = document.createElement('div');
|
|
dragger.className = 'dragger';
|
|
const draggerCursor = document.createElement('layer');
|
|
draggerCursor.className = 'dragger-cursor';
|
|
placeholder.append(dragger, draggerCursor);
|
|
header.appendChild(placeholder);
|
|
|
|
sizer.replaceChildren();
|
|
this.#refs.header = header;
|
|
this.#refs.dragger = dragger;
|
|
this.#refs.draggerCursor = draggerCursor;
|
|
return thead;
|
|
}
|
|
|
|
#createBody() {
|
|
const body = document.createElement('div');
|
|
body.className = 'grid-body';
|
|
body.addEventListener('scroll', e => throttle(this.#onScroll, RefreshInterval, this, e), { passive: true });
|
|
const cols = this.columns;
|
|
let width = 1;
|
|
for (let col of cols) {
|
|
if (col.visible !== false && !isNaN(col.width)) {
|
|
width += col.width + 1;
|
|
}
|
|
}
|
|
// body container
|
|
const bodyContainer = document.createElement('div');
|
|
bodyContainer.style.position = 'relative';
|
|
bodyContainer.style.minWidth = '100%';
|
|
bodyContainer.style.minHeight = '1px';
|
|
if (width > 0) {
|
|
bodyContainer.style.width = `${width}px`;
|
|
}
|
|
body.appendChild(bodyContainer);
|
|
// body content
|
|
const bodyContent = document.createElement('table');
|
|
bodyContent.className = 'grid-body-content';
|
|
bodyContainer.appendChild(bodyContent);
|
|
// this.#adjustRows();
|
|
// events
|
|
if (!this.holderDisabled) {
|
|
const holder = document.createElement('div');
|
|
holder.className = 'grid-hover-holder';
|
|
holder.style.display = 'none';
|
|
bodyContainer.appendChild(holder);
|
|
body.addEventListener('mousemove', e => throttle(this.#onBodyMouseMove, RefreshInterval, this, e, holder));
|
|
}
|
|
this.#refs.body = body;
|
|
this.#refs.bodyContainer = bodyContainer;
|
|
this.#refs.bodyContent = bodyContent;
|
|
|
|
// this.refresh();
|
|
return body;
|
|
}
|
|
|
|
#adjustRows() {
|
|
let count = this.#rowCount;
|
|
if (isNaN(count) || count < 0 || !this.virtual) {
|
|
count = this.#currentSource.length;
|
|
}
|
|
const cols = this.columns;
|
|
const content = this.#refs.bodyContent;
|
|
const exists = content.children.length;
|
|
count -= exists;
|
|
if (count > 0) {
|
|
for (let i = 0; i < count; i += 1) {
|
|
const row = document.createElement('tr');
|
|
row.className = 'grid-row';
|
|
row.addEventListener('mousedown', e => this.#onRowClicked(e, exists + i));
|
|
row.addEventListener('dblclick', e => this.#onRowDblClicked(e));
|
|
cols.forEach((col, j) => {
|
|
const cell = document.createElement('td');
|
|
if (col.visible !== false) {
|
|
cell.keyid = ((exists + i) << MaxColumnBit) | j;
|
|
if (col.style != null) {
|
|
for (let css of Object.entries(col.style)) {
|
|
cell.style.setProperty(css[0], css[1]);
|
|
}
|
|
}
|
|
if (col.css != null) {
|
|
for (let css of Object.entries(col.css)) {
|
|
cell.style.setProperty(css[0], css[1]);
|
|
}
|
|
}
|
|
if (Grid.ColumnTypes.isCheckbox(col.type)) {
|
|
cell.appendChild(GridCheckboxColumn.createEdit(e => this.#onRowChanged(e, exists + i, col, e.target.checked)));
|
|
// this.#colTypes[col.key] = GridCheckboxColumn;
|
|
} else {
|
|
let type = this.#colTypes[col.key];
|
|
if (type == null) {
|
|
if (isNaN(col.type)) {
|
|
if (this.allowHtml && col.type != null) {
|
|
type = col.type;
|
|
}
|
|
} else {
|
|
type = ColumnTypes[col.type];
|
|
}
|
|
type ??= GridColumn;
|
|
this.#colTypes[col.key] = type;
|
|
}
|
|
cell.appendChild(type.create());
|
|
}
|
|
|
|
}
|
|
row.appendChild(cell);
|
|
});
|
|
row.appendChild(document.createElement('td'));
|
|
content.appendChild(row);
|
|
}
|
|
} else if (count < 0) {
|
|
for (let i = -1; i >= count; i -= 1) {
|
|
// content.removeChild(content.children[exists + i]);
|
|
content.children[exists + i].remove();
|
|
}
|
|
}
|
|
}
|
|
|
|
#fillRows(rows, cols, widths) {
|
|
const startIndex = this.#startIndex;
|
|
const selectedIndexes = this.#selectedIndexes;
|
|
[...rows].forEach((row, i) => {
|
|
const vals = this.#currentSource[startIndex + i];
|
|
if (vals == null) {
|
|
return;
|
|
}
|
|
if (!isPositive(row.children.length)) {
|
|
return;
|
|
}
|
|
const item = vals.values;
|
|
const selected = selectedIndexes.indexOf(startIndex + i) >= 0;
|
|
if (selected) {
|
|
row.classList.add('selected');
|
|
} else if (row.classList.contains('selected')) {
|
|
row.classList.remove('selected');
|
|
}
|
|
// data
|
|
const selectChanged = vals.__selected ^ selected;
|
|
if (selected) {
|
|
vals.__selected = true;
|
|
} else {
|
|
delete vals.__selected;
|
|
}
|
|
cols.forEach((col, j) => {
|
|
if (col.visible === false) {
|
|
return;
|
|
}
|
|
let val;
|
|
if (col.text != null) {
|
|
val = col.text;
|
|
} else if (typeof col.filter === 'function') {
|
|
val = col.filter(item);
|
|
} else {
|
|
val = item[col.key];
|
|
if (val?.displayValue != null) {
|
|
val = val.displayValue;
|
|
}
|
|
}
|
|
val ??= '';
|
|
// fill
|
|
const cell = row.children[j];
|
|
if (typeof col.bgFilter === 'function') {
|
|
const bgColor = col.bgFilter(item);
|
|
cell.style.backgroundColor = bgColor ?? '';
|
|
}
|
|
const isCheckbox = Grid.ColumnTypes.isCheckbox(col.type);
|
|
const type = isCheckbox ? GridCheckboxColumn : this.#colTypes[col.key] ?? GridColumn;
|
|
let element;
|
|
if (!isCheckbox && selectChanged) {
|
|
element = selected && typeof type.createEdit === 'function' ?
|
|
type.createEdit(e => this.#onRowChanged(e, startIndex + i, col, type.getValue(e))) :
|
|
type.create();
|
|
cell.replaceChildren(element);
|
|
} else {
|
|
element = cell.children[0];
|
|
}
|
|
let enabled = col.enabled;
|
|
if (typeof enabled === 'string') {
|
|
enabled = item[enabled];
|
|
}
|
|
type.setValue(element, val, item);
|
|
if (typeof type.setEnabled === 'function') {
|
|
type.setEnabled(element, enabled);
|
|
}
|
|
// auto resize
|
|
if (this.#needResize && col.autoResize) {
|
|
const width = cell.scrollWidth + 12;
|
|
if (width > 0 && widths != null && (isNaN(widths[j]) || widths[j] < width)) {
|
|
widths[j] = width;
|
|
widths.flag = true;
|
|
}
|
|
}
|
|
if (typeof col.styleFilter === 'function') {
|
|
const style = col.styleFilter(item);
|
|
if (style != null) {
|
|
type.setStyle(element, style);
|
|
}
|
|
}
|
|
if (col.events != null) {
|
|
for (let ev of Object.entries(col.events)) {
|
|
element[ev[0]] = ev[1].bind(item);
|
|
}
|
|
}
|
|
if (col.attrs != null) {
|
|
let attrs = col.attrs;
|
|
if (typeof attrs === 'function') {
|
|
attrs = attrs(item);
|
|
}
|
|
for (let attr of Object.entries(attrs)) {
|
|
element.setAttribute(attr[0], attr[1]);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
#changeColumnWidth(index, width) {
|
|
const col = this.columns[index];
|
|
// const oldwidth = col.width;
|
|
const w = `${width}px`;
|
|
col.width = width;
|
|
col.style.width = w;
|
|
col.style['max-width'] = w;
|
|
col.style['min-width'] = w;
|
|
let element = this.#refs.header.children[index];
|
|
element.style.width = w;
|
|
element.style.maxWidth = w;
|
|
element.style.minWidth = w;
|
|
const body = this.#refs.bodyContent;
|
|
for (let row of body.children) {
|
|
element = row.children[index];
|
|
if (element != null) {
|
|
element.style.width = w;
|
|
element.style.maxWidth = w;
|
|
element.style.minWidth = w;
|
|
}
|
|
}
|
|
// } else {
|
|
// width = this.#refs.bodyContainer.offsetWidth - oldwidth + width;
|
|
// this.#refs.bodyContainer.style.width = `${width}px`;
|
|
// }
|
|
}
|
|
|
|
#scrollToTop(top, reload) {
|
|
const rowHeight = this.rowHeight;
|
|
top -= (top % (rowHeight * 2)) + (RedumCount * rowHeight);
|
|
if (top < 0) {
|
|
top = 0;
|
|
} else {
|
|
let bottomTop = this.#containerHeight - (reload ? 0 : this.#rowCount * rowHeight);
|
|
if (bottomTop < 0) {
|
|
bottomTop = 0;
|
|
}
|
|
if (top > bottomTop) {
|
|
top = bottomTop;
|
|
}
|
|
}
|
|
if (this.#scrollTop !== top) {
|
|
this.#scrollTop = top;
|
|
if (this.virtual) {
|
|
this.#startIndex = top / rowHeight;
|
|
}
|
|
this.refresh();
|
|
if (this.virtual) {
|
|
this.#refs.bodyContent.style.top = `${top}px`;
|
|
}
|
|
} else if (reload) {
|
|
this.refresh();
|
|
}
|
|
|
|
return top;
|
|
}
|
|
|
|
#getColumnIndex(target) {
|
|
if (target == null) {
|
|
return -1;
|
|
}
|
|
let parent;
|
|
while ((parent = target.parentElement) != null && !parent.classList.contains('grid-row')) {
|
|
target = parent;
|
|
}
|
|
if (parent == null) {
|
|
return -1;
|
|
}
|
|
const index = [...parent.children].indexOf(target);
|
|
return index >= this.columns.length ? -1 : index;
|
|
}
|
|
|
|
#onHeaderClicked(col, e, force) {
|
|
const attr = this.#colAttrs[col.key];
|
|
if (!force && attr != null && (attr.resizing || attr.dragging)) {
|
|
return;
|
|
}
|
|
if (col.sortable && ['LABEL', 'LAYER', 'SVG', 'USE'].indexOf(e.target.tagName) < 0) {
|
|
const index = this.columns.indexOf(col);
|
|
if (index < 0) {
|
|
return;
|
|
}
|
|
if (this.sortIndex === index) {
|
|
this.sortDirection = this.sortDirection === 1 ? -1 : 1;
|
|
} else {
|
|
this.sortIndex = index;
|
|
}
|
|
this.sortColumn(true);
|
|
if (typeof this.columnChanged === 'function') {
|
|
this.columnChanged(ColumnChangedType.Sort, index, this.sortDirection);
|
|
}
|
|
}
|
|
}
|
|
|
|
#onDragStart(col, e) { }
|
|
|
|
#onResizeStart(col, e) { }
|
|
|
|
#onColumnAllChecked(col, flag) {
|
|
if (this.#currentSource == null) {
|
|
return;
|
|
}
|
|
const key = col.key;
|
|
const test = typeof col.enabled === 'string';
|
|
if (typeof col.onallchecked === 'function') {
|
|
col.onallchecked.call(this, col, flag);
|
|
} else {
|
|
for (let row of this.#currentSource) {
|
|
const item = row.values;
|
|
if (item == null) {
|
|
continue;
|
|
}
|
|
const enabled = test ? item[col.enabled] : col.enabled;
|
|
if (enabled !== false) {
|
|
item[key] = flag;
|
|
row.__changed = true;
|
|
if (typeof col.onchanged === 'function') {
|
|
col.onchanged.call(this, item, flag);
|
|
}
|
|
}
|
|
}
|
|
this.refresh();
|
|
}
|
|
}
|
|
|
|
#onScroll(e) {
|
|
this.#scrollLeft = e.target.scrollLeft;
|
|
if (!this.virtual) {
|
|
return;
|
|
}
|
|
const top = e.target.scrollTop;
|
|
this.#scrollToTop(top);
|
|
}
|
|
|
|
#onBodyMouseMove(e, holder) {
|
|
let target = e.target;
|
|
if (target.className === 'grid-hover-holder') {
|
|
return;
|
|
}
|
|
let parent;
|
|
while ((parent = target.parentElement) != null && !parent.classList.contains('grid-row')) {
|
|
target = parent;
|
|
}
|
|
let keyid = target.keyid;
|
|
if (parent == null || keyid == null) {
|
|
delete holder.keyid;
|
|
if (holder.style.display !== 'none') {
|
|
holder.style.display = 'none';
|
|
}
|
|
return;
|
|
}
|
|
const oldkeyid = holder.keyid;
|
|
keyid += this.#startIndex << MaxColumnBit;
|
|
if (keyid === oldkeyid) {
|
|
return;
|
|
}
|
|
let overflow = this.#overflows[keyid];
|
|
if (overflow == null) {
|
|
overflow = target.scrollWidth > target.offsetWidth;
|
|
this.#overflows[keyid] = overflow;
|
|
}
|
|
if (overflow) {
|
|
holder.keyid = keyid;
|
|
holder.innerText = target.innerText;
|
|
const top = this.#refs.bodyContent.offsetTop + target.offsetTop + 1;
|
|
let left = target.offsetLeft;
|
|
let width = holder.offsetWidth;
|
|
if (width > this.#bodyClientWidth) {
|
|
width = this.#bodyClientWidth;
|
|
}
|
|
const maxleft = this.#bodyClientWidth + this.#scrollLeft - width;
|
|
if (left > maxleft) {
|
|
left = maxleft;
|
|
}
|
|
const height = target.offsetHeight;
|
|
holder.style.cssText = `top: ${top}px; left: ${left}px; max-width: ${this.#bodyClientWidth}px; height: ${height - 2}px`;
|
|
} else {
|
|
if (oldkeyid != null) {
|
|
delete holder.keyid;
|
|
}
|
|
if (holder.style.display !== 'none') {
|
|
holder.style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
|
|
#onRowClicked(e, index, colIndex) {
|
|
const startIndex = this.#startIndex;
|
|
const selectedIndex = startIndex + index;
|
|
if (typeof this.willSelect === 'function' && !this.willSelect(selectedIndex, colIndex)) {
|
|
return;
|
|
}
|
|
// multi-select
|
|
let flag = false;
|
|
const selectedIndexes = this.#selectedIndexes;
|
|
if (this.multiSelect) {
|
|
if (e.ctrlKey) {
|
|
const i = selectedIndexes.indexOf(selectedIndex);
|
|
if (i < 0) {
|
|
selectedIndexes.push(selectedIndex);
|
|
} else {
|
|
selectedIndexes.splice(i, 1);
|
|
}
|
|
flag = true;
|
|
} else if (e.shiftKey && selectedIndexes.length > 0) {
|
|
if (selectedIndexes.length > 1 || selectedIndexes[0] !== selectedIndex) {
|
|
let start = selectedIndexes[selectedIndexes.length - 1];
|
|
let end;
|
|
if (start > selectedIndex) {
|
|
end = start;
|
|
start = selectedIndex;
|
|
} else {
|
|
end = selectedIndex;
|
|
}
|
|
selectedIndexes.splice(0);
|
|
for (let i = start; i <= end; i += 1) {
|
|
selectedIndexes.push(i);
|
|
}
|
|
flag = true;
|
|
}
|
|
}
|
|
}
|
|
if (!flag && selectedIndexes.length !== 1 || selectedIndexes[0] !== selectedIndex) {
|
|
selectedIndexes.splice(0, selectedIndexes.length, selectedIndex);
|
|
flag = true;
|
|
}
|
|
// apply style
|
|
if (flag) {
|
|
if (this.readonly !== true) {
|
|
this.refresh();
|
|
} else {
|
|
[...this.#refs.bodyContent.children].forEach((row, i) => {
|
|
if (selectedIndexes.indexOf(startIndex + i) >= 0) {
|
|
row.classList.add('selected');
|
|
} else if (row.classList.contains('selected')) {
|
|
row.classList.remove('selected');
|
|
}
|
|
});
|
|
}
|
|
if (typeof this.selectedRowChanged === 'function') {
|
|
this.selectedRowChanged(selectedIndex);
|
|
}
|
|
}
|
|
colIndex ??= this.#getColumnIndex(e.target);
|
|
this.#selectedColumnIndex = colIndex;
|
|
if ((this.fullrowClick || colIndex >= 0) && e.buttons === 1 && typeof this.cellClicked === 'function') {
|
|
if (this.cellClicked(selectedIndex, colIndex) === false) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}
|
|
#onRowDblClicked(e) {
|
|
if (e.target.tagName === 'INPUT') {
|
|
return;
|
|
}
|
|
const index = this.selectedIndex;
|
|
if (typeof this.rowDblClicked === 'function') {
|
|
this.rowDblClicked(index);
|
|
}
|
|
if (typeof this.cellDblClicked === 'function') {
|
|
const colIndex = this.#selectedColumnIndex;
|
|
if ((this.fullrowClick || colIndex >= 0) && e.buttons === 1) {
|
|
this.cellDblClicked(index, colIndex);
|
|
}
|
|
}
|
|
}
|
|
#onRowChanged(_e, index, col, value) {
|
|
if (this.#currentSource == null) {
|
|
return;
|
|
}
|
|
const row = this.#currentSource[this.#startIndex + index];
|
|
const item = row.values;
|
|
if (item == null) {
|
|
return;
|
|
}
|
|
const enabled = typeof col.enabled === 'string' ? item[col.enabled] : col.enabled;
|
|
if (enabled !== false) {
|
|
item[col.key] = value;
|
|
row.__changed = true;
|
|
if (typeof col.onchanged === 'function') {
|
|
col.onchanged.call(this, item, value);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export default Grid; |