tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

issue fix

Browse Source
This commit is contained in:
Chen Lily
2024-01-18 17:25:44 +08:00
parent fb9e920c15
commit feec8b59a7
7 changed files with 265 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
lib/ui/grid/column.js
View File

@ -32,7 +32,7 @@ export class GridColumn {
export class GridInputColumn extends GridColumn {
static get editing() { return true };
static createEdit(trigger, col, _parent, vals) {
static createEdit(trigger, col, _wrapper, vals) {
const input = createElement('input');
input.setAttribute('type', 'text');
if (typeof trigger === 'function') {
@ -61,13 +61,13 @@ export class GridInputColumn extends GridColumn {
static getValue(e) { return e.target.value }
static setEnabled(element, enabled) {
super.setEnabled(element , enabled);
super.setEnabled(element, enabled);
element.disabled = enabled === false;
}
}
export class GridTextColumn extends GridInputColumn {
static createEdit(trigger, col, _parent, vals) {
static createEdit(trigger, col, _wrapper, vals) {
const input = createElement('textarea');
if (typeof trigger === 'function') {
input.addEventListener('change', trigger);
@ -101,13 +101,15 @@ export class GridTextColumn extends GridInputColumn {
const SymbolDropdown = Symbol.for('ui-dropdown');
export class GridDropdownColumn extends GridColumn {
static createEdit(trigger, col, parent) {
static createEdit(trigger, col, wrapper, it) {
const drop = new Dropdown({
...col.dropOptions,
parent,
holder: parent
wrapper
});
drop.onselected = trigger;
if (typeof col.dropExpanded === 'function') {
drop.onexpanded = col.dropExpanded.bind(col, it.values, drop);
}
return drop.create();
}
@ -125,9 +127,23 @@ export class GridDropdownColumn extends GridColumn {
}
static _getSource(item, col) {
let source = col.source;
let source;
if (col.sourceCache !== false) {
source = item.source?.[col.key];
if (source != null) {
return source;
}
}
source = col.source;
if (typeof source === 'function') {
source = source(item);
source = source(item.values);
}
if (col.sourceCache !== false) {
if (item.source == null) {
item.source = { [col.key]: source };
} else {
item.source[col.key] = source;
}
}
return source;
}
@ -169,12 +185,12 @@ export class GridDropdownColumn extends GridColumn {
drop.select(val, true);
}
static getValue(e) {
return e.value;
static getValue(e, col) {
return e[col.dropOptions?.valueKey ?? 'value'];
}
static setEnabled(element, enabled) {
super.setEnabled(element , enabled);
super.setEnabled(element, enabled);
const drop = this._getDrop(element);
if (drop == null) {
return;
@ -198,7 +214,7 @@ export class GridCheckboxColumn extends GridColumn {
static getValue(e) { return e.target.checked }
static setEnabled(element, enabled) {
super.setEnabled(element , enabled);
super.setEnabled(element, enabled);
element.querySelector('input').disabled = enabled === false;
}
}
@ -206,10 +222,10 @@ export class GridCheckboxColumn extends GridColumn {
export class GridIconColumn extends GridColumn {
static create() { return createElement('span', 'col-icon') }
static setValue(element, val, item, col, grid) {
static setValue(element, val, item, col, _grid) {
let className = col.className;
if (typeof className === 'function') {
className = className.call(col, item);
className = className.call(col, item.values);
}
if (className == null) {
element.className = 'col-icon';
@ -218,7 +234,7 @@ export class GridIconColumn extends GridColumn {
}
let type = col.iconType;
if (typeof type === 'function') {
type = type.call(col, item);
type = type.call(col, item.values);
}
type ??= 'fa-regular';
if (element.dataset.type !== type || element.dataset.icon !== val) {
@ -232,7 +248,7 @@ export class GridIconColumn extends GridColumn {
}
static setEnabled(element, enabled) {
super.setEnabled(element , enabled);
super.setEnabled(element, enabled);
if (enabled === false) {
element.classList.add('disabled');
} else {

119
lib/ui/grid/grid.js
View File

@ -141,6 +141,15 @@ export class Grid {
this._refreshSource(list);
}
setItem(index, item) {
if (this._var.source == null) {
return;
}
const it = this._var.source[index];
delete it.source;
it.values = item;
}
_refreshSource(list) {
list ??= this._var.source;
if (this._var.colAttrs.__filtered === true) {
@ -181,7 +190,8 @@ export class Grid {
}
get tableRows() {
return [...this._var.refs.body.children]; //.filter(r => r.classList.contains('ui-grid-row'));
// return [...this._var.refs.body.children];
return Array.prototype.slice.call(this._var.refs.body.children);
}
get selectedIndexes() { return this._var.selectedIndexes }
@ -220,12 +230,12 @@ export class Grid {
}
}
get scrollTop() { return this._var.refs.el?.scrollTop; }
get scrollTop() { return this._var.el?.scrollTop; }
set scrollTop(top) {
if (this._var.refs.el == null) {
if (this._var.el == null) {
return;
}
this._var.refs.el.scrollTop = top;
this._var.el.scrollTop = top;
this.reload();
}
@ -280,8 +290,24 @@ export class Grid {
const table = createElement('table', 'ui-grid-table');
this._var.refs.table = table;
this._createHeader(table);
this._createBody(table);
const body = this._createBody(table);
wrapper.appendChild(table);
// holder
if (!this.holderDisabled) {
const holder = createElement('div', 'ui-grid-hover-holder');
holder.addEventListener('mousedown', e => {
const holder = e.currentTarget;
const row = Number(holder.dataset.row);
const col = Number(holder.dataset.col);
if (holder.classList.contains('active')) {
holder.classList.remove('active');
}
return this._onRowClicked(e, row, col);
});
holder.addEventListener('dblclick', e => this._onRowDblClicked(e));
wrapper.appendChild(holder);
body.addEventListener('mousemove', e => throttle(this._onBodyMouseMove, HoverInternal, this, e, holder), { passive: true });
}
// loading
const loading = createElement('div', 'ui-grid-loading',
@ -303,7 +329,7 @@ export class Grid {
scrollToIndex(index) {
const top = this._scrollToTop(index * (this.rowHeight + 1), true);
this._var.refs.el.scrollTop = top;
this._var.el.scrollTop = top;
}
resize(force) {
@ -311,12 +337,6 @@ export class Grid {
return;
}
const body = this._var.refs.body;
// let height = this._var.refs.header.offsetHeight + 2;
// let top = body.offsetTop;
// if (top !== height) {
// body.style.top = `${height}px`;
// top = height;
// }
const top = this.headerVisible === false ? 0 : this._var.refs.header.offsetHeight;
let height = this.height;
@ -572,15 +592,6 @@ export class Grid {
width += col.width + 1;
}
}
// // body container
// const bodyContainer = 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);
if (width > 0) {
table.style.width = `${width}px`;
}
@ -596,24 +607,7 @@ export class Grid {
});
body.addEventListener('dblclick', e => this._onRowDblClicked(e));
// this._adjustRows();
// events
// if (!this.holderDisabled) {
// const holder = createElement('div', 'ui-grid-hover-holder');
// holder.addEventListener('mousedown', e => {
// const holder = e.currentTarget;
// const row = Number(holder.dataset.row);
// const col = Number(holder.dataset.col);
// if (holder.classList.contains('active')) {
// holder.classList.remove('active');
// }
// return this._onRowClicked(e, row + this._var.startIndex, col);
// });
// holder.addEventListener('dblclick', e => this._onRowDblClicked(e));
// bodyContainer.appendChild(holder);
// body.addEventListener('mousemove', e => throttle(this._onBodyMouseMove, HoverInternal, this, e, holder), { passive: true });
// }
this._var.refs.body = body;
// this._var.refs.bodyContainer = bodyContainer;
// this.refresh();
return body;
@ -631,8 +625,6 @@ export class Grid {
if (count > 0) {
for (let i = 0; i < count; i += 1) {
const row = createElement('tr', 'ui-grid-row');
// row.addEventListener('mousedown', e => this._onRowClicked(e, exists + i));
// row.addEventListener('dblclick', e => this._onRowDblClicked(e));
let left = 0;
cols.forEach((col, j) => {
const cell = createElement('td');
@ -669,7 +661,7 @@ export class Grid {
type ??= GridColumn;
this._var.colTypes[col.key] = type;
}
cell.appendChild(type.create(col, e => this._onRowChanged(e, this._var.startIndex + i, col, type.getValue(e), cell), this._var.refs.body));
cell.appendChild(type.create(col, e => this._onRowChanged(e, this._var.startIndex + i, col, type.getValue(e, col), cell), this._var.el));
}
} else {
cell.style.display = 'none';
@ -682,7 +674,7 @@ export class Grid {
} else if (count < 0) {
for (let i = -1; i >= count; i -= 1) {
// content.removeChild(content.children[exists + i]);
content.children[exists + i + 1].remove();
content.children[exists + i].remove();
}
}
}
@ -706,21 +698,25 @@ export class Grid {
row.classList.remove('selected');
}
// data
const selectChanged = vals.__selected ^ selected;
if (selected) {
vals.__selected = true;
} else {
delete vals.__selected;
}
// const selectChanged = vals.__selected ^ selected;
// if (selected) {
// vals.__selected = true;
// } else {
// delete vals.__selected;
// }
cols.forEach((col, j) => {
if (col.visible === false) {
return;
}
const cell = row.children[j];
if (cell == null) {
return;
}
let val;
if (col.text != null) {
val = col.text;
} else if (typeof col.filter === 'function') {
val = col.filter(item, this._var.refs.body);
val = col.filter(item, selected, this._var.refs.body);
} else {
val = item[col.key];
if (val?.displayValue != null) {
@ -729,7 +725,6 @@ export class Grid {
}
val ??= '';
// fill
const cell = row.children[j];
if (typeof col.bgFilter === 'function') {
const bgColor = col.bgFilter(item);
cell.style.backgroundColor = bgColor ?? '';
@ -737,13 +732,13 @@ export class Grid {
const isCheckbox = Grid.ColumnTypes.isCheckbox(col.type);
const type = isCheckbox ? GridCheckboxColumn : this._var.colTypes[col.key] ?? GridColumn;
let element;
if (!isCheckbox && selectChanged && typeof type.createEdit === 'function') {
if (!isCheckbox && typeof type.createEdit === 'function') {
if (vals.__editing?.[col.key] && type.editing) {
val = type.getValue({ target: cell.children[0] });
val = type.getValue({ target: cell.children[0] }, col);
this._onRowChanged(null, startIndex + i, col, val, cell, true);
}
element = selected ?
type.createEdit(e => this._onRowChanged(e, startIndex + i, col, type.getValue(e), cell), col, this._var.refs.body, vals) :
type.createEdit(e => this._onRowChanged(e, startIndex + i, col, type.getValue(e, col), cell), col, this._var.el, vals) :
type.create(col);
cell.replaceChildren(element);
} else {
@ -760,7 +755,7 @@ export class Grid {
enabled = item[enabled];
}
}
type.setValue(element, val, item, col, this);
type.setValue(element, val, vals, col, this);
let tip = col.tooltip;
if (typeof tip === 'function') {
tip = tip.call(col, item);
@ -854,10 +849,6 @@ export class Grid {
}
}
}
// } else {
// width = this._var.refs.bodyContainer.offsetWidth - oldwidth + width;
// this._var.refs.bodyContainer.style.width = `${width}px`;
// }
}
_changingColumnOrder(index, offset, x, offsetLeft) {
@ -1017,7 +1008,7 @@ export class Grid {
_getItemValue(item, key, filter) {
let value;
if (typeof filter === 'function') {
value = filter(item, this._var.refs.body);
value = filter(item, false, this._var.refs.body);
} else {
value = item[key];
}
@ -1480,7 +1471,7 @@ export class Grid {
holder.dataset.row = row;
holder.dataset.col = col;
holder.innerText = element.innerText;
const top = this._var.refs.body.offsetTop + target.offsetTop;
const top = target.offsetTop + this._var.refs.table.offsetTop;
let left = target.offsetLeft;
let width = holder.offsetWidth;
if (width > this._var.bodyClientWidth) {
@ -1587,6 +1578,7 @@ export class Grid {
return;
}
const row = this._var.currentSource[this._var.startIndex + index];
delete row.source;
const item = row.values;
if (item == null) {
return;
@ -1598,7 +1590,12 @@ export class Grid {
enabled = item[enabled];
}
if (enabled !== false) {
item[col.key] = value;
const val = item[col.key];
if (val?.value != null) {
val.value = value;
} else {
item[col.key] = value;
}
let tip = col.tooltip;
if (typeof tip === 'function') {
tip = tip.call(col, item);