From 7c5c52b98500aab1153db3829b75ae626f7f5989 Mon Sep 17 00:00:00 2001 From: jonyshi Date: Wed, 24 Apr 2019 11:31:06 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=20=E5=8D=95=E9=80=89radio=E6=A1=88?= =?UTF-8?q?=E4=BE=8B,=E8=A1=A8=E5=A4=B4=E8=BF=87=E6=BB=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/demolist/Demo1304.js | 72 +++++++++++++++++++++++++++++++++++++++ src/Table.scss | 4 +-- src/lib/filterColumn.js | 2 +- 3 files changed, 75 insertions(+), 3 deletions(-) create mode 100644 demo/demolist/Demo1304.js diff --git a/demo/demolist/Demo1304.js b/demo/demolist/Demo1304.js new file mode 100644 index 0000000..cb6160f --- /dev/null +++ b/demo/demolist/Demo1304.js @@ -0,0 +1,72 @@ +/** +* +* @title 表格单选，且选中行填充颜色 +* @parent 表格-单选-radio-行选中 +* @description 表格增加单选、radio 和背景色的示例。 +* Demo1304 +*/ + +import React, { Component } from "react"; +import {Button,Tooltip,Radio} from "tinper-bee"; + +import Table from "../../src"; + + + +const data = [ + { check: "ASVAL_201903280005",a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" }, + { check: "ASVAL_201903200004",a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" }, + { check: "ASVAL_201903120002",a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" } +]; + +class Demo1304 extends Component { + + constructor(props){ + super(props); + this.state = { + data: data, + selectedRowIndex: 0, + selectedValue:"ASVAL_201903200004" + } + } + + render() { + let {selectedValue} = this.state; + let columns = [ + { title: "单选", dataIndex: "check", key: "check", width: 80,render(text, record, index){ + return( + + + ) + }}, + { title: "员工编号", dataIndex: "a", key: "a", width: 300}, + { title: "员工姓名", dataIndex: "b", key: "b", width: 500 }, + { title: "性别", dataIndex: "c", key: "c", width: 500 }, + { title: "部门", dataIndex: "d", key: "d", width: 200 } + ]; + + return ( + { + if (this.state.selectedRowIndex == index) { + return 'selected'; + } else { + return ''; + } + }} + onRowClick={(record,index,indent)=>{ + this.setState({ + selectedRowIndex: index, + selectedValue:record.check + }); + }} + title={currentData =>
员工信息统计表
} + footer={currentData =>
合计: 共{data.length}条数据
} + /> + ); + } +} + +export default Demo1304; diff --git a/src/Table.scss b/src/Table.scss index a216f89..f72aee8 100644 --- a/src/Table.scss +++ b/src/Table.scss @@ -546,8 +546,8 @@ $icon-color:#505F79; &-filter-icon{ position: absolute; width: 30px; - height: 40px ; - line-height: 40px; + height: 39px ; + line-height: 39px; right: 0px ; top:1px ; z-index: 2; diff --git a/src/lib/filterColumn.js b/src/lib/filterColumn.js index b092cbc..05b1432 100644 --- a/src/lib/filterColumn.js +++ b/src/lib/filterColumn.js @@ -102,11 +102,11 @@ export default function filterColumn(Table, Popover) { this.checkedColumItemClick(da); } } - return (
From 0eaee06a5df7243a9a329a2200d834ee6254575d Mon Sep 17 00:00:00 2001 From: jonyshi Date: Thu, 25 Apr 2019 13:53:39 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=20=E5=A2=9E=E5=8A=A0=E8=A1=8C=E6=8B=96?= =?UTF-8?q?=E6=8B=BD=E4=BA=A4=E6=8D=A2=E9=A1=BA=E5=BA=8F,=E8=A1=A8?= =?UTF-8?q?=E5=A4=B4=E6=8B=96=E6=8B=BD=E4=BA=8B=E4=BB=B6=E5=A4=9A=E6=AC=A1?= =?UTF-8?q?=E7=BB=91=E5=AE=9A=E4=BC=98=E5=8C=96=20=E7=AD=89=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/demolist/Demo1201.js | 68 +++++++++++++++ docs/api.md | 2 + src/Table.js | 24 +++++- src/TableHeader.js | 20 +++-- src/TableRow.js | 174 ++++++++++++++++++++++++++++++++++++-- 5 files changed, 273 insertions(+), 15 deletions(-) create mode 100644 demo/demolist/Demo1201.js diff --git a/demo/demolist/Demo1201.js b/demo/demolist/Demo1201.js new file mode 100644 index 0000000..38f38f3 --- /dev/null +++ b/demo/demolist/Demo1201.js @@ -0,0 +1,68 @@ +/** +* +* @title 拖拽改变行顺序 +* @parent 拖拽改变行顺序 +* @description 拖拽改变行顺序 +* Demo1201 +*/ + +import React, { Component } from "react"; +import {Button,Tooltip} from "tinper-bee"; +import Table from "../../src"; + +const columns = [ + { + title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName", + fixed:'left', + render: (text, record, index) => { + return ( + + {text} + + ); + } + }, + { title: "员工姓名", dataIndex: "b", key: "b", width:200 }, + { title: "性别", dataIndex: "c", key: "c", width: 500 }, + { title: "部门", dataIndex: "d", key: "d", width: 100 }, + { title: "职级", dataIndex: "e", key: "e", width: 100,fixed:'right'} +]; + +const data = [ + { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1001" }, + { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "1002" }, + { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "1003" } +]; + +class Demo1201 extends Component { + + constructor(props) { + super(props); + this.state = { + data: data + } + } + handleClick = () => { + console.log('这是第' , this.currentIndex , '行'); + console.log('内容：' , this.currentRecord); + } + + render() { + return ( +
+ ); + } +} + +export default Demo1201; diff --git a/docs/api.md b/docs/api.md index 2e24cb1..7f16e7e 100644 --- a/docs/api.md +++ b/docs/api.md @@ -70,6 +70,8 @@ import 'bee-table/build/Table.css'; | height | 自定义表格行高 | number | - | | headerHeight | 自定义表头行高 | number | - | | size | 表格大小 | `sm | md | lg` | 'md' | +| rowDraggAble | 是否增加行交换顺序功能 | boolean| false + > 快捷键部分参考示例 (快捷键在table中的简单使用应用) diff --git a/src/Table.js b/src/Table.js index 06a9cbd..6482af9 100644 --- a/src/Table.js +++ b/src/Table.js @@ -54,6 +54,7 @@ const propTypes = { tabIndex:PropTypes.string, hoverContent:PropTypes.func, size: PropTypes.oneOf(['sm', 'md', 'lg']), + rowDraggAble: PropTypes.bool, }; const defaultProps = { @@ -88,7 +89,8 @@ const defaultProps = { setRowParentIndex:()=>{}, tabIndex:'0', heightConsistent:false, - size: 'md' + size: 'md', + rowDraggAble:false }; class Table extends Component { @@ -522,10 +524,25 @@ class Table extends Component { indent={1} expandable={false} store={this.store} - dragborderKey={this.props.dragborderKey} + dragborderKey={this.props.dragborderKey} + rowDraggAble={props.rowDraggAble} + onDragRow={this.onDragRow} /> ); } + + onDragRow = (currentIndex,targetIndex)=>{ + let {data} = this.state, + currentObj = data[currentIndex], + targetObj = data[targetIndex]; + console.log(currentIndex+" ----------onRowDragEnd-------- "+targetIndex); + data.splice(targetIndex, 0, data.splice(currentIndex, 1).shift()); + console.log(" _data---- ",data); + this.setState({ + data: data, + }); + } + /** * * @@ -660,6 +677,9 @@ class Table extends Component { rootIndex = {rootIndex} syncHover = {props.syncHover} bodyDisplayInRow = {props.bodyDisplayInRow} + rowDraggAble={props.rowDraggAble} + onDragRow={this.onDragRow} + contentTable={this.contentTable} /> ); this.treeRowIndex++; diff --git a/src/TableHeader.js b/src/TableHeader.js index 042dd4d..0e1c24e 100644 --- a/src/TableHeader.js +++ b/src/TableHeader.js @@ -30,6 +30,7 @@ class TableHeader extends Component { this.minWidth = 80;//确定最小宽度就是80 this.table = null; this._thead = null;//当前对象 + this.event = false;//避免多次绑定问题 } static defaultProps = { @@ -103,12 +104,20 @@ class TableHeader extends Component { * 事件初始化 */ initEvent(){ - this.dragBorderEventInit();//列宽 - this.dragAbleEventInit();//交换列 - if(this.table && this.table.tr){ - this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',this.table.tr[0]);//body mouseup + let {dragborder,draggable} = this.props; + if(!this.event){ //避免多次绑定问题。 + this.event = true; + if(dragborder){ + this.dragBorderEventInit();//列宽 + } + if(dragborder){ + this.dragAbleEventInit();//交换列 + } + if(this.table && this.table.tr){ + this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',this.table.tr[0]);//body mouseup + } + this.eventListen([{key:'mouseup',fun:this.bodyonLineMouseUp}],'',document.body);//body mouseup } - this.eventListen([{key:'mouseup',fun:this.bodyonLineMouseUp}],'',document.body);//body mouseup } /** @@ -398,6 +407,7 @@ class TableHeader extends Component { }; onDragOver = (e) => { + let event = Event.getEvent(e); event.preventDefault(); }; diff --git a/src/TableRow.js b/src/TableRow.js index dfdd98c..da6c2fc 100644 --- a/src/TableRow.js +++ b/src/TableRow.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { Event,EventUtil} from "./utils"; import TableCell from './TableCell'; import ExpandIcon from './ExpandIcon'; @@ -29,6 +30,8 @@ const propTypes = { expandIconAsCell: PropTypes.bool, expandRowByClick: PropTypes.bool, store: PropTypes.object.isRequired, + rowDraggAble: PropTypes.bool, + onDragRow: PropTypes.func, }; const defaultProps = { @@ -39,7 +42,9 @@ const defaultProps = { expandRowByClick: false, onHover() {}, className:'', - setRowParentIndex:()=>{} + setRowParentIndex:()=>{}, + rowDraggAble:false, + // onDragRow:()=>{} }; class TableRow extends Component{ @@ -54,11 +59,12 @@ class TableRow extends Component{ this.onMouseEnter = this.onMouseEnter.bind(this); this.onMouseLeave = this.onMouseLeave.bind(this); this.expandHeight = 0; + this.event = false; } componentDidMount() { - const { store, hoverKey,treeType } = this.props; + const { store, hoverKey,treeType,rowDraggAble } = this.props; this.unsubscribe = store.subscribe(() => { if (store.getState().currentHoverKey === hoverKey) { this.setState({ hovered: true }); @@ -71,23 +77,174 @@ class TableRow extends Component{ if(treeType){ this.setRowParentIndex(); } - - + } + + /** + * 事件初始化 + */ + initEvent=()=>{ + let events = [ + {key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发 + {key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件 + {key:'drop', fun:this.onDrop}, //在一个拖动过程中，释放鼠标键时触发此事件 + + {key:'dragenter', fun:this.onDragEnter}, + {key:'dragleave', fun:this.onDragLeave}, + ]; + this.eventListen(events,'',this.element); + } + + /** + * 事件移除，提供性能以及内存泄漏等问题。 + */ + removeDragAbleEvent=()=>{ + let events = [ + {key:'dragstart',fun:this.onDragStart}, + {key:'dragover', fun:this.onDragOver}, + {key:'drop', fun:this.onDrop}, + + {key:'dragenter', fun:this.onDragEnter}, + {key:'dragleave', fun:this.onDragLeave}, + ]; + this.eventListen(events,'remove',this.element); } + /** + * 事件绑定和移除函数 + */ + eventListen(events,type,eventSource){ + for (let i = 0; i < events.length; i++) { + const _event = events[i]; + if(type === "remove"){ + EventUtil.removeHandler(eventSource,_event.key,_event.fun); + }else{ + EventUtil.addHandler(eventSource,_event.key,_event.fun); + } + } + } + + /** + * 开始调整交换列的事件 + */ + onDragStart = (e) => { + if (!this.props.rowDraggAble) return; + let event = Event.getEvent(e) , + target = Event.getTarget(event); + this.currentIndex = target.getAttribute("data-row-key"); + this._dragCurrent = target; + event.dataTransfer.effectAllowed = "move"; + event.dataTransfer.setData("Text", this.currentIndex); + } + + onDragOver = (e) => { + let event = Event.getEvent(e); + event.preventDefault(); + }; + + /** + * 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】 + * @memberof TableHeader + */ + onDrop = (e) => { + let {rowDraggAble,onDragRow} = this.props; + let event = Event.getEvent(e) , + _target = Event.getTarget(event),target = _target.parentNode; + let currentIndex = target.getAttribute("data-row-key"); + if(!currentIndex || currentIndex === this.currentIndex)return; + if(target.nodeName.toUpperCase() === "TR"){ + this.synchronizeTableTr(this.currentIndex,null); + // target.setAttribute("style",""); + // this.synchronizeTrStyle(this.currentIndex,false); + } + let _currentIndex = event.dataTransfer.getData("text"); + onDragRow && onDragRow(parseInt(this.currentIndex--),parseInt(currentIndex--)); + }; + + /** + * 同步自己,也需要同步当前行的行显示 + */ + synchronizeTableTr = (currentIndex,type)=>{ + let {contentTable} = this.props; + let _table_trs = contentTable.querySelector('.u-table-scroll table tbody'), + _table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'), + _table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody'); + + this.synchronizeTrStyle(_table_trs,currentIndex,type); + if(_table_fixed_left_trs){ + this.synchronizeTrStyle(_table_fixed_left_trs,currentIndex,type); + } + if(_table_fixed_right_trs){ + this.synchronizeTrStyle(_table_fixed_right_trs,currentIndex,type); + } + } + + /** + * 设置同步的style + */ + synchronizeTrStyle = (_elementBody,id,type)=>{ + let {contentTable} = this.props, + trs = _elementBody.getElementsByTagName("tr"), + currentObj; + for (let index = 0; index < trs.length; index++) { + const element = trs[index]; + if(element.getAttribute("data-row-key") == id){ + currentObj = element; + } + } + if(type){ + currentObj && currentObj.setAttribute("style","border-bottom:2px dashed rgba(5,0,0,0.25)"); + }else{ + currentObj && currentObj.setAttribute("style",""); + } + } + + onDragEnter = (e) => { + let event = Event.getEvent(e) , + _target = Event.getTarget(event),target = _target.parentNode; + let currentIndex = target.getAttribute("data-row-key"); + if(!currentIndex || currentIndex === this.currentIndex)return; + if(target.nodeName.toUpperCase() === "TR"){ + this.synchronizeTableTr(currentIndex,true); + // target.setAttribute("style","border-bottom:2px dashed rgba(5,0,0,0.25)"); + // // target.style.backgroundColor = 'rgb(235, 236, 240)'; + } + } + + onDragLeave = (e) => { + let event = Event.getEvent(e) , + _target = Event.getTarget(event),target = _target.parentNode; + let currentIndex = target.getAttribute("data-row-key"); + if(!currentIndex || currentIndex === this.currentIndex)return; + if(target.nodeName.toUpperCase() === "TR"){ + this.synchronizeTableTr(currentIndex,null); + } + } + componentDidUpdate(prevProps) { + const { rowDraggAble } = this.props; + if(!this.event){ + this.event = true; + if(rowDraggAble){ + this.initEvent(); + } + } + if(this.props.treeType){ this.setRowParentIndex(); } this.setRowHeight() } + componentWillUnmount() { - const { record, onDestroy, index } = this.props; + const { record, onDestroy, index,rowDraggAble } = this.props; onDestroy(record, index); if (this.unsubscribe) { this.unsubscribe(); } + if(rowDraggAble){ + this.removeDragAbleEvent(); + } } @@ -98,7 +255,6 @@ class TableRow extends Component{ } setRowParentIndex(){ const {index,setRowParentIndex,fixedIndex,rootIndex} = this.props; - // console.log('rootIndex',rootIndex<0?index:rootIndex,'index',fixedIndex); setRowParentIndex(rootIndex<0?index:rootIndex,fixedIndex); } @@ -163,7 +319,7 @@ class TableRow extends Component{ render() { const { clsPrefix, columns, record, height, visible, index, - expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick, + expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,rowDraggAble, expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow } = this.props; let showSum = false; @@ -171,7 +327,6 @@ class TableRow extends Component{ if (this.state.hovered) { className += ` ${clsPrefix}-hover`; } - // console.log('className--'+className,index); //判断是否为合计行 if(className.indexOf('sumrow')>-1){ showSum = true; @@ -223,14 +378,17 @@ class TableRow extends Component{ if (!visible) { style.display = 'none'; } + return (