vxe-table 3.10.15 → 3.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/es/style.css +1 -1
- package/es/style.min.css +1 -1
- package/es/table/module/custom/mixin.js +5 -1
- package/es/table/module/edit/mixin.js +24 -15
- package/es/table/module/validator/mixin.js +31 -10
- package/es/table/src/body.js +40 -24
- package/es/table/src/cell.js +75 -32
- package/es/table/src/footer.js +159 -131
- package/es/table/src/header.js +128 -90
- package/es/table/src/methods.js +292 -66
- package/es/table/src/props.js +5 -1
- package/es/table/src/table.js +64 -20
- package/es/table/style.css +33 -20
- package/es/table/style.min.css +1 -1
- package/es/ui/index.js +9 -4
- package/es/ui/src/log.js +1 -1
- package/es/vxe-table/style.css +33 -20
- package/es/vxe-table/style.min.css +1 -1
- package/helper/vetur/attributes.json +1 -1
- package/helper/vetur/tags.json +1 -1
- package/lib/index.umd.js +945 -460
- package/lib/index.umd.min.js +1 -1
- package/lib/style.css +1 -1
- package/lib/style.min.css +1 -1
- package/lib/table/module/custom/mixin.js +5 -1
- package/lib/table/module/custom/mixin.min.js +1 -1
- package/lib/table/module/edit/mixin.js +24 -15
- package/lib/table/module/edit/mixin.min.js +1 -1
- package/lib/table/module/validator/mixin.js +31 -10
- package/lib/table/module/validator/mixin.min.js +1 -1
- package/lib/table/src/body.js +31 -15
- package/lib/table/src/body.min.js +1 -1
- package/lib/table/src/cell.js +82 -35
- package/lib/table/src/cell.min.js +1 -1
- package/lib/table/src/footer.js +198 -161
- package/lib/table/src/footer.min.js +1 -1
- package/lib/table/src/header.js +169 -128
- package/lib/table/src/header.min.js +1 -1
- package/lib/table/src/methods.js +321 -69
- package/lib/table/src/methods.min.js +1 -1
- package/lib/table/src/props.js +5 -1
- package/lib/table/src/props.min.js +1 -1
- package/lib/table/src/table.js +70 -20
- package/lib/table/src/table.min.js +1 -1
- package/lib/table/style/style.css +33 -20
- package/lib/table/style/style.min.css +1 -1
- package/lib/ui/index.js +9 -4
- package/lib/ui/index.min.js +1 -1
- package/lib/ui/src/log.js +1 -1
- package/lib/ui/src/log.min.js +1 -1
- package/lib/vxe-table/style/style.css +33 -20
- package/lib/vxe-table/style/style.min.css +1 -1
- package/package.json +3 -3
- package/packages/table/module/custom/mixin.ts +5 -1
- package/packages/table/module/edit/mixin.ts +24 -15
- package/packages/table/module/validator/mixin.ts +33 -10
- package/packages/table/src/body.ts +43 -25
- package/packages/table/src/cell.ts +120 -67
- package/packages/table/src/footer.ts +164 -150
- package/packages/table/src/header.ts +136 -90
- package/packages/table/src/methods.ts +304 -68
- package/packages/table/src/props.ts +5 -1
- package/packages/table/src/table.ts +71 -19
- package/packages/ui/index.ts +8 -3
- package/styles/components/table.scss +42 -35
- /package/es/{iconfont.1731574584971.ttf → iconfont.1731890707082.ttf} +0 -0
- /package/es/{iconfont.1731574584971.woff → iconfont.1731890707082.woff} +0 -0
- /package/es/{iconfont.1731574584971.woff2 → iconfont.1731890707082.woff2} +0 -0
- /package/lib/{iconfont.1731574584971.ttf → iconfont.1731890707082.ttf} +0 -0
- /package/lib/{iconfont.1731574584971.woff → iconfont.1731890707082.woff} +0 -0
- /package/lib/{iconfont.1731574584971.woff2 → iconfont.1731890707082.woff2} +0 -0
package/es/table/src/methods.js
CHANGED
|
@@ -331,63 +331,114 @@ function updateRowDropOrigin($xeTable, row) {
|
|
|
331
331
|
});
|
|
332
332
|
}
|
|
333
333
|
}
|
|
334
|
-
|
|
334
|
+
const updateRowDropTipContent = ($xeTable, tdEl) => {
|
|
335
|
+
const reactData = $xeTable;
|
|
336
|
+
const props = $xeTable;
|
|
337
|
+
const { dragConfig } = props;
|
|
338
|
+
const { dragRow } = reactData;
|
|
339
|
+
const rowDragOpts = $xeTable.computeRowDragOpts;
|
|
340
|
+
const { tooltipMethod } = rowDragOpts;
|
|
341
|
+
const rTooltipMethod = tooltipMethod || (dragConfig ? dragConfig.rowTooltipMethod : null);
|
|
342
|
+
let tipContent = '';
|
|
343
|
+
if (rTooltipMethod) {
|
|
344
|
+
tipContent = `${rTooltipMethod({
|
|
345
|
+
row: dragRow
|
|
346
|
+
}) || ''}`;
|
|
347
|
+
}
|
|
348
|
+
else {
|
|
349
|
+
tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
|
|
350
|
+
}
|
|
351
|
+
reactData.dragTipText = tipContent;
|
|
352
|
+
};
|
|
353
|
+
const updateColDropOrigin = ($xeTable, column) => {
|
|
335
354
|
const el = $xeTable.$el;
|
|
336
355
|
if (el) {
|
|
337
|
-
const clss = '
|
|
338
|
-
XEUtils.arrayEach(el.querySelectorAll(
|
|
339
|
-
|
|
356
|
+
const clss = 'col--drag-origin';
|
|
357
|
+
XEUtils.arrayEach(el.querySelectorAll(`[colid="${column.id}"]`), (elem) => {
|
|
358
|
+
addClass(elem, clss);
|
|
340
359
|
});
|
|
341
360
|
}
|
|
342
|
-
}
|
|
343
|
-
|
|
361
|
+
};
|
|
362
|
+
const clearColDropOrigin = ($xeTable) => {
|
|
344
363
|
const el = $xeTable.$el;
|
|
345
364
|
if (el) {
|
|
346
|
-
const clss = '
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
elem.setAttribute('drag-pos', dragPos);
|
|
365
|
+
const clss = 'col--drag-origin';
|
|
366
|
+
XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
|
|
367
|
+
elem.draggable = false;
|
|
368
|
+
removeClass(elem, clss);
|
|
351
369
|
});
|
|
352
370
|
}
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
const
|
|
356
|
-
|
|
357
|
-
|
|
371
|
+
};
|
|
372
|
+
const updateColDropTipContent = ($xeTable, tdEl) => {
|
|
373
|
+
const reactData = $xeTable;
|
|
374
|
+
const { dragCol } = reactData;
|
|
375
|
+
const columnDragOpts = $xeTable.computeColumnDragOpts;
|
|
376
|
+
const { tooltipMethod } = columnDragOpts;
|
|
377
|
+
let tipContent = '';
|
|
378
|
+
if (tooltipMethod) {
|
|
379
|
+
tipContent = `${tooltipMethod({
|
|
380
|
+
column: dragCol
|
|
381
|
+
}) || ''}`;
|
|
358
382
|
}
|
|
359
|
-
|
|
383
|
+
else {
|
|
384
|
+
tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
|
|
385
|
+
}
|
|
386
|
+
reactData.dragTipText = tipContent;
|
|
387
|
+
};
|
|
388
|
+
function showDropTip($xeTable, evnt, trEl, thEl, dragPos) {
|
|
389
|
+
const reactData = $xeTable;
|
|
390
|
+
const el = $xeTable.$refs.refElem;
|
|
360
391
|
if (!el) {
|
|
361
392
|
return;
|
|
362
393
|
}
|
|
394
|
+
const { scrollbarWidth, scrollbarHeight } = reactData;
|
|
395
|
+
const wrapperRect = el.getBoundingClientRect();
|
|
396
|
+
if (trEl) {
|
|
397
|
+
const rdLineEl = $xeTable.$refs.refDragRowLineElem;
|
|
398
|
+
if (rdLineEl) {
|
|
399
|
+
const trRect = trEl.getBoundingClientRect();
|
|
400
|
+
let top = Math.max(1, trRect.y - wrapperRect.y);
|
|
401
|
+
if (dragPos === 'bottom') {
|
|
402
|
+
top = Math.min(wrapperRect.height - 1, trRect.y - wrapperRect.y + trRect.height);
|
|
403
|
+
}
|
|
404
|
+
rdLineEl.style.top = `${top}px`;
|
|
405
|
+
rdLineEl.style.width = `${wrapperRect.width - scrollbarWidth}px`;
|
|
406
|
+
rdLineEl.style.display = 'block';
|
|
407
|
+
}
|
|
408
|
+
}
|
|
409
|
+
else if (thEl) {
|
|
410
|
+
const cdLineEl = $xeTable.$refs.refDragColLineElem;
|
|
411
|
+
if (cdLineEl) {
|
|
412
|
+
const thRect = thEl.getBoundingClientRect();
|
|
413
|
+
let left = Math.max(1, thRect.x - wrapperRect.x);
|
|
414
|
+
if (dragPos === 'right') {
|
|
415
|
+
left = Math.min(wrapperRect.width - 2, thRect.x - wrapperRect.x + thRect.width);
|
|
416
|
+
}
|
|
417
|
+
cdLineEl.style.left = `${left}px`;
|
|
418
|
+
cdLineEl.style.height = `${wrapperRect.height - scrollbarHeight}px`;
|
|
419
|
+
cdLineEl.style.display = 'block';
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
const rdTipEl = $xeTable.$refs.refDragTipElem;
|
|
363
423
|
if (rdTipEl) {
|
|
364
|
-
const wrapperRect = el.getBoundingClientRect();
|
|
365
424
|
rdTipEl.style.display = 'block';
|
|
366
425
|
rdTipEl.style.top = `${Math.min(el.clientHeight - el.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
|
|
367
426
|
rdTipEl.style.left = `${Math.min(el.clientWidth - el.scrollLeft - rdTipEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`;
|
|
368
427
|
}
|
|
369
428
|
}
|
|
370
|
-
const
|
|
371
|
-
const rdTipEl = $xeTable.$refs.
|
|
429
|
+
const hideDropTip = ($xeTable) => {
|
|
430
|
+
const rdTipEl = $xeTable.$refs.refDragTipElem;
|
|
431
|
+
const rdLineEl = $xeTable.$refs.refDragRowLineElem;
|
|
432
|
+
const cdLineEl = $xeTable.$refs.refDragColLineElem;
|
|
372
433
|
if (rdTipEl) {
|
|
373
434
|
rdTipEl.style.display = '';
|
|
374
435
|
}
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
const reactData = $xeTable;
|
|
378
|
-
const { dragRow } = reactData;
|
|
379
|
-
const dragOpts = $xeTable.computeDragOpts;
|
|
380
|
-
const { rowTooltipMethod } = dragOpts;
|
|
381
|
-
let tipContent = '';
|
|
382
|
-
if (rowTooltipMethod) {
|
|
383
|
-
tipContent = `${rowTooltipMethod({
|
|
384
|
-
row: dragRow
|
|
385
|
-
}) || ''}`;
|
|
436
|
+
if (rdLineEl) {
|
|
437
|
+
rdLineEl.style.display = '';
|
|
386
438
|
}
|
|
387
|
-
|
|
388
|
-
|
|
439
|
+
if (cdLineEl) {
|
|
440
|
+
cdLineEl.style.display = '';
|
|
389
441
|
}
|
|
390
|
-
reactData.dragTipText = tipContent;
|
|
391
442
|
};
|
|
392
443
|
const Methods = {
|
|
393
444
|
callSlot(slotFunc, params, h, vNodes) {
|
|
@@ -556,6 +607,7 @@ const Methods = {
|
|
|
556
607
|
editStore.removeMaps = {};
|
|
557
608
|
const sYLoad = this.updateScrollYStatus(fullData);
|
|
558
609
|
this.scrollYLoad = sYLoad;
|
|
610
|
+
this.isDragRowMove = false;
|
|
559
611
|
// 全量数据
|
|
560
612
|
this.tableFullData = fullData;
|
|
561
613
|
this.tableFullTreeData = treeData;
|
|
@@ -739,6 +791,7 @@ const Methods = {
|
|
|
739
791
|
const tableFullColumn = getColumnList(collectColumn);
|
|
740
792
|
this.tableFullColumn = tableFullColumn;
|
|
741
793
|
this._isLoading = true;
|
|
794
|
+
this.isDragColMove = false;
|
|
742
795
|
this.initColumnSort();
|
|
743
796
|
return Promise.resolve(this.restoreCustomStorage()).then(() => {
|
|
744
797
|
this._isLoading = false;
|
|
@@ -3012,7 +3065,14 @@ const Methods = {
|
|
|
3012
3065
|
if (isClear ||
|
|
3013
3066
|
// 如果点击了当前表格之外
|
|
3014
3067
|
!getEventTargetNode(evnt, $el).flag) {
|
|
3015
|
-
setTimeout(() =>
|
|
3068
|
+
setTimeout(() => {
|
|
3069
|
+
this.handleClearEdit(evnt).then(() => {
|
|
3070
|
+
// 如果存在校验,点击了表格之外则清除
|
|
3071
|
+
if (!this.isActivated && editRules && validOpts.autoClear) {
|
|
3072
|
+
this.validErrorMaps = {};
|
|
3073
|
+
}
|
|
3074
|
+
});
|
|
3075
|
+
});
|
|
3016
3076
|
}
|
|
3017
3077
|
});
|
|
3018
3078
|
}
|
|
@@ -3076,8 +3136,8 @@ const Methods = {
|
|
|
3076
3136
|
if (isEsc) {
|
|
3077
3137
|
this.preventEvent(evnt, 'event.keydown', null, () => {
|
|
3078
3138
|
this.emitEvent('keydown-start', {}, evnt);
|
|
3079
|
-
if (keyboardConfig && mouseConfig && mouseOpts.area && this.
|
|
3080
|
-
this.
|
|
3139
|
+
if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardCellAreaEvent) {
|
|
3140
|
+
this.handleKeyboardCellAreaEvent(evnt);
|
|
3081
3141
|
}
|
|
3082
3142
|
else if (actived.row || filterStore.visible || ctxMenuStore.visible) {
|
|
3083
3143
|
evnt.stopPropagation();
|
|
@@ -3088,7 +3148,7 @@ const Methods = {
|
|
|
3088
3148
|
// 如果是激活编辑状态,则取消编辑
|
|
3089
3149
|
if (actived.row) {
|
|
3090
3150
|
const params = actived.args;
|
|
3091
|
-
this.
|
|
3151
|
+
this.handleClearEdit(evnt);
|
|
3092
3152
|
// 如果配置了选中功能,则为选中状态
|
|
3093
3153
|
if (mouseConfig && mouseOpts.selected) {
|
|
3094
3154
|
this.$nextTick(() => this.handleSelected(params, evnt));
|
|
@@ -3148,8 +3208,8 @@ const Methods = {
|
|
|
3148
3208
|
this.moveCtxMenu(evnt, keyCode, ctxMenuStore, 'selected', 39, true, this.ctxMenuList);
|
|
3149
3209
|
}
|
|
3150
3210
|
}
|
|
3151
|
-
else if (keyboardConfig && mouseConfig && mouseOpts.area && this.
|
|
3152
|
-
this.
|
|
3211
|
+
else if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardCellAreaEvent) {
|
|
3212
|
+
this.handleKeyboardCellAreaEvent(evnt);
|
|
3153
3213
|
}
|
|
3154
3214
|
else if (keyboardConfig && isSpacebar && keyboardOpts.isChecked && selected.row && selected.column && (selected.column.type === 'checkbox' || selected.column.type === 'radio')) {
|
|
3155
3215
|
// 空格键支持选中复选框
|
|
@@ -3185,7 +3245,7 @@ const Methods = {
|
|
|
3185
3245
|
// 如果是激活编辑状态,则取消编辑
|
|
3186
3246
|
if (actived.row) {
|
|
3187
3247
|
const params = actived.args;
|
|
3188
|
-
this.
|
|
3248
|
+
this.handleClearEdit(evnt);
|
|
3189
3249
|
// 如果配置了选中功能,则为选中状态
|
|
3190
3250
|
if (mouseConfig && mouseOpts.selected) {
|
|
3191
3251
|
this.$nextTick(() => this.handleSelected(params, evnt));
|
|
@@ -4701,6 +4761,9 @@ const Methods = {
|
|
|
4701
4761
|
this.emitEvent('sort-change', params, evnt);
|
|
4702
4762
|
}
|
|
4703
4763
|
},
|
|
4764
|
+
/**
|
|
4765
|
+
* 行拖拽
|
|
4766
|
+
*/
|
|
4704
4767
|
handleRowDragDragstartEvent(evnt) {
|
|
4705
4768
|
const img = new Image();
|
|
4706
4769
|
if (evnt.dataTransfer) {
|
|
@@ -4712,26 +4775,29 @@ const Methods = {
|
|
|
4712
4775
|
const props = $xeTable;
|
|
4713
4776
|
const reactData = $xeTable;
|
|
4714
4777
|
const internalData = $xeTable;
|
|
4715
|
-
const { treeConfig } = props;
|
|
4716
|
-
const
|
|
4717
|
-
const { dragEndMethod } =
|
|
4778
|
+
const { treeConfig, dragConfig } = props;
|
|
4779
|
+
const rowDragOpts = $xeTable.computeRowDragOpts;
|
|
4780
|
+
const { dragEndMethod } = rowDragOpts;
|
|
4718
4781
|
const treeOpts = $xeTable.computeTreeOpts;
|
|
4719
4782
|
const { transform } = treeOpts;
|
|
4720
4783
|
const { dragRow } = reactData;
|
|
4721
4784
|
const { afterFullData, afterTreeFullData, tableFullData, tableFullTreeData, prevDragRow, prevDragPos } = internalData;
|
|
4785
|
+
const dEndMethod = dragEndMethod || (dragConfig ? dragConfig.dragEndMethod : null);
|
|
4786
|
+
const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
|
|
4722
4787
|
if (prevDragRow && dragRow) {
|
|
4723
4788
|
// 判断是否有拖动
|
|
4724
4789
|
if (prevDragRow !== dragRow) {
|
|
4725
|
-
Promise.resolve(
|
|
4726
|
-
?
|
|
4790
|
+
Promise.resolve(dEndMethod
|
|
4791
|
+
? dEndMethod({
|
|
4727
4792
|
oldRow: dragRow,
|
|
4728
|
-
newRow: prevDragRow
|
|
4793
|
+
newRow: prevDragRow,
|
|
4794
|
+
dragPos: prevDragPos,
|
|
4795
|
+
offsetIndex: dragOffsetIndex
|
|
4729
4796
|
})
|
|
4730
4797
|
: true).then((status) => {
|
|
4731
4798
|
if (!status) {
|
|
4732
4799
|
return;
|
|
4733
4800
|
}
|
|
4734
|
-
const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
|
|
4735
4801
|
let oafIndex = -1;
|
|
4736
4802
|
let nafIndex = -1;
|
|
4737
4803
|
if (treeConfig) {
|
|
@@ -4769,18 +4835,19 @@ const Methods = {
|
|
|
4769
4835
|
if (!(treeConfig && transform)) {
|
|
4770
4836
|
$xeTable.updateAfterDataIndex();
|
|
4771
4837
|
}
|
|
4772
|
-
$xeTable.updateFooter();
|
|
4773
4838
|
$xeTable.checkSelectionStatus();
|
|
4774
4839
|
if (reactData.scrollYLoad) {
|
|
4775
4840
|
$xeTable.updateScrollYSpace();
|
|
4776
4841
|
}
|
|
4777
4842
|
$xeTable.$nextTick().then(() => {
|
|
4778
4843
|
$xeTable.updateCellAreas();
|
|
4779
|
-
|
|
4844
|
+
$xeTable.recalculate();
|
|
4780
4845
|
});
|
|
4781
4846
|
$xeTable.dispatchEvent('row-dragend', {
|
|
4782
4847
|
oldRow: dragRow,
|
|
4783
4848
|
newRow: prevDragRow,
|
|
4849
|
+
dragPos: prevDragPos,
|
|
4850
|
+
offsetIndex: dragOffsetIndex,
|
|
4784
4851
|
_index: {
|
|
4785
4852
|
newIndex: nafIndex,
|
|
4786
4853
|
oldIndex: oafIndex
|
|
@@ -4790,10 +4857,10 @@ const Methods = {
|
|
|
4790
4857
|
});
|
|
4791
4858
|
}
|
|
4792
4859
|
}
|
|
4793
|
-
|
|
4860
|
+
hideDropTip($xeTable);
|
|
4794
4861
|
clearRowDropOrigin($xeTable);
|
|
4795
|
-
clearRowDropTarget($xeTable);
|
|
4796
4862
|
reactData.dragRow = null;
|
|
4863
|
+
reactData.dragCol = null;
|
|
4797
4864
|
setTimeout(() => {
|
|
4798
4865
|
reactData.isDragRowMove = false;
|
|
4799
4866
|
}, 500);
|
|
@@ -4802,50 +4869,57 @@ const Methods = {
|
|
|
4802
4869
|
const $xeTable = this;
|
|
4803
4870
|
const internalData = $xeTable;
|
|
4804
4871
|
const reactData = $xeTable;
|
|
4872
|
+
const { dragRow } = reactData;
|
|
4873
|
+
if (!dragRow) {
|
|
4874
|
+
evnt.preventDefault();
|
|
4875
|
+
return;
|
|
4876
|
+
}
|
|
4805
4877
|
const trEl = evnt.currentTarget;
|
|
4806
4878
|
const rowid = trEl.getAttribute('rowid');
|
|
4807
4879
|
const row = $xeTable.getRowById(rowid);
|
|
4808
|
-
clearRowDropTarget($xeTable);
|
|
4809
4880
|
if (row) {
|
|
4810
4881
|
evnt.preventDefault();
|
|
4811
4882
|
evnt.preventDefault();
|
|
4812
4883
|
const { dragRow } = reactData;
|
|
4813
4884
|
const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
|
|
4814
4885
|
const dragPos = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
|
|
4815
|
-
updateRowDropTarget($xeTable, row, dragPos);
|
|
4816
4886
|
internalData.prevDragRow = row;
|
|
4817
4887
|
internalData.prevDragPos = dragPos;
|
|
4888
|
+
showDropTip($xeTable, evnt, trEl, null, dragPos);
|
|
4818
4889
|
$xeTable.dispatchEvent('row-dragover', {
|
|
4819
4890
|
oldRow: dragRow,
|
|
4820
4891
|
targetRow: row,
|
|
4821
4892
|
dragPos
|
|
4822
4893
|
}, evnt);
|
|
4823
4894
|
}
|
|
4824
|
-
showRowDropTip(evnt, $xeTable);
|
|
4825
4895
|
},
|
|
4826
4896
|
handleCellDragMousedownEvent(evnt, params) {
|
|
4827
4897
|
var _a;
|
|
4828
4898
|
const $xeTable = this;
|
|
4899
|
+
const props = $xeTable;
|
|
4829
4900
|
const reactData = $xeTable;
|
|
4830
4901
|
evnt.stopPropagation();
|
|
4831
|
-
const
|
|
4832
|
-
const
|
|
4902
|
+
const { dragConfig } = props;
|
|
4903
|
+
const rowDragOpts = $xeTable.computeRowDragOpts;
|
|
4904
|
+
const { dragStartMethod } = rowDragOpts;
|
|
4833
4905
|
const { row } = params;
|
|
4834
4906
|
const dragEl = evnt.currentTarget;
|
|
4835
|
-
const tdEl = (_a = dragEl.
|
|
4836
|
-
const trEl = tdEl.
|
|
4907
|
+
const tdEl = (_a = dragEl.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
|
|
4908
|
+
const trEl = tdEl.parentElement;
|
|
4909
|
+
const dStartMethod = dragStartMethod || (dragConfig ? dragConfig.dragStartMethod : null);
|
|
4837
4910
|
reactData.isDragRowMove = false;
|
|
4838
4911
|
clearRowDropOrigin($xeTable);
|
|
4839
|
-
if (
|
|
4912
|
+
if (dStartMethod && !dStartMethod(params)) {
|
|
4840
4913
|
trEl.draggable = false;
|
|
4841
4914
|
reactData.dragRow = null;
|
|
4842
|
-
|
|
4915
|
+
reactData.dragCol = null;
|
|
4916
|
+
hideDropTip($xeTable);
|
|
4843
4917
|
return;
|
|
4844
4918
|
}
|
|
4845
4919
|
reactData.dragRow = row;
|
|
4920
|
+
reactData.dragCol = null;
|
|
4846
4921
|
trEl.draggable = true;
|
|
4847
4922
|
updateRowDropOrigin($xeTable, row);
|
|
4848
|
-
showRowDropTip(evnt, $xeTable);
|
|
4849
4923
|
updateRowDropTipContent($xeTable, tdEl);
|
|
4850
4924
|
$xeTable.dispatchEvent('row-dragstart', params, evnt);
|
|
4851
4925
|
},
|
|
@@ -4853,10 +4927,162 @@ const Methods = {
|
|
|
4853
4927
|
const $xeTable = this;
|
|
4854
4928
|
const reactData = $xeTable;
|
|
4855
4929
|
clearRowDropOrigin($xeTable);
|
|
4856
|
-
|
|
4930
|
+
hideDropTip($xeTable);
|
|
4857
4931
|
reactData.dragRow = null;
|
|
4932
|
+
reactData.dragCol = null;
|
|
4858
4933
|
reactData.isDragRowMove = false;
|
|
4859
4934
|
},
|
|
4935
|
+
/**
|
|
4936
|
+
* 列拖拽
|
|
4937
|
+
*/
|
|
4938
|
+
handleHeaderCellDragDragstartEvent(evnt) {
|
|
4939
|
+
const img = new Image();
|
|
4940
|
+
if (evnt.dataTransfer) {
|
|
4941
|
+
evnt.dataTransfer.setDragImage(img, 0, 0);
|
|
4942
|
+
}
|
|
4943
|
+
},
|
|
4944
|
+
handleHeaderCellDragDragendEvent(evnt) {
|
|
4945
|
+
const $xeTable = this;
|
|
4946
|
+
const props = $xeTable;
|
|
4947
|
+
const reactData = $xeTable;
|
|
4948
|
+
const internalData = $xeTable;
|
|
4949
|
+
const { mouseConfig } = props;
|
|
4950
|
+
const columnDragOpts = $xeTable.computeColumnDragOpts;
|
|
4951
|
+
const { dragEndMethod } = columnDragOpts;
|
|
4952
|
+
const { dragCol } = reactData;
|
|
4953
|
+
const { collectColumn, prevDragCol, prevDragPos } = internalData;
|
|
4954
|
+
const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0;
|
|
4955
|
+
if (prevDragCol && dragCol) {
|
|
4956
|
+
// 判断是否有拖动
|
|
4957
|
+
if (prevDragCol !== dragCol) {
|
|
4958
|
+
Promise.resolve(dragEndMethod
|
|
4959
|
+
? dragEndMethod({
|
|
4960
|
+
oldColumn: dragCol,
|
|
4961
|
+
newColumn: prevDragCol,
|
|
4962
|
+
dragPos: prevDragPos,
|
|
4963
|
+
offsetIndex: dragOffsetIndex
|
|
4964
|
+
})
|
|
4965
|
+
: true).then((status) => {
|
|
4966
|
+
if (!status) {
|
|
4967
|
+
return;
|
|
4968
|
+
}
|
|
4969
|
+
XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
|
|
4970
|
+
if (!parent) {
|
|
4971
|
+
const sortIndex = index + 1;
|
|
4972
|
+
column.renderSortNumber = sortIndex;
|
|
4973
|
+
}
|
|
4974
|
+
});
|
|
4975
|
+
const oafIndex = XEUtils.findIndexOf(collectColumn, item => item.id === dragCol.id);
|
|
4976
|
+
const nafIndex = XEUtils.findIndexOf(collectColumn, item => item.id === prevDragCol.id) + dragOffsetIndex;
|
|
4977
|
+
const newTargetCol = collectColumn[nafIndex];
|
|
4978
|
+
if (newTargetCol) {
|
|
4979
|
+
// 插入最后位置
|
|
4980
|
+
dragCol.renderSortNumber = newTargetCol.renderSortNumber;
|
|
4981
|
+
newTargetCol.renderSortNumber = dragCol.renderSortNumber + 0.5;
|
|
4982
|
+
}
|
|
4983
|
+
else {
|
|
4984
|
+
// 插入新位置
|
|
4985
|
+
dragCol.renderSortNumber = collectColumn.length + 1.5;
|
|
4986
|
+
}
|
|
4987
|
+
reactData.isDragColMove = true;
|
|
4988
|
+
if (mouseConfig) {
|
|
4989
|
+
if ($xeTable.clearSelected) {
|
|
4990
|
+
$xeTable.clearSelected();
|
|
4991
|
+
}
|
|
4992
|
+
if ($xeTable.clearCellAreas) {
|
|
4993
|
+
$xeTable.clearCellAreas();
|
|
4994
|
+
$xeTable.clearCopyCellArea();
|
|
4995
|
+
}
|
|
4996
|
+
}
|
|
4997
|
+
$xeTable.analyColumnWidth();
|
|
4998
|
+
$xeTable.$nextTick().then(() => {
|
|
4999
|
+
$xeTable.updateCellAreas();
|
|
5000
|
+
$xeTable.refreshColumn(true);
|
|
5001
|
+
});
|
|
5002
|
+
$xeTable.dispatchEvent('column-dragend', {
|
|
5003
|
+
oldColumn: dragCol,
|
|
5004
|
+
newColumn: prevDragCol,
|
|
5005
|
+
dragPos: prevDragPos,
|
|
5006
|
+
offsetIndex: dragOffsetIndex,
|
|
5007
|
+
_index: {
|
|
5008
|
+
newIndex: nafIndex,
|
|
5009
|
+
oldIndex: oafIndex
|
|
5010
|
+
}
|
|
5011
|
+
}, evnt);
|
|
5012
|
+
}).catch(() => {
|
|
5013
|
+
});
|
|
5014
|
+
}
|
|
5015
|
+
}
|
|
5016
|
+
hideDropTip($xeTable);
|
|
5017
|
+
clearColDropOrigin($xeTable);
|
|
5018
|
+
reactData.dragRow = null;
|
|
5019
|
+
reactData.dragCol = null;
|
|
5020
|
+
setTimeout(() => {
|
|
5021
|
+
reactData.isDragColMove = false;
|
|
5022
|
+
}, 500);
|
|
5023
|
+
},
|
|
5024
|
+
handleHeaderCellDragDragoverEvent(evnt) {
|
|
5025
|
+
const $xeTable = this;
|
|
5026
|
+
const reactData = $xeTable;
|
|
5027
|
+
const internalData = $xeTable;
|
|
5028
|
+
const { dragCol } = reactData;
|
|
5029
|
+
if (!dragCol) {
|
|
5030
|
+
evnt.preventDefault();
|
|
5031
|
+
return;
|
|
5032
|
+
}
|
|
5033
|
+
const thEl = evnt.currentTarget;
|
|
5034
|
+
const colid = thEl.getAttribute('colid');
|
|
5035
|
+
const column = $xeTable.getColumnById(colid);
|
|
5036
|
+
if (column) {
|
|
5037
|
+
evnt.preventDefault();
|
|
5038
|
+
const { dragCol } = reactData;
|
|
5039
|
+
const offsetX = evnt.clientX - thEl.getBoundingClientRect().x;
|
|
5040
|
+
const dragPos = offsetX < thEl.clientWidth / 2 ? 'left' : 'right';
|
|
5041
|
+
internalData.prevDragCol = column;
|
|
5042
|
+
internalData.prevDragPos = dragPos;
|
|
5043
|
+
showDropTip($xeTable, evnt, null, thEl, dragPos);
|
|
5044
|
+
$xeTable.dispatchEvent('column-dragover', {
|
|
5045
|
+
oldColumn: dragCol,
|
|
5046
|
+
targetColumn: column,
|
|
5047
|
+
dragPos
|
|
5048
|
+
}, evnt);
|
|
5049
|
+
}
|
|
5050
|
+
},
|
|
5051
|
+
handleHeaderCellDragMousedownEvent(evnt, params) {
|
|
5052
|
+
var _a;
|
|
5053
|
+
const $xeTable = this;
|
|
5054
|
+
const reactData = $xeTable;
|
|
5055
|
+
evnt.stopPropagation();
|
|
5056
|
+
const columnDragOpts = $xeTable.computeColumnDragOpts;
|
|
5057
|
+
const { dragStartMethod } = columnDragOpts;
|
|
5058
|
+
const { column } = params;
|
|
5059
|
+
const dragEl = evnt.currentTarget;
|
|
5060
|
+
const thEl = (_a = dragEl.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
|
|
5061
|
+
reactData.isDragColMove = false;
|
|
5062
|
+
clearColDropOrigin($xeTable);
|
|
5063
|
+
if (dragStartMethod && !dragStartMethod(params)) {
|
|
5064
|
+
thEl.draggable = false;
|
|
5065
|
+
reactData.dragRow = null;
|
|
5066
|
+
reactData.dragCol = null;
|
|
5067
|
+
hideDropTip($xeTable);
|
|
5068
|
+
return;
|
|
5069
|
+
}
|
|
5070
|
+
reactData.dragCol = column;
|
|
5071
|
+
reactData.dragRow = null;
|
|
5072
|
+
thEl.draggable = true;
|
|
5073
|
+
updateColDropOrigin($xeTable, column);
|
|
5074
|
+
updateColDropTipContent($xeTable, thEl);
|
|
5075
|
+
$xeTable.dispatchEvent('column-dragstart', params, evnt);
|
|
5076
|
+
},
|
|
5077
|
+
handleHeaderCellDragMouseupEvent() {
|
|
5078
|
+
const $xeTable = this;
|
|
5079
|
+
const reactData = $xeTable;
|
|
5080
|
+
clearColDropOrigin($xeTable);
|
|
5081
|
+
hideDropTip($xeTable);
|
|
5082
|
+
reactData.dragRow = null;
|
|
5083
|
+
reactData.dragCol = null;
|
|
5084
|
+
reactData.isDragColMove = false;
|
|
5085
|
+
},
|
|
4860
5086
|
setPendingRow(rows, status) {
|
|
4861
5087
|
const pendingMaps = Object.assign({}, this.pendingRowMaps);
|
|
4862
5088
|
const pendingList = [...this.pendingRowList];
|
|
@@ -6334,8 +6560,8 @@ const Methods = {
|
|
|
6334
6560
|
}
|
|
6335
6561
|
},
|
|
6336
6562
|
updateCellAreas() {
|
|
6337
|
-
if (this.mouseConfig && this.mouseOpts.area && this.
|
|
6338
|
-
return this.
|
|
6563
|
+
if (this.mouseConfig && this.mouseOpts.area && this.handleRecalculateCellAreas) {
|
|
6564
|
+
return this.handleRecalculateCellAreas();
|
|
6339
6565
|
}
|
|
6340
6566
|
return this.$nextTick();
|
|
6341
6567
|
},
|
|
@@ -6396,7 +6622,7 @@ const Methods = {
|
|
|
6396
6622
|
}
|
|
6397
6623
|
};
|
|
6398
6624
|
// Module methods
|
|
6399
|
-
const funcs = 'setFilter,openFilter,clearFilter,getCheckedFilters,updateFilterOptionStatus,closeMenu,setActiveCellArea,getActiveCellArea,getCellAreas,clearCellAreas,copyCellArea,cutCellArea,pasteCellArea,getCopyCellArea,getCopyCellAreas,clearCopyCellArea,setCellAreas,openFNR,openFind,openReplace,closeFNR,getSelectedCell,clearSelected,insert,insertAt,insertNextAt,remove,removeCheckboxRow,removeRadioRow,removeCurrentRow,getRecordset,getInsertRecords,getRemoveRecords,getUpdateRecords,clearEdit,clearActived,getEditRecord,getActiveRecord,isEditByRow,isActiveByRow,setEditRow,setActiveRow,setEditCell,setActiveCell,setSelectCell,clearValidate,fullValidate,validate,openExport,closeExport,openPrint,closePrint,getPrintHtml,exportData,openImport,closeImport,importData,saveFile,readFile,importByFile,print,openCustom,closeCustom,saveCustom,cancelCustom,resetCustom,toggleCustomAllCheckbox,setCustomAllCheckbox'.split(',');
|
|
6625
|
+
const funcs = 'setFilter,openFilter,clearFilter,getCheckedFilters,updateFilterOptionStatus,closeMenu,setActiveCellArea,getActiveCellArea,getCellAreas,clearCellAreas,copyCellArea,cutCellArea,pasteCellArea,getCopyCellArea,getCopyCellAreas,clearCopyCellArea,setCellAreas,openFNR,openFind,openReplace,closeFNR,getSelectedCell,clearSelected,insert,insertAt,insertNextAt,remove,removeCheckboxRow,removeRadioRow,removeCurrentRow,getRecordset,getInsertRecords,getRemoveRecords,getUpdateRecords,clearEdit,clearActived,getEditRecord,getActiveRecord,isEditByRow,isActiveByRow,setEditRow,setActiveRow,setEditCell,setActiveCell,setSelectCell,clearValidate,fullValidate,validate,fullValidateField,validateField,openExport,closeExport,openPrint,closePrint,getPrintHtml,exportData,openImport,closeImport,importData,saveFile,readFile,importByFile,print,openCustom,closeCustom,saveCustom,cancelCustom,resetCustom,toggleCustomAllCheckbox,setCustomAllCheckbox'.split(',');
|
|
6400
6626
|
funcs.forEach(name => {
|
|
6401
6627
|
Methods[name] = function (...args) {
|
|
6402
6628
|
if (process.env.NODE_ENV === 'development') {
|
package/es/table/src/props.js
CHANGED
|
@@ -159,8 +159,12 @@ export default {
|
|
|
159
159
|
cellConfig: Object,
|
|
160
160
|
// 行配置信息
|
|
161
161
|
rowConfig: Object,
|
|
162
|
-
//
|
|
162
|
+
// 已废弃,被 rowDragConfig 替换
|
|
163
163
|
dragConfig: Object,
|
|
164
|
+
// 行拖拽排序配置项
|
|
165
|
+
rowDragConfig: Object,
|
|
166
|
+
// 列拖拽排序配置项
|
|
167
|
+
columnDragConfig: Object,
|
|
164
168
|
// 列调整配置项
|
|
165
169
|
resizableConfig: Object,
|
|
166
170
|
// 序号配置项
|