New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Table支持拖拽改变列宽 #2776
Comments
也正好也需要这个,不知是否可以提供解决办法。 |
我们的方案 import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
import './index.scss';
@Directive({
selector: '[tableResizable]',
})
export class TableResizableDirective implements AfterViewInit {
@Input('tableResizable') columnWidths: string[];
@Input() usePixel = false;
constructor(private $element: ElementRef<HTMLTableElement>) {}
ngAfterViewInit() {
const el = (() => {
let result = this.$element.nativeElement;
if (result.tagName === 'NZ-TABLE') {
result = result.querySelector('table');
}
if (result.tagName !== 'TABLE') throw new TypeError('Must be a TABLE element');
if (!result.tHead) throw new TypeError('Must have a THEAD element');
return result;
})();
el.classList.add('table-resizable');
const tr = el.tHead.rows[0];
if (!tr) throw new TypeError('Must have at least one TR element inside THEAD element');
setTimeout(() => {
const ths = Array.from(tr.cells) as HTMLTableHeaderCellElement[];
if (ths.length <= 1) return;
--ths.length; // 最后一个方格总是自动列宽的(用于占满整行)
if (!Array.isArray(this.columnWidths)) {
this.columnWidths = new Array(ths.length).fill('');
} else {
this.columnWidths.length = ths.length;
this.columnWidths.forEach((x, i, arr) => {
if (!x) arr[i] = '';
});
}
ths.forEach(th => {
if (th.classList.contains('no-resize')) return;
if (this.columnWidths[th.cellIndex]) {
th.width = this.columnWidths[th.cellIndex];
}
const i = document.createElement('i');
i.classList.add('resize-indicator');
th.appendChild(i);
i.addEventListener('mousedown', e => {
if (e.button === 1) { // 鼠标中键
th.width = '';
return;
}
if (e.button !== 0) return;
const startX = e.pageX;
const startThWidth = th.clientWidth;
document.body.classList.add('table-resizing');
let mousemoveHandler;
document.body.addEventListener('mousemove', mousemoveHandler = e => {
if (e.button !== 0) return;
const pixel = e.pageX - startX + startThWidth;
if (this.usePixel) {
th.width = pixel + '';
} else {
th.width = pixel / tr.offsetWidth * 100 + '%';
}
this.columnWidths[th.cellIndex] = th.width;
});
document.body.addEventListener('mouseup', e => {
if (e.button !== 0) return;
document.body.removeEventListener('mousemove', mousemoveHandler);
document.body.classList.remove('table-resizing');
}, { once: true });
});
});
});
}
} // index.scss
.table-resizable th {
position: relative;
}
body.table-resizing {
cursor: col-resize !important;
user-select: none;
}
.resize-indicator {
display: block;
position: absolute;
top: 0;
right: -5px;
width: 9px;
height: 100%;
cursor: col-resize;
} 用法: <nz-table
[tableResizable]></nz-table> 效果: |
@CarterLi 你好 ,这个Directive我放到我的nz-table没有反应,有什么注意事项吗?那两个input需要怎么设置? |
先确定directive的代码有没有执行,i标签有没有生成,自己调试一下,代码总共也没几行 |
@CarterLi 谢谢回答,因为CSS没加载对,谢谢 |
I know the same feature was rejected in #946 (#946). However, ant design now supports it (column resizable) @vthinkxie I wish NG-ZORRO can support it soon, although there is a workaround. |
我试了也没反应,到console 中查看在 th内没有生成 。你是如何解决的?有必要的话:QQ = 409223171 |
@chanchaw 看看样式路径是否加载对 |
我的项目放到 stackblitz 上了:https://stackblitz.com/github/chanchaw/zorroFormLayout
你看左侧导航栏对的第三个:表格组件换行问题
…------------------ 原始邮件 ------------------
发件人: "luver225"<notifications@github.com>;
发送时间: 2019年7月16日(星期二) 下午4:02
收件人: "NG-ZORRO/ng-zorro-antd"<ng-zorro-antd@noreply.github.com>;
抄送: "葬天尘"<409223171@qq.com>; "Mention"<mention@noreply.github.com>;
主题: Re: [NG-ZORRO/ng-zorro-antd] Table支持拖拽改变列宽 (#2776)
@chanchaw 看看样式路径是否加载对
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
我的项目放到 stackblitz 上了:https://stackblitz.com/github/chanchaw/zorroFormLayout |
tableResizable 换 [tableResizable],然后自己慢慢调吧 |
调整好了,没有报错,但是打开还是没有效果。能再帮忙看看么?我重新 commit 了,你 stackblitz 那个要重新打开了 |
@chanchaw 缺少在app.module.ts中import TableResizableDirective组件 |
@luver225 我在组件临近的 module 中 import 了,这做不行的? |
调不出来... |
@luver225 你能把你的成功项目放到 stackblitz 上么? |
版本9 的拖拽改进解决方案
样式和上面的一样,但是在需要额外加一行
|
What problem does this feature solve?
由于多语言化需求,对于英文字符较长,列宽无法有效的设置,设置太长则页页不美观,太短,又无法显示完整,所以希望列宽可以支持拖拽改变。
What does the proposed API look like?
列宽可以支持拖拽改变
The text was updated successfully, but these errors were encountered: