diff --git a/build/ColumnManager.js b/build/ColumnManager.js index d341799..73324cf 100644 --- a/build/ColumnManager.js +++ b/build/ColumnManager.js @@ -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' }); } diff --git a/build/Table.css b/build/Table.css index e469b9f..d180170 100644 --- a/build/Table.css +++ b/build/Table.css @@ -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; diff --git a/build/Table.js b/build/Table.js index 693ffc1..9d01fe8 100644 --- a/build/Table.js +++ b/build/Table.js @@ -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) ) ); }; diff --git a/build/TableCell.js b/build/TableCell.js index ad6218f..9620ed8 100644 --- a/build/TableCell.js +++ b/build/TableCell.js @@ -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, diff --git a/build/TableRow.js b/build/TableRow.js index 666a77c..2fcfe49 100644 --- a/build/TableRow.js +++ b/build/TableRow.js @@ -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, diff --git a/build/lib/sum.js b/build/lib/sum.js index 5351612..7f476ce 100644 --- a/build/lib/sum.js +++ b/build/lib/sum.js @@ -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]; diff --git a/demo/demolist/Demo0401.js b/demo/demolist/Demo0401.js new file mode 100644 index 0000000..a8c758c --- /dev/null +++ b/demo/demolist/Demo0401.js @@ -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 ( +
{ title }
\n{ desc }
\n 查看源码 \n\n { code }
\n
\n {!!scss_code ?\n { scss_code }
\n
: null }\n