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

feat: 增加useDragHandle参数，支持行手柄拖拽[#607]

This commit is contained in:
yangchch6 2020-07-13 21:14:33 +08:00
parent 45af804334
commit 02d962563b
20 changed files with 901 additions and 516 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build/ColumnManager.js
View File

@ -341,6 +341,7 @@ var _initialiseProps = function _initialiseProps() {
key: "dragHandle",
dataIndex: "dragHandle",
width: 49,
draggable: true,
render: function render() {
return _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-navmenu' });
}

2
build/Table.css
View File

@ -617,7 +617,7 @@
display: none; }
.u-table ::-webkit-scrollbar-track-piece {
display: none; }
.u-table .row-dragg-able {
.u-table .drag-handle-column, .u-table .row-dragg-able {
cursor: move; }
.u-table .u-table-drag-hidden-cont {
width: 100px;

32
build/Table.js
View File

@ -120,7 +120,8 @@ var propTypes = {
onBodyScroll: _propTypes2["default"].func,
bodyDisplayInRow: _propTypes2["default"].bool, // 表格内容超出列宽度时进行换行 or 以...形式展现
headerDisplayInRow: _propTypes2["default"].bool, // 表头内容超出列宽度时进行换行 or 以...形式展现
showRowNum: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].object]) // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
showRowNum: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].object]), // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
onPaste: _propTypes2["default"].func
};
var defaultProps = {
@ -172,7 +173,8 @@ var defaultProps = {
onBodyScroll: function onBodyScroll() {},
bodyDisplayInRow: true,
headerDisplayInRow: true,
showRowNum: false
showRowNum: false,
onPaste: function onPaste() {}
};
var expandIconCellWidth = Number(43);
@ -773,7 +775,8 @@ var Table = function (_Component) {
Table.prototype.getExpandedRow = function getExpandedRow(key, content, visible, className, fixed) {
var _props3 = this.props,
clsPrefix = _props3.clsPrefix,
expandIconAsCell = _props3.expandIconAsCell;
expandIconAsCell = _props3.expandIconAsCell,
onPaste = _props3.onPaste;
var colCount = void 0;
if (fixed === 'left') {
@ -813,6 +816,7 @@ var Table = function (_Component) {
});
}
return _react2["default"].createElement(_TableRow2["default"], {
onPaste: onPaste,
columns: columns,
visible: visible,
className: className,
@ -823,6 +827,7 @@ var Table = function (_Component) {
store: this.store,
dragborderKey: this.props.dragborderKey,
rowDraggAble: this.props.rowDraggAble,
useDragHandle: this.props.useDragHandle,
onDragRow: this.onDragRow,
onDragRowStart: this.onDragRowStart,
height: expandedRowHeight
@ -868,6 +873,7 @@ var Table = function (_Component) {
var childrenColumnName = props.childrenColumnName;
var expandedRowRender = props.expandedRowRender;
var expandRowByClick = props.expandRowByClick;
var onPaste = props.onPaste;
var fixedColumnsBodyRowsHeight = this.state.fixedColumnsBodyRowsHeight;
var rst = [];
@ -884,7 +890,7 @@ var Table = function (_Component) {
var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
var expandIconColumnIndex = props.expandIconColumnIndex;
if (props.lazyLoad && props.lazyLoad.preHeight && indent == 0) {
rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true }));
rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true }));
}
var lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ? props.lazyLoad.startIndex : 0;
var lazyParentIndex = props.lazyLoad && props.lazyLoad.startParentIndex ? props.lazyLoad.startParentIndex : 0;
@ -952,10 +958,11 @@ var Table = function (_Component) {
index = i + lazyParentIndex;
}
rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({
onPaste: onPaste,
indent: indent,
indentSize: props.indentSize,
needIndentSpaced: needIndentSpaced,
className: className + ' ' + (this.props.rowDraggAble ? ' row-dragg-able ' : ''),
className: className + ' ' + (props.rowDraggAble && !props.useDragHandle ? 'row-dragg-able ' : ''),
record: record,
expandIconAsCell: expandIconAsCell,
onDestroy: this.onRowDestroy,
@ -987,7 +994,8 @@ var Table = function (_Component) {
rootIndex: rootIndex,
syncHover: props.syncHover,
bodyDisplayInRow: props.bodyDisplayInRow,
rowDraggAble: this.props.rowDraggAble,
rowDraggAble: props.rowDraggAble,
useDragHandle: props.useDragHandle,
onDragRow: this.onDragRow,
onDragRowStart: this.onDragRowStart,
contentTable: this.contentTable,
@ -1014,7 +1022,7 @@ var Table = function (_Component) {
}
if (props.lazyLoad && props.lazyLoad.sufHeight && indent == 0) {
rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.sufHeight, key: 'table_row_end', columns: [], className: '', store: this.store, visible: true }));
rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, height: props.lazyLoad.sufHeight, key: 'table_row_end', columns: [], className: '', store: this.store, visible: true }));
}
if (!this.isTreeType) {
this.treeType = false;
@ -1584,6 +1592,10 @@ var Table = function (_Component) {
this.hoverDom.style.lineHeight = td.offsetHeight + 'px';
this.hoverDom.style.display = 'block';
}
this.setState({
currentHoverIndex: currentIndex,
currentHoverRecord: record
});
}
}
@ -1593,6 +1605,10 @@ var Table = function (_Component) {
Table.prototype.render = function render() {
var _this7 = this;
var _state3 = this.state,
currentHoverRecord = _state3.currentHoverRecord,
currentHoverIndex = _state3.currentHoverIndex;
var props = this.props;
var clsPrefix = props.clsPrefix;
var hasFixedLeft = this.columnManager.isAnyColumnsLeftFixed();
@ -1672,7 +1688,7 @@ var Table = function (_Component) {
onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) {
return _this7.hoverDom = el;
} },
props.hoverContent()
props.hoverContent(currentHoverRecord, currentHoverIndex)
)
);
};

20
build/TableCell.js
View File

@ -55,7 +55,8 @@ var propTypes = {
indent: _propTypes2["default"].number,
indentSize: _propTypes2["default"].number,
column: _propTypes2["default"].object,
expandIcon: _propTypes2["default"].node
expandIcon: _propTypes2["default"].node,
onPaste: _propTypes2["default"].func
};
var TableCell = function (_Component) {
@ -255,6 +256,21 @@ var TableCell = function (_Component) {
});
};
_this.onPaste = function (e) {
var _this$props = _this.props,
row = _this$props.index,
onPaste = _this$props.onPaste,
fixed = _this$props.fixed,
col = _this$props.col;
var position = {
row: row,
col: col,
fixed: !!fixed
};
onPaste(e, position);
};
_this.isInvalidRenderCellText = _this.isInvalidRenderCellText.bind(_this);
_this.handleClick = _this.handleClick.bind(_this);
_this.state = {
@ -438,11 +454,13 @@ var TableCell = function (_Component) {
return _react2["default"].createElement(
'td',
{
draggable: column.draggable,
colSpan: colSpan,
rowSpan: rowSpan,
className: className,
onClick: this.handleClick,
title: title,
onPaste: this.onPaste,
style: _extends({ maxWidth: column.width, color: fontColor, backgroundColor: bgColor }, column.style) },
indentText,
expandIcon,

32
build/TableRow.js
View File

@ -116,16 +116,13 @@ var TableRow = function (_Component) {
if (!_this.props.rowDraggAble) return;
var event = _utils.Event.getEvent(e),
target = _utils.Event.getTarget(event);
if (target.tagName === 'TD') {
target = target.parentNode;
}
_this.currentIndex = target.getAttribute("data-row-key");
_this._dragCurrent = target;
//TODO 自定义图像后续需要增加。
// let crt = this.synchronizeTableTrShadow();
// document.getElementById(this.props.tableUid).appendChild(crt);
// event.dataTransfer.setDragImage(crt, 0, 0);
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", _this.currentIndex);
onDragRowStart && onDragRowStart(_this.currentIndex);
};
@ -135,9 +132,7 @@ var TableRow = function (_Component) {
};
_this.onDrop = function (e) {
var _this$props = _this.props,
rowDraggAble = _this$props.rowDraggAble,
onDragRow = _this$props.onDragRow;
var onDragRow = _this.props.onDragRow;
var event = _utils.Event.getEvent(e),
_target = _utils.Event.getTarget(event),
@ -150,8 +145,6 @@ var TableRow = function (_Component) {
if (target.nodeName.toUpperCase() === "TR") {
_this.synchronizeTableTr(currentKey, null);
_this.synchronizeTableTr(targetKey, null);
// target.setAttribute("style","");
// this.synchronizeTrStyle(this.currentIndex,false);
}
onDragRow && onDragRow(currentKey, targetKey);
};
@ -228,9 +221,9 @@ var TableRow = function (_Component) {
};
_this.synchronizeTableTrShadow = function () {
var _this$props2 = _this.props,
contentTable = _this$props2.contentTable,
index = _this$props2.index;
var _this$props = _this.props,
contentTable = _this$props.contentTable,
index = _this$props.index;
var cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
@ -296,8 +289,6 @@ var TableRow = function (_Component) {
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)';
}
};
@ -560,10 +551,11 @@ var TableRow = function (_Component) {
height = _props9.height,
visible = _props9.visible,
index = _props9.index,
onPaste = _props9.onPaste,
expandIconColumnIndex = _props9.expandIconColumnIndex,
expandIconAsCell = _props9.expandIconAsCell,
expanded = _props9.expanded,
expandRowByClick = _props9.expandRowByClick,
useDragHandle = _props9.useDragHandle,
rowDraggAble = _props9.rowDraggAble,
expandable = _props9.expandable,
onExpand = _props9.onExpand,
@ -637,7 +629,9 @@ var TableRow = function (_Component) {
expandIcon: isColumnHaveExpandIcon ? expandIcon : null,
bodyDisplayInRow: bodyDisplayInRow,
lazyStartIndex: lazyStartIndex,
lazyEndIndex: lazyEndIndex
lazyEndIndex: lazyEndIndex,
onPaste: onPaste,
col: i
}));
}
var style = _extends({ height: height }, record ? record.style : undefined);
@ -650,7 +644,7 @@ var TableRow = function (_Component) {
return _react2["default"].createElement(
'tr',
{
draggable: rowDraggAble,
draggable: rowDraggAble && !useDragHandle,
onClick: this.onRowClick,
onDoubleClick: this.onRowDoubleClick,
onMouseEnter: this.onMouseEnter,

6
build/lib/sum.js
View File

@ -93,7 +93,11 @@ function sum(Table) {
count += _num;
}
});
sumdata[column.dataIndex] = (0, _utils.DicimalFormater)(count, precision);
var _sum = (0, _utils.DicimalFormater)(count, precision);
sumdata[column.dataIndex] = _sum;
if (column.sumRender && typeof column.sumRender == 'function') {
sumdata[column.dataIndex] = column.sumRender(_sum);
}
}
if (index == 0) {
sumdata[column.dataIndex] = "合计 " + sumdata[column.dataIndex];

62
demo/demolist/Demo0401.js Normal file
View File

@ -0,0 +1,62 @@
/**
*
* @title 悬浮列
* @parent 列渲染 Custom Render
* @description 鼠标hover行时呼出操作按钮。
* demo0401
*/
import React, { Component } from "react";
import {Button,Popconfirm} from "tinper-bee";
import Table from "../../src";
const columns = [
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
{ title: "员工姓名", dataIndex: "b", key: "b", width: 100 },
{ title: "性别", dataIndex: "c", key: "c", width: 100 },
{ title: "部门", dataIndex: "d", key: "d", width: 100 }
];
const data = [
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
];
class Demo1 extends Component {
constructor(props) {
super(props);
}
deleteRow=()=>{
console.log('删除第' , this.currentIndex , '行');
}
onRowHover=(index,record)=>{
this.currentIndex = index;
this.currentRecord = record;
}
getHoverContent=(record, index)=>{
return (
<div className="opt-btns">
<Popconfirm key={index} trigger="click" placement="left" content="是否删除当前行？" onClose={this.deleteRow}>
<Button size="sm">删除</Button>
</Popconfirm>
</div>
)
}
render() {
return (
<Table
columns={columns}
data={data}
onRowHover={this.onRowHover}
hoverContent={this.getHoverContent}
/>
);
}
}
export default Demo1;

3
demo/demolist/Demo1201.js
View File

@ -2,7 +2,7 @@
*
* @title 拖拽改变行顺序
* @parent 行操作-拖拽
* @description `rowDraggAble`参数设置是否使用行交换顺序功能，`onDropRow` 是拖拽行后的回调函数。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。
* @description `rowDraggAble`参数设置是否使用行交换顺序功能，`useDragHandle`设置拖拽把手，`onDropRow` 是拖拽行后的回调函数。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。
* Demo1201
*/
@ -69,6 +69,7 @@ class Demo1201 extends Component {
columns={columns}
data={data}
rowDraggAble={true}
useDragHandle={true}
onDragRowStart={this.onDragRowStart}
onDropRow={this.onDropRow}
/>

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

2
dist/demo.css vendored
View File

@ -604,7 +604,7 @@
display: none; }
.u-table ::-webkit-scrollbar-track-piece {
display: none; }
.u-table .row-dragg-able {
.u-table .drag-handle-column, .u-table .row-dragg-able {
cursor: move; }
.u-table .u-table-drag-hidden-cont {
width: 100px;

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

1199
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

1
docs/api.md
View File

@ -56,6 +56,7 @@ import 'bee-table/build/Table.css';
|collapsedIcon|嵌套表格场景中关闭子表时的关闭图标|||
| expandRowByClick | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool | false |
| rowDraggAble | 是否增加行交换顺序功能 | boolean| false |
| useDragHandle | 通过行手柄进行拖拽排序，在 `rowDraggAble` 为 `true` 时有效 | boolean| false |
| showHeader | 是否显示表头 | bool | true |
| title | 表格标题 | Function | - |
| footer | 表格尾部 | Function | - |

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "2.2.53",
"version": "2.2.54-alpha.2",
"description": "Table ui component for react",
"keywords": [
"react",
@ -47,6 +47,7 @@
"prepublishOnly": "npm run build"
},
"dependencies": {
"array-move": "^3.0.0",
"bee-button": "latest",
"bee-checkbox": "latest",
"bee-datepicker": "^2.0.28",
@ -63,6 +64,7 @@
"component-classes": "^1.2.6",
"lodash.clonedeep": "^4.5.0",
"object-path": "^0.11.3",
"react-sortable-hoc": "^1.11.0",
"shallowequal": "^1.0.2",
"throttle-debounce": "^2.0.1",
"tinper-bee-core": "latest",

1
src/ColumnManager.js
View File

@ -27,6 +27,7 @@ export default class ColumnManager {
key: "dragHandle",
dataIndex: "dragHandle",
width: 49,
draggable: true,
render: () => {
return <Icon type="uf-navmenu" />
}

14
src/Table.js
View File

@ -618,6 +618,7 @@ class Table extends Component {
store={this.store}
dragborderKey={this.props.dragborderKey}
rowDraggAble={this.props.rowDraggAble}
useDragHandle={this.props.useDragHandle}
onDragRow={this.onDragRow}
onDragRowStart={this.onDragRowStart}
height={expandedRowHeight}
@ -793,7 +794,7 @@ class Table extends Component {
indent={indent}
indentSize={props.indentSize}
needIndentSpaced={needIndentSpaced}
className={`${className} ${this.props.rowDraggAble?' row-dragg-able ':''}`}
className={`${className} ${props.rowDraggAble && !props.useDragHandle?'row-dragg-able ':''}`}
record={record}
expandIconAsCell={expandIconAsCell}
onDestroy={this.onRowDestroy}
@ -825,7 +826,8 @@ class Table extends Component {
rootIndex = {rootIndex}
syncHover = {props.syncHover}
bodyDisplayInRow = {props.bodyDisplayInRow}
rowDraggAble={this.props.rowDraggAble}
rowDraggAble={props.rowDraggAble}
useDragHandle={props.useDragHandle}
onDragRow={this.onDragRow}
onDragRowStart={this.onDragRowStart}
contentTable={this.contentTable}
@ -1378,8 +1380,11 @@ class Table extends Component {
this.hoverDom.style.lineHeight = td.offsetHeight + 'px';
this.hoverDom.style.display = 'block';
}
this.setState({
currentHoverIndex: currentIndex,
currentHoverRecord: record
})
}
}
onRowHover && onRowHover(currentIndex,record);
@ -1415,6 +1420,7 @@ class Table extends Component {
}
render() {
const { currentHoverRecord, currentHoverIndex } = this.state;
const props = this.props;
const clsPrefix = props.clsPrefix;
const hasFixedLeft = this.columnManager.isAnyColumnsLeftFixed();
@ -1484,7 +1490,7 @@ class Table extends Component {
container={this}
{...loading} />
{ props.hoverContent && <div className="u-row-hover"
onMouseEnter={this.onRowHoverMouseEnter} onMouseLeave={this.onRowHoverMouseLeave} ref={el=> this.hoverDom = el }>{props.hoverContent()}</div>}
onMouseEnter={this.onRowHoverMouseEnter} onMouseLeave={this.onRowHoverMouseLeave} ref={el=> this.hoverDom = el }>{props.hoverContent(currentHoverRecord, currentHoverIndex)}</div>}
</div>
);
}

2
src/Table.scss
View File

@ -743,7 +743,7 @@ $icon-color:#505F79;
display: none;
}
.row-dragg-able{
.drag-handle-column, .row-dragg-able{
cursor:move;
}
.u-table-drag-hidden-cont{

1
src/TableCell.js
View File

@ -294,6 +294,7 @@ class TableCell extends Component{
}
if(colSpan==0)return null;
return <td
draggable={column.draggable}
colSpan={colSpan}
rowSpan={rowSpan}
className={className}

29
src/TableRow.js
View File

@ -141,17 +141,14 @@ class TableRow extends Component{
if (!this.props.rowDraggAble) return;
let event = Event.getEvent(e) ,
target = Event.getTarget(event);
this.currentIndex = target.getAttribute("data-row-key");
this._dragCurrent = target;
//TODO 自定义图像后续需要增加。
// let crt = this.synchronizeTableTrShadow();
// document.getElementById(this.props.tableUid).appendChild(crt);
// event.dataTransfer.setDragImage(crt, 0, 0);
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", this.currentIndex);
onDragRowStart && onDragRowStart(this.currentIndex);
if (target.tagName === 'TD') {
target = target.parentNode;
}
this.currentIndex = target.getAttribute("data-row-key");
this._dragCurrent = target;
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("Text", this.currentIndex);
onDragRowStart && onDragRowStart(this.currentIndex);
}
onDragOver = (e) => {
@ -164,7 +161,7 @@ class TableRow extends Component{
* @memberof TableHeader
*/
onDrop = (e) => {
let {rowDraggAble,onDragRow} = this.props;
let {onDragRow} = this.props;
let event = Event.getEvent(e) ,
_target = Event.getTarget(event),
target = _target.parentNode;
@ -176,8 +173,6 @@ class TableRow extends Component{
if(target.nodeName.toUpperCase() === "TR"){
this.synchronizeTableTr(currentKey,null);
this.synchronizeTableTr(targetKey,null);
// target.setAttribute("style","");
// this.synchronizeTrStyle(this.currentIndex,false);
}
onDragRow && onDragRow(currentKey,targetKey);
};
@ -330,8 +325,6 @@ class TableRow extends Component{
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)';
}
}
@ -452,7 +445,7 @@ class TableRow extends Component{
render() {
const {
clsPrefix, columns, record, height, visible, index,onPaste,
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,rowDraggAble,
expandIconColumnIndex, expandIconAsCell, expanded, useDragHandle,rowDraggAble,
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
,expandedIcon,collapsedIcon, hoverKey,lazyStartIndex,lazyEndIndex, expandIconCellWidth
} = this.props;
@ -531,7 +524,7 @@ class TableRow extends Component{
}
return (
<tr
draggable={rowDraggAble}
draggable={rowDraggAble && !useDragHandle}
onClick={this.onRowClick}
onDoubleClick={this.onRowDoubleClick}
onMouseEnter={this.onMouseEnter}