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

add docs

Browse Source
This commit is contained in:
Chen Lily
2024-01-23 09:07:15 +08:00
parent 3d9c5bd3f2
commit 10e4e52b51
9 changed files with 112 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@ import { createIcon } from "../icon";
import { createCheckbox } from "../checkbox";
import { setTooltip } from "../tooltip";
import { convertCssStyle } from "../extension";
import { GridColumn, GridInputColumn, GridTextColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn } from "./column";
import { GridColumn, GridInputColumn, GridTextColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn, GridDateColumn } from "./column";
const ColumnChangedType = {
Reorder: 'reorder',
@ -49,7 +49,8 @@ const ColumnTypes = {
2: GridDropdownColumn,
3: GridCheckboxColumn,
4: GridIconColumn,
5: GridTextColumn
5: GridTextColumn,
6: GridDateColumn
};
let r = lang;
@ -92,7 +93,7 @@ export class Grid {
readonly;
multiSelect = false;
fullrowClick = true;
holderDisabled = false;
tooltipDisabled = false;
headerVisible = true;
window = global;
sortIndex = -1;
@ -112,6 +113,7 @@ export class Grid {
Checkbox: 3,
Icon: 4,
Text: 5,
Date: 6,
isCheckbox(type) { return type === 3 }
};
@ -293,8 +295,8 @@ export class Grid {
this._createHeader(table);
const body = this._createBody(table);
wrapper.appendChild(table);
// holder
if (!this.holderDisabled) {
// tooltip
if (!this.tooltipDisabled) {
const holder = createElement('div', 'ui-grid-hover-holder');
holder.addEventListener('mousedown', e => {
const holder = e.currentTarget;
@ -543,8 +545,8 @@ export class Grid {
wrapper.appendChild(check);
}
const caption = createElement('span');
if (col.textStyle != null) {
caption.style.cssText = convertCssStyle(col.textStyle);
if (col.captionStyle != null) {
caption.style.cssText = convertCssStyle(col.captionStyle);
}
caption.innerText = col.caption ?? '';
wrapper.appendChild(caption);
@ -658,7 +660,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, col), cell), this._var.el));
cell.appendChild(type.create(col));
}
} else {
cell.style.display = 'none';
@ -848,11 +850,11 @@ export class Grid {
}
}
_changingColumnOrder(index, offset, x, offsetLeft) {
_changingColumnOrder(index, offset, x, offsetLeft, scrollLeft) {
const children = this._var.refs.header.children;
let element = children[index];
this._var.refs.dragger.style.cssText = `left: ${element.offsetLeft - offsetLeft + offset}px; width: ${element.style.width}; display: block`;
offset = x - element.offsetLeft; // getOffsetLeftFromWindow(element);
offset = x + scrollLeft - element.offsetLeft; // getOffsetLeftFromWindow(element);
let idx;
if (offset < 0) {
offset = -offset;
@ -1035,7 +1037,7 @@ export class Grid {
} else {
this.sortIndex = index;
}
this.sortColumn(true);
this.sortColumn();
if (typeof this.columnChanged === 'function') {
this.columnChanged(ColumnChangedType.Sort, index, this.sortDirection);
}
@ -1289,6 +1291,7 @@ export class Grid {
}
attr.dragging = true;
const offsetLeft = this._var.refs.header.querySelector('th:last-child').offsetLeft;
const scrollLeft = this._var.el.scrollLeft;
const dragmove = e => {
const cx2 = getClientX(e);
const offset = cx2 - cx;
@ -1300,7 +1303,7 @@ export class Grid {
dragging = true;
}
if (dragging) {
this._changingColumnOrder(index, offset, cx2, offsetLeft);
this._changingColumnOrder(index, offset, cx2, offsetLeft, scrollLeft);
attr.offset = offset;
}
};
@ -1401,8 +1404,8 @@ export class Grid {
const key = col.key;
const isFunction = typeof col.enabled === 'function';
const isString = typeof col.enabled === 'string';
if (typeof col.onallchecked === 'function') {
col.onallchecked.call(this, col, flag);
if (typeof col.onAllChecked === 'function') {
col.onAllChecked.call(this, col, flag);
} else {
for (let row of this._var.currentSource) {
const item = row.values;
@ -1413,8 +1416,8 @@ export class Grid {
if (enabled !== false) {
item[key] = flag;
row.__changed = true;
if (typeof col.onchanged === 'function') {
col.onchanged.call(this, item, flag);
if (typeof col.onChanged === 'function') {
col.onChanged.call(this, item, flag);
}
}
}
@ -1426,8 +1429,8 @@ export class Grid {
if (this._var.colAttrs.__filtering != null) {
this._onCloseFilter();
}
if (this.onscrollbody === 'function') {
this.onscrollbody(e);
if (this.bodyScrolled === 'function') {
this.bodyScrolled(e);
}
if (!this.virtual) {
return;
@ -1604,12 +1607,12 @@ export class Grid {
}
row.__changed = true;
if (blur) {
if (typeof col.oneditend === 'function') {
col.oneditend.call(this, item, value);
if (typeof col.onInputEnded === 'function') {
col.onInputEnded.call(this, item, value);
}
} else {
if (typeof col.onchanged === 'function') {
col.onchanged.call(this, item, value);
if (typeof col.onChanged === 'function') {
col.onChanged.call(this, item, value);
}
}
}