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

double click spliter to resize column width

Browse Source
This commit is contained in:
Tsanie Lily 2023-04-04 16:09:30 +08:00
parent a2fbb7e78a
commit 3bc258149c
2 changed files with 35 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
lib/ui/grid.html
View File

@ -37,7 +37,7 @@
grid.allowHtml = true; grid.allowHtml = true;
grid.height = 0; grid.height = 0;
grid.columns = [ grid.columns = [
{ key: 'c1', caption: 'column 1' }, { key: 'c1', caption: 'column 122222222311111111111111111' },
{ key: 'c2', caption: '选择', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' }, { key: 'c2', caption: '选择', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' },
{ {
key: 'c2a', key: 'c2a',
@ -60,9 +60,8 @@
{ key: 'c3', caption: 'column 3', width: 90 }, { key: 'c3', caption: 'column 3', width: 90 },
{ key: 'c4', caption: 'Note', type: Grid.ColumnTypes.Input } { key: 'c4', caption: 'Note', type: Grid.ColumnTypes.Input }
]; ];
grid.cellClicked = (rId, cId) => { grid.columnChanged = (type, index, value) => console.log(`column (${index}), ${type}, ${value}`);
console.log(`row (${rId}), column (${cId}) clicked.`); grid.cellClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) clicked.`);
};
grid.rowDblClicked = (rId) => console.log(`row (${rId}) double clicked.`); grid.rowDblClicked = (rId) => console.log(`row (${rId}) double clicked.`);
grid.cellDblClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) double clicked.`); grid.cellDblClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) double clicked.`);
grid.init(); grid.init();

36
lib/ui/grid.js
View File

@ -604,6 +604,7 @@ class Grid {
const spliter = document.createElement('layer'); const spliter = document.createElement('layer');
spliter.className = 'spliter'; spliter.className = 'spliter';
spliter.addEventListener('mousedown', e => this.#onResizeStart(e, col)); spliter.addEventListener('mousedown', e => this.#onResizeStart(e, col));
spliter.addEventListener('dblclick', e => this.#onAutoResize(e, col));
th.appendChild(spliter); th.appendChild(spliter);
} }
// tooltip // tooltip
@ -1129,6 +1130,7 @@ class Grid {
return; return;
} }
attr.resizing = val; attr.resizing = val;
attr.sizing = true;
this.#changeColumnWidth(index, val); this.#changeColumnWidth(index, val);
}; };
attr.mousemove = e => throttle(resizemove, RefreshInterval, this, e); attr.mousemove = e => throttle(resizemove, RefreshInterval, this, e);
@ -1136,11 +1138,14 @@ class Grid {
clearEvents(attr); clearEvents(attr);
const width = attr.resizing; const width = attr.resizing;
if (width != null) { if (width != null) {
col.autoResize = false;
setTimeout(() => delete attr.resizing); setTimeout(() => delete attr.resizing);
this.#changeColumnWidth(index, width); if (attr.sizing) {
if (typeof this.columnChanged === 'function') { delete attr.sizing;
this.columnChanged(ColumnChangedType.Resize, index, width); col.autoResize = false;
this.#changeColumnWidth(index, width);
if (typeof this.columnChanged === 'function') {
this.columnChanged(ColumnChangedType.Resize, index, width);
}
} }
} }
e.stopPropagation(); e.stopPropagation();
@ -1149,6 +1154,29 @@ class Grid {
['mousemove', 'mouseup'].forEach(event => window.addEventListener(event, attr[event])); ['mousemove', 'mouseup'].forEach(event => window.addEventListener(event, attr[event]));
} }
#onAutoResize(e, col) {
const th = e.currentTarget.parentElement;
const index = indexOfParent(th);
let width = th.querySelector('div:first-child').scrollWidth;
for (let row of this.#refs.bodyContent.children) {
const element = row.children[index].children[0];
const w = element.scrollWidth;
if (w > width) {
width = w;
}
}
if (width < MiniColumnWidth) {
width = MiniColumnWidth;
}
if (width > 0 && width !== col.width) {
width += 12;
this.#changeColumnWidth(index, width);
if (typeof this.columnChanged === 'function') {
this.columnChanged(ColumnChangedType.Resize, index, width);
}
}
}
#onColumnAllChecked(col, flag) { #onColumnAllChecked(col, flag) {
if (this.#currentSource == null) { if (this.#currentSource == null) {
return; return;