innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

解决拖拽列宽和交换列的共存问题

This commit is contained in:
jonyshi 2018-11-13 18:50:50 +08:00
parent 02f26141a5
commit b8e777ae2c
2 changed files with 208 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
demo/demolist/Demo23.js
View File

@ -14,13 +14,13 @@ const columns23 = [
title: "名字", title: "名字",
dataIndex: "a", dataIndex: "a",
key: "a", key: "a",
width: '100' width: '200'
}, },
{ {
title: "性别", title: "性别",
dataIndex: "b", dataIndex: "b",
key: "b", key: "b",
width: '200' width: '100'
}, },
{ {
title: "年龄", title: "年龄",
@ -59,6 +59,7 @@ class Demo23 extends Component {
render() { render() {
return <DragColumnTable columns={columns23} data={data23} bordered return <DragColumnTable columns={columns23} data={data23} bordered
dragborder={true} dragborder={true}
draggable={false}
/>; />;
} }
} }

293
src/TableHeader.js
View File

@ -18,7 +18,11 @@ class TableHeader extends Component {
super(props); super(props);
this.currentObj = null; this.currentObj = null;
this.state = { this.state = {
border: false border: false,
dragAbleOrBord:props.draggable?"able":"", //border 拖拽列宽，able 交换列,
dragAbleOrBordStart:"", // borderStart 开始拖拽宽度 ableStart 开始交换列
// draggable:props.draggable?props.draggable:false,
}; };
//拖拽宽度处理 //拖拽宽度处理
if (!props.dragborder) return; if (!props.dragborder) return;
@ -47,11 +51,26 @@ class TableHeader extends Component {
contentWidthDiff: 0 contentWidthDiff: 0
}; };
shouldComponentUpdate(nextProps) { componentWillReceiveProps(nextProps){
return !shallowequal(nextProps, this.props); if(this.props.draggable != nextProps.draggable){
this.setState({
dragAbleOrBord:nextProps.draggable?"able":"", //border 拖拽列宽，able 交换列
// draggable:nextProps.draggable,
})
}
if(this.props.dragborder != nextProps.dragborder){
this.setState({
dragAbleOrBord:nextProps.dragborder?"border":"", //border 拖拽列宽，able 交换列
})
}
} }
onDragStart = (event, data) => { // shouldComponentUpdate(nextProps) {
// return !shallowequal(nextProps, this.props);
// }
onDragStart = (event, data) => {
event.dataTransfer.effectAllowed = "move"; event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", data.key); event.dataTransfer.setData("Text", data.key);
this.currentObj = data; this.currentObj = data;
@ -60,6 +79,10 @@ class TableHeader extends Component {
}; };
onDragOver = (event, data) => { onDragOver = (event, data) => {
const {dragAbleOrBordStart} = this.state;
this.setState({
dragAbleOrBordStart:""
})
if (!this.currentObj || this.currentObj.key == data.key) return; if (!this.currentObj || this.currentObj.key == data.key) return;
event.preventDefault(); event.preventDefault();
this.props.onDragOver(event, data); this.props.onDragOver(event, data);
@ -82,7 +105,23 @@ class TableHeader extends Component {
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`; event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
}; };
ableOnMouseMove = (event, data) => {
let {dragAbleOrBord} = this.state;
if(dragAbleOrBord === "borderStart" || dragAbleOrBord === "ableStart")return;
if(dragAbleOrBord === "able")return;
this.setState({
dragAbleOrBord:"able"
})
};
onMouseMove = (event, data) => { onMouseMove = (event, data) => {
let {dragAbleOrBord} = this.state;
if(dragAbleOrBord === "borderStart" || dragAbleOrBord === "ableStart")return;
if(dragAbleOrBord != "border"){
this.setState({
dragAbleOrBord:"border"
})
}
//如果是固定列没有拖拽功能 //如果是固定列没有拖拽功能
if (this.border || data.fixed) return; if (this.border || data.fixed) return;
// const {clsPrefix} = this.props; // const {clsPrefix} = this.props;
@ -94,6 +133,11 @@ class TableHeader extends Component {
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`; event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
}; };
onMouseDown = (event, data) => { onMouseDown = (event, data) => {
let {dragAbleOrBord,dragAbleOrBordStart} = this.state;
this.setState({
dragAbleOrBordStart:dragAbleOrBord==="border"?"borderStart":"",
})
// console.log("-改变宽-----度--",dragAbleOrBordStart);
this.border = true; this.border = true;
const { clsPrefix, contentTable } = this.props; const { clsPrefix, contentTable } = this.props;
this.drag.initPageLeftX = event.pageX; this.drag.initPageLeftX = event.pageX;
@ -123,6 +167,9 @@ class TableHeader extends Component {
} }
}; };
onMouseUp = (event, data) => { onMouseUp = (event, data) => {
this.setState({
dragAbleOrBordStart:""
})
this.border = false; this.border = false;
const { clsPrefix } = this.props; const { clsPrefix } = this.props;
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`; event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
@ -334,6 +381,7 @@ class TableHeader extends Component {
}; };
render() { render() {
const {dragAbleOrBord,dragAbleOrBordStart} = this.state;
const { const {
clsPrefix, clsPrefix,
rowStyle, rowStyle,
@ -341,19 +389,20 @@ class TableHeader extends Component {
onDragOver, onDragOver,
onDrop, onDrop,
draggable, draggable,
dragborder,
rows, rows,
filterable, filterable,
onFilterRowsChange, onFilterRowsChange,
onMouseDown, onMouseDown,
onMouseMove, onMouseMove,
onMouseUp, onMouseUp,
dragborder,
onMouseOut, onMouseOut,
contentWidthDiff, contentWidthDiff,
fixed, fixed,
lastShowIndex lastShowIndex
} = this.props; } = this.props;
let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {}; let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {};
return ( return (
<thead className={`${clsPrefix}-thead`} {...attr}> <thead className={`${clsPrefix}-thead`} {...attr}>
{rows.map((row, index) => ( {rows.map((row, index) => (
@ -391,90 +440,158 @@ class TableHeader extends Component {
); );
delete da.filterdropdownfocus; delete da.filterdropdownfocus;
} }
if (draggable) {
return ( let thAbleObj = {},thBorObj = {},thDefaultObj = {},thLineObj = {};
<th let thClassName = `${da.className}`;
{...da} if (draggable || dragborder) {
onDragStart={event => { if (draggable && dragAbleOrBordStart != "borderStart") {
this.onDragStart(event, da); thAbleObj = {
}} ...da,
onDragOver={event => { onDragStart:(e)=>{this.onDragStart(e, da)},
this.onDragOver(event, da); onDragOver:(e)=>{this.onDragOver(e, da)},
}} onDrop:(e)=>{this.onDrop(e, da)},
onDrop={event => { onDragEnter:(e)=>{this.onDragEnter(e, da)},
this.onDrop(event, da); onMouseMove:(e)=>{this.ableOnMouseMove(e, da)},
}} onMouseDown:(e)=>{
onDragEnter={event => { let {dragAbleOrBord,dragAbleOrBordStart} = this.state;
this.onDragEnter(event, da); this.setState({
}} dragAbleOrBordStart:dragAbleOrBord==="able"?"ableStart":""
draggable={draggable} })
className={`${ },
da.className draggable:draggable,
} ${clsPrefix}-thead th-drag ${thHover} ${fixedStyle}`} // className:thObj.className+`${clsPrefix}-thead th-drag ${thHover}`,
key={da.key} key:da.key
/> };
); thClassName += `${clsPrefix}-thead th-drag ${thHover} `;
} else if (dragborder) { }
return ( // if (dragborder && dragAbleOrBord === "border") {
<th if (dragborder && dragAbleOrBordStart != "ableStart") {
style={{ width: da.width }} thBorObj.style={'width': da.width }
onMouseMove={event => { // thObj.className= thObj.className+`${clsPrefix}-thead-th ${canDotDrag}`,
this.onThMouseMove(event, da); thBorObj.onMouseMove = (e)=>{
}} if(draggable){
onMouseUp={event => { this.ableOnMouseMove(e, da)
this.onThMouseUp(event, da); }
}} this.onThMouseMove(e, da)
className={`${ }
da.className thBorObj.onMouseUp = (e)=>{this.onThMouseUp(e, da)}
} ${clsPrefix}-thead-th ${canDotDrag} ${fixedStyle}`}
key={i} thClassName += `${clsPrefix}-thead-th ${canDotDrag}`;
> thBorObj.style= { width: da.width }
{da.children} // key:i
{da.fixed ? ( }
"" // thObj.className = thObj.className+`${fixedStyle}`;
) : ( thClassName += `${fixedStyle}`;
<div if(!da.fixed){
ref={el => (this.gap = el)} thLineObj = {
onMouseMove={event => { onMouseMove:(e)=>{ e.stopPropagation();this.onMouseMove(e, da)},
this.onMouseMove(event, da); onMouseOut:(e)=>{this.onMouseOut(e, da)},
}} onMouseDown:(e)=>{ e.stopPropagation();this.onMouseDown(e, da)},
onMouseOut={event => { onMouseUp:(e)=>{this.onMouseUp(e, da)},
this.onMouseOut(event, da); onMouseOver:(e)=>{this.onMouseOver(e, da)},
}} className:`${clsPrefix}-thead-th-drag-gap `,
onMouseDown={event => { };
this.onMouseDown(event, da); }
}} return (<th key={Math.random()} {...thAbleObj} {...thBorObj} className={thClassName} >
onMouseUp={event => { {da.children}
this.onMouseUp(event, da); {
}} da.fixed ? "":<div ref={el => (this.gap = el)} {...thLineObj} />
onMouseOver={event => { }
this.onMouseOver(event, da); </th>)
}} }else{
className={`${clsPrefix}-thead-th-drag-gap `} thDefaultObj = {
/> ...da,
)} className:`${da.className} ${fixedStyle}`,
</th> key:i
); };
} else { da.onClick ?thDefaultObj.onClick = (e)=>{da.onClick(da, e)}:"";
let th; return (<th {...thDefaultObj} />)
th = da.onClick ? (
<th
{...da}
className={`${da.className} ${fixedStyle}`}
key={i}
onClick={event => {
da.onClick(da, event);
}}
/>
) : (
<th
{...da}
key={i}
className={`${da.className} ${fixedStyle}`}
/>
);
return th;
} }
// if (draggable) {
// return (
// <th
// {...da}
// onDragStart={event => {
// this.onDragStart(event, da);
// }}
// onDragOver={event => {
// this.onDragOver(event, da);
// }}
// onDrop={event => {
// this.onDrop(event, da);
// }}
// onDragEnter={event => {
// this.onDragEnter(event, da);
// }}
// draggable={draggable}
// className={`${
// da.className
// } ${clsPrefix}-thead th-drag ${thHover} ${fixedStyle}`}
// key={da.key}
// />
// );
// } else if (dragborder) {
// return (
// <th
// style={{ width: da.width }}
// onMouseMove={event => {
// this.onThMouseMove(event, da);
// }}
// onMouseUp={event => {
// this.onThMouseUp(event, da);
// }}
// className={`${
// da.className
// } ${clsPrefix}-thead-th ${canDotDrag} ${fixedStyle}`}
// key={i}
// >
// {da.children}
// {da.fixed ? (
// ""
// ) : (
// <div
// ref={el => (this.gap = el)}
// onMouseMove={event => {
// this.onMouseMove(event, da);
// }}
// onMouseOut={event => {
// this.onMouseOut(event, da);
// }}
// onMouseDown={event => {
// this.onMouseDown(event, da);
// }}
// onMouseUp={event => {
// this.onMouseUp(event, da);
// }}
// onMouseOver={event => {
// this.onMouseOver(event, da);
// }}
// className={`${clsPrefix}-thead-th-drag-gap `}
// />
// )}
// </th>
// );
// } else {
// let th;
// th = da.onClick ? (
// <th
// {...da}
// className={`${da.className} ${fixedStyle}`}
// key={i}
// onClick={event => {
// da.onClick(da, event);
// }}
// />
// ) : (
// <th
// {...da}
// key={i}
// className={`${da.className} ${fixedStyle}`}
// />
// );
// return th;
// }
})} })}
</tr> </tr>
))} ))}