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

36
lib/ui/grid.js
View File

@ -604,6 +604,7 @@ class Grid {
const spliter = document.createElement('layer');
spliter.className = 'spliter';
spliter.addEventListener('mousedown', e => this.#onResizeStart(e, col));
spliter.addEventListener('dblclick', e => this.#onAutoResize(e, col));
th.appendChild(spliter);
}
// tooltip
@ -1129,6 +1130,7 @@ class Grid {
return;
}
attr.resizing = val;
attr.sizing = true;
this.#changeColumnWidth(index, val);
};
attr.mousemove = e => throttle(resizemove, RefreshInterval, this, e);
@ -1136,11 +1138,14 @@ class Grid {
clearEvents(attr);
const width = attr.resizing;
if (width != null) {
col.autoResize = false;
setTimeout(() => delete attr.resizing);
this.#changeColumnWidth(index, width);
if (typeof this.columnChanged === 'function') {
this.columnChanged(ColumnChangedType.Resize, index, width);
if (attr.sizing) {
delete attr.sizing;
col.autoResize = false;
this.#changeColumnWidth(index, width);
if (typeof this.columnChanged === 'function') {
this.columnChanged(ColumnChangedType.Resize, index, width);
}
}
}
e.stopPropagation();
@ -1149,6 +1154,29 @@ class Grid {
['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) {
if (this.#currentSource == null) {
return;