Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
yangchch6
|
9d5202f48c |
|
|
@ -316,6 +316,8 @@
|
|||
color: rgb(33, 33, 33); }
|
||||
.u-table.fixed-height td {
|
||||
padding: 0px 8px; }
|
||||
.u-table.fixed-header-height th {
|
||||
padding: 0px 8px; }
|
||||
.u-table-fixed-header .u-table-body {
|
||||
background: #fff;
|
||||
position: relative; }
|
||||
|
|
@ -897,3 +899,22 @@
|
|||
line-height: 30px; }
|
||||
.u-dropdown ul.u-table-inline-op-dropdowm li.u-dropdown-menu-item i.uf {
|
||||
font-size: 12px; }
|
||||
|
||||
.u-table-adjustSize-btn.u-button {
|
||||
min-width: 0;
|
||||
padding: 4px 12px; }
|
||||
.u-table-adjustSize-btn.u-button .uf {
|
||||
padding: 0; }
|
||||
.u-table-adjustSize-btn.u-button .uf:first-child {
|
||||
margin-right: 8px; }
|
||||
.u-table-adjustSize-btn.u-button .uf:last-child {
|
||||
font-size: 12px; }
|
||||
|
||||
.u-table-adjustSize-menus.u-dropdown-menu > .u-dropdown-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
line-height: 32px;
|
||||
height: 32px; }
|
||||
.u-table-adjustSize-menus.u-dropdown-menu > .u-dropdown-menu-item svg {
|
||||
margin-right: 4px; }
|
||||
|
|
|
|||
154
build/Table.js
154
build/Table.js
|
|
@ -58,6 +58,26 @@ var _i18n2 = _interopRequireDefault(_i18n);
|
|||
|
||||
var _tool = require('bee-locale/build/tool');
|
||||
|
||||
var _beeDropdown = require('bee-dropdown');
|
||||
|
||||
var _beeDropdown2 = _interopRequireDefault(_beeDropdown);
|
||||
|
||||
var _beeMenus = require('bee-menus');
|
||||
|
||||
var _beeMenus2 = _interopRequireDefault(_beeMenus);
|
||||
|
||||
var _beeButton = require('bee-button');
|
||||
|
||||
var _beeButton2 = _interopRequireDefault(_beeButton);
|
||||
|
||||
var _svg = require('./svg');
|
||||
|
||||
var _svg2 = _interopRequireDefault(_svg);
|
||||
|
||||
var _Portal = require('bee-overlay/build/Portal');
|
||||
|
||||
var _Portal2 = _interopRequireDefault(_Portal);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
|
@ -118,7 +138,9 @@ 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 || '序号'}
|
||||
canConfigureTableSize: _propTypes2["default"].bool,
|
||||
getToolbarContainer: _propTypes2["default"].func
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
|
|
@ -169,7 +191,14 @@ var defaultProps = {
|
|||
onBodyScroll: function onBodyScroll() {},
|
||||
bodyDisplayInRow: true,
|
||||
headerDisplayInRow: true,
|
||||
showRowNum: false
|
||||
showRowNum: false,
|
||||
canConfigureTableSize: false
|
||||
};
|
||||
|
||||
var tableSizeIcons = {
|
||||
'sm': _svg2["default"].compact,
|
||||
'md': _svg2["default"].moderate,
|
||||
'lg': _svg2["default"].easy
|
||||
};
|
||||
|
||||
var Table = function (_Component) {
|
||||
|
|
@ -296,6 +325,70 @@ var Table = function (_Component) {
|
|||
_this.props.onTableKeyDown && _this.props.onTableKeyDown();
|
||||
};
|
||||
|
||||
_this.getTableToolbar = function () {
|
||||
var clsPrefix = _this.props.clsPrefix;
|
||||
var tableSize = _this.state.tableSize;
|
||||
|
||||
var menu = _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{ className: clsPrefix + '-adjustSize-menus', onSelect: _this.onConfigMenuSelect, defaultSelectedKeys: ['md'] },
|
||||
_react2["default"].createElement(
|
||||
_beeMenus2["default"].Item,
|
||||
{ key: 'sm' },
|
||||
_svg2["default"].compact,
|
||||
'\u7D27\u51D1\u578B'
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
_beeMenus2["default"].Item,
|
||||
{ key: 'md' },
|
||||
_svg2["default"].moderate,
|
||||
'\u9002\u4E2D'
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
_beeMenus2["default"].Item,
|
||||
{ key: 'lg' },
|
||||
_svg2["default"].easy,
|
||||
'\u5BBD\u677E\u578B'
|
||||
)
|
||||
);
|
||||
return _react2["default"].createElement(
|
||||
_beeDropdown2["default"],
|
||||
{
|
||||
trigger: ['hover'],
|
||||
overlay: menu,
|
||||
placement: 'bottomRight',
|
||||
animation: 'slide-up' },
|
||||
_react2["default"].createElement(
|
||||
_beeButton2["default"],
|
||||
{ bordered: true, className: clsPrefix + '-adjustSize-btn' },
|
||||
tableSizeIcons[tableSize],
|
||||
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-arrow-down' })
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
_this.onConfigMenuSelect = function (_ref) {
|
||||
var key = _ref.key;
|
||||
var _this$state = _this.state,
|
||||
tableSizeConf = _this$state.tableSizeConf,
|
||||
tableSize = _this$state.tableSize;
|
||||
|
||||
if (key === 'sm') {
|
||||
tableSizeConf = { height: 30, headerHeight: 35, fontSize: 12 };
|
||||
tableSize = 'sm';
|
||||
} else if (key === 'lg') {
|
||||
tableSizeConf = { height: 50, headerHeight: 50, fontSize: 14 };
|
||||
tableSize = 'lg';
|
||||
} else if (key === 'md') {
|
||||
tableSizeConf = { height: 40, headerHeight: 40, fontSize: 12 };
|
||||
tableSize = 'md';
|
||||
}
|
||||
_this.setState({
|
||||
tableSizeConf: tableSizeConf,
|
||||
tableSize: tableSize
|
||||
});
|
||||
};
|
||||
|
||||
var expandedRowKeys = [];
|
||||
var rows = [].concat(_toConsumableArray(props.data));
|
||||
_this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth, props.rowDraggAble, props.showRowNum); // 加入props.showRowNum参数
|
||||
|
|
@ -317,7 +410,9 @@ var Table = function (_Component) {
|
|||
scrollPosition: 'left',
|
||||
fixedColumnsHeadRowsHeight: [],
|
||||
fixedColumnsBodyRowsHeight: [],
|
||||
fixedColumnsExpandedRowsHeight: {} //扩展行的高度
|
||||
fixedColumnsExpandedRowsHeight: {}, //扩展行的高度
|
||||
tableSizeConf: null, //实现表格动态缩放
|
||||
tableSize: 'md'
|
||||
};
|
||||
|
||||
_this.onExpandedRowsChange = _this.onExpandedRowsChange.bind(_this);
|
||||
|
|
@ -577,6 +672,7 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
|
||||
var tableSizeConf = this.state.tableSizeConf;
|
||||
var _props = this.props,
|
||||
filterDelay = _props.filterDelay,
|
||||
onFilterChange = _props.onFilterChange,
|
||||
|
|
@ -615,7 +711,14 @@ var Table = function (_Component) {
|
|||
});
|
||||
}
|
||||
|
||||
var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
|
||||
// const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
|
||||
var trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : headerHeight ? { height: headerHeight } : null;
|
||||
if (tableSizeConf && tableSizeConf.headerHeight) {
|
||||
trStyle = {
|
||||
height: tableSizeConf.headerHeight,
|
||||
fontSize: tableSizeConf.fontSize
|
||||
};
|
||||
}
|
||||
var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnd: onDragEnd, onDragEnter: onDragEnter, draggable: draggable } : {};
|
||||
var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey, onDropBorder: onDropBorder, onDraggingBorder: onDraggingBorder } : {};
|
||||
var contentWidthDiff = 0;
|
||||
|
|
@ -832,7 +935,9 @@ var Table = function (_Component) {
|
|||
var childrenColumnName = props.childrenColumnName;
|
||||
var expandedRowRender = props.expandedRowRender;
|
||||
var expandRowByClick = props.expandRowByClick;
|
||||
var fixedColumnsBodyRowsHeight = this.state.fixedColumnsBodyRowsHeight;
|
||||
var _state2 = this.state,
|
||||
fixedColumnsBodyRowsHeight = _state2.fixedColumnsBodyRowsHeight,
|
||||
tableSizeConf = _state2.tableSizeConf;
|
||||
|
||||
var rst = [];
|
||||
var height = void 0;
|
||||
|
|
@ -903,6 +1008,10 @@ var Table = function (_Component) {
|
|||
} else if (fixed || props.heightConsistent) {
|
||||
height = fixedColumnsBodyRowsHeight[fixedIndex];
|
||||
}
|
||||
// 如果切换了配置，以自定义配置的高度为准
|
||||
if (props.bodyDisplayInRow && tableSizeConf && tableSizeConf.headerHeight) {
|
||||
height = tableSizeConf.height;
|
||||
}
|
||||
|
||||
var leafColumns = void 0;
|
||||
if (fixed === 'left') {
|
||||
|
|
@ -974,7 +1083,8 @@ var Table = function (_Component) {
|
|||
lazyStartIndex: lazyCurrentIndex,
|
||||
lazyEndIndex: lazyEndIndex,
|
||||
centerColumnsLength: this.centerColumnsLength,
|
||||
leftColumnsLength: this.leftColumnsLength
|
||||
leftColumnsLength: this.leftColumnsLength,
|
||||
tableSizeConf: tableSizeConf
|
||||
})));
|
||||
this.treeRowIndex++;
|
||||
var subVisible = visible && isRowExpanded;
|
||||
|
|
@ -1013,11 +1123,11 @@ var Table = function (_Component) {
|
|||
var cols = [];
|
||||
var self = this;
|
||||
|
||||
var _state2 = this.state,
|
||||
_state2$contentWidthD = _state2.contentWidthDiff,
|
||||
contentWidthDiff = _state2$contentWidthD === undefined ? 0 : _state2$contentWidthD,
|
||||
_state2$lastShowIndex = _state2.lastShowIndex,
|
||||
lastShowIndex = _state2$lastShowIndex === undefined ? 0 : _state2$lastShowIndex;
|
||||
var _state3 = this.state,
|
||||
_state3$contentWidthD = _state3.contentWidthDiff,
|
||||
contentWidthDiff = _state3$contentWidthD === undefined ? 0 : _state3$contentWidthD,
|
||||
_state3$lastShowIndex = _state3.lastShowIndex,
|
||||
lastShowIndex = _state3$lastShowIndex === undefined ? 0 : _state3$lastShowIndex;
|
||||
|
||||
if (this.props.expandIconAsCell && fixed !== 'right') {
|
||||
cols.push(_react2["default"].createElement('col', {
|
||||
|
|
@ -1548,9 +1658,16 @@ var Table = function (_Component) {
|
|||
onRowHover && onRowHover(currentIndex, record);
|
||||
};
|
||||
|
||||
/**
|
||||
* 自定义设置表格行高、字体大小
|
||||
*/
|
||||
|
||||
|
||||
Table.prototype.render = function render() {
|
||||
var _this6 = this;
|
||||
|
||||
var tableSizeConf = this.state.tableSizeConf;
|
||||
|
||||
var props = this.props;
|
||||
var clsPrefix = props.clsPrefix;
|
||||
var hasFixedLeft = this.columnManager.isAnyColumnsLeftFixed();
|
||||
|
|
@ -1570,9 +1687,12 @@ var Table = function (_Component) {
|
|||
className += ' ' + clsPrefix + '-scroll-position-' + this.state.scrollPosition;
|
||||
//如果传入height说明是固定高度
|
||||
//内容过多折行显示时，height 属性会失效，为了避免产生错行
|
||||
if (props.bodyDisplayInRow && props.height) {
|
||||
if (props.bodyDisplayInRow && (props.height || tableSizeConf && tableSizeConf.height)) {
|
||||
className += ' fixed-height';
|
||||
}
|
||||
if (props.headerHeight || tableSizeConf && tableSizeConf.headerHeight) {
|
||||
className += ' fixed-header-height';
|
||||
}
|
||||
if (props.bodyDisplayInRow) {
|
||||
className += ' body-dispaly-in-row';
|
||||
}
|
||||
|
|
@ -1592,6 +1712,11 @@ var Table = function (_Component) {
|
|||
if (hasFixedLeft) {
|
||||
className += ' has-fixed-left';
|
||||
}
|
||||
var portal = props.canConfigureTableSize && typeof window !== 'undefined' && props.getToolbarContainer ? _react2["default"].createElement(
|
||||
_Portal2["default"],
|
||||
{ container: props.getToolbarContainer },
|
||||
this.getTableToolbar()
|
||||
) : this.getTableToolbar();
|
||||
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
|
|
@ -1599,6 +1724,11 @@ var Table = function (_Component) {
|
|||
return _this6.contentTable = el;
|
||||
},
|
||||
tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
|
||||
props.canConfigureTableSize && _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + '-toolbar' },
|
||||
portal
|
||||
),
|
||||
this.getTitle(),
|
||||
_react2["default"].createElement(
|
||||
'div',
|
||||
|
|
|
|||
|
|
@ -328,7 +328,8 @@ var TableRow = function (_Component) {
|
|||
|
||||
_this._timeout = null;
|
||||
_this.state = {
|
||||
hovered: false
|
||||
hovered: false,
|
||||
tableSizeConf: {}
|
||||
};
|
||||
_this.onRowClick = _this.onRowClick.bind(_this);
|
||||
_this.onRowDoubleClick = _this.onRowDoubleClick.bind(_this);
|
||||
|
|
@ -364,6 +365,17 @@ var TableRow = function (_Component) {
|
|||
}
|
||||
};
|
||||
|
||||
TableRow.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
var newTableSizeConf = nextProps.tableSizeConf;
|
||||
var oldTableSizeConf = this.props.tableSizeConf;
|
||||
|
||||
if (newTableSizeConf !== oldTableSizeConf) {
|
||||
this.setState({
|
||||
tableSizeConf: newTableSizeConf
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 事件初始化
|
||||
*/
|
||||
|
|
@ -547,6 +559,7 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
TableRow.prototype.render = function render() {
|
||||
var tableSizeConf = this.state.tableSizeConf;
|
||||
var _props9 = this.props,
|
||||
clsPrefix = _props9.clsPrefix,
|
||||
columns = _props9.columns,
|
||||
|
|
@ -638,6 +651,9 @@ var TableRow = function (_Component) {
|
|||
if (record && record._checked) {
|
||||
className += ' selected';
|
||||
}
|
||||
if (tableSizeConf && tableSizeConf.fontSize) {
|
||||
style.fontSize = tableSizeConf.fontSize;
|
||||
}
|
||||
return _react2["default"].createElement(
|
||||
'tr',
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
// 紧凑、适中、宽松型图标，后续更新 iconfont 资源后，可以删掉该文件
|
||||
|
||||
exports["default"] = {
|
||||
compact: React.createElement(
|
||||
"svg",
|
||||
{ width: "24", height: "24", xmlns: "http://www.w3.org/2000/svg" },
|
||||
React.createElement("path", { d: "M5 7.554h13.999V6H5v1.554zm0 2.816h13.999V8.814H5v1.556zm0 2.814h13.999v-1.556H5v1.556zm0 2.814h13.999v-1.555H5v1.555zm0 2.815h13.999v-1.554H5v1.554z", fill: "#505F79", "fill-rule": "evenodd" })
|
||||
),
|
||||
moderate: React.createElement(
|
||||
"svg",
|
||||
{ width: "24", height: "24", xmlns: "http://www.w3.org/2000/svg" },
|
||||
React.createElement("path", { d: "M5 9.163h14V6H5v3.163zm0 4.825h14v-3.163H5v3.163zm0 4.825h14v-3.164H5v3.164z", fill: "#505F79", "fill-rule": "evenodd" })
|
||||
),
|
||||
easy: React.createElement(
|
||||
"svg",
|
||||
{ width: "24", height: "24", xmlns: "http://www.w3.org/2000/svg" },
|
||||
React.createElement("path", { d: "M5 11.075h14V6H5v5.075zm0 7.739h14v-5.075H5v5.075z", fill: "#505F79", "fill-rule": "evenodd" })
|
||||
)
|
||||
};
|
||||
module.exports = exports["default"];
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
/**
|
||||
*
|
||||
* @title 自定义设置行高和字号
|
||||
* @description canConfigureTableSize 设置是否显示toolbar设置按钮，getToolbarContainer 设置按钮放置的容器。
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "订单编号", dataIndex: "orderNum", key: "orderNum", width: 100 },
|
||||
{ title: "采购组织", dataIndex: "org", key: "org", width: 200 },
|
||||
{ title: "供应商", dataIndex: "supplier", key: "supplier", width: 100 },
|
||||
{ title: "订单日期", dataIndex: "orderDate", key: "orderDate", width: 150 },
|
||||
{ title: "总数量", dataIndex: "quantity", key: "quantity", width: 100 },
|
||||
{ title: "单据状态", dataIndex: "status", key: "status", width: 100 },
|
||||
{ title: "提交人", dataIndex: "submitter", key: "submitter", width: 100 },
|
||||
{ title: "单位", dataIndex: "unit", key: "unit", width: 100 },
|
||||
{ title: "总税价合计", dataIndex: "sum", key: "sum", width: 100 },
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
orderNum: "NU0391025",
|
||||
org: "用友网络科技股份有限公司",
|
||||
supplier: "xx供应商",
|
||||
orderDate: '2018年03月18日',
|
||||
quantity: '100.00',
|
||||
status: '正常',
|
||||
submitter: '小张',
|
||||
unit: 'pc',
|
||||
sum: '8,487.00',
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderNum: "NU0391026",
|
||||
org: "用友网络科技股份有限公司",
|
||||
supplier: "xx供应商",
|
||||
orderDate: '2018年02月05日',
|
||||
quantity: '91.00',
|
||||
status: '异常',
|
||||
submitter: '小红',
|
||||
unit: 'pc',
|
||||
sum: '675.00',
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderNum: "NU0391027",
|
||||
org: "用友网络科技股份有限公司",
|
||||
supplier: "xx供应商",
|
||||
orderDate: '2018年07月01日',
|
||||
quantity: '98.00',
|
||||
status: '正常',
|
||||
submitter: '小李',
|
||||
unit: 'pc',
|
||||
sum: '1,531.00',
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo0108 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0,
|
||||
}
|
||||
}
|
||||
|
||||
getToolbarContainer = () => {
|
||||
return document.getElementById('table-toolbar-container');
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className="demo0108">
|
||||
<div id="table-toolbar-container"></div>
|
||||
<Table
|
||||
canConfigureTableSize={true}
|
||||
getToolbarContainer={this.getToolbarContainer}
|
||||
columns={columns}
|
||||
data={data}
|
||||
onRowClick={(record, index, indent) => {
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo0108;
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
.demo0108{
|
||||
text-align: end;
|
||||
.u-table-adjustSize-btn{
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -41,7 +41,7 @@ class Demo12 extends Component {
|
|||
*@param selectedList:当前选中的行数据
|
||||
*@param record 当前操作行数据
|
||||
*@param index 当前操作行索引
|
||||
*@param newData 进行多选操作之后的新数据 data
|
||||
*@param newData 进行多选操作之后的新数据 data。【tinper-bee@2.2.2 新增参数】
|
||||
* @memberof Demo12
|
||||
*/
|
||||
getSelectedDataFunc = (selectedList,record,index,newData) => {
|
||||
|
|
|
|||
|
|
@ -58,20 +58,9 @@ class Demo34 extends Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0,
|
||||
expandKeys: [0]
|
||||
data: data
|
||||
}
|
||||
}
|
||||
/**
|
||||
* expandedRowKeys : 展开行的keys数组
|
||||
*/
|
||||
onExpandedRowsChange = (expandedRowKeys) => {
|
||||
// console.log('expandedRowKeys', expandedRowKeys);
|
||||
this.setState({
|
||||
expandKeys:expandedRowKeys
|
||||
})
|
||||
}
|
||||
/**
|
||||
* expanded : 当前的状态
|
||||
* record : 当前行的数据
|
||||
|
|
@ -97,8 +86,6 @@ class Demo34 extends Component {
|
|||
onRowClick={(record, index, indent) => {
|
||||
console.log('currentIndex--' + index);
|
||||
}}
|
||||
onExpandedRowsChange={this.onExpandedRowsChange}
|
||||
expandedRowKeys={this.state.expandKeys}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -303,6 +303,8 @@
|
|||
color: rgb(33, 33, 33); }
|
||||
.u-table.fixed-height td {
|
||||
padding: 0px 8px; }
|
||||
.u-table.fixed-header-height th {
|
||||
padding: 0px 8px; }
|
||||
.u-table-fixed-header .u-table-body {
|
||||
background: #fff;
|
||||
position: relative; }
|
||||
|
|
@ -889,6 +891,27 @@
|
|||
.u-dropdown ul.u-table-inline-op-dropdowm li.u-dropdown-menu-item i.uf {
|
||||
font-size: 12px; }
|
||||
|
||||
.u-table-adjustSize-btn.u-button {
|
||||
min-width: 0;
|
||||
padding: 4px 12px; }
|
||||
.u-table-adjustSize-btn.u-button .uf {
|
||||
padding: 0; }
|
||||
.u-table-adjustSize-btn.u-button .uf:first-child {
|
||||
margin-right: 8px; }
|
||||
.u-table-adjustSize-btn.u-button .uf:last-child {
|
||||
font-size: 12px; }
|
||||
|
||||
.u-table-adjustSize-menus.u-dropdown-menu > .u-dropdown-menu-item {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
line-height: 32px;
|
||||
height: 32px; }
|
||||
.u-table-adjustSize-menus.u-dropdown-menu > .u-dropdown-menu-item svg {
|
||||
margin-right: 4px; }
|
||||
|
||||
.selected {
|
||||
background: #FFF7E7; }
|
||||
|
||||
|
|
@ -912,6 +935,11 @@
|
|||
.demo04.u-table tr.u-table-row-hover, .demo04 .u-table tr:hover {
|
||||
background: #ebecf0; }
|
||||
|
||||
.demo0108 {
|
||||
text-align: end; }
|
||||
.demo0108 .u-table-adjustSize-btn {
|
||||
margin-bottom: 8px; }
|
||||
|
||||
.demo22 .opt-btns {
|
||||
margin-bottom: 8px; }
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -54,6 +54,7 @@
|
|||
"bee-loading": "1.1.2",
|
||||
"bee-locale": "0.0.14",
|
||||
"bee-menus": "^2.0.6",
|
||||
"bee-overlay": "^1.0.31",
|
||||
"bee-radio": "^2.0.16",
|
||||
"bee-select": "^2.0.11",
|
||||
"classnames": "^2.2.5",
|
||||
|
|
|
|||
88
src/Table.js
88
src/Table.js
|
|
@ -13,6 +13,11 @@ import Icon from 'bee-icon';
|
|||
import { Event,EventUtil,closest} from "./lib/utils";
|
||||
import i18n from "./lib/i18n";
|
||||
import { getComponentLocale } from "bee-locale/build/tool";
|
||||
import Dropdown from 'bee-dropdown';
|
||||
import Menu from 'bee-menus';
|
||||
import Button from 'bee-button';
|
||||
import Tablesvg from './svg';
|
||||
import Portal from 'bee-overlay/build/Portal';
|
||||
|
||||
const propTypes = {
|
||||
data: PropTypes.array,
|
||||
|
|
@ -63,6 +68,8 @@ const propTypes = {
|
|||
bodyDisplayInRow: PropTypes.bool, // 表格内容超出列宽度时进行换行 or 以...形式展现
|
||||
headerDisplayInRow: PropTypes.bool, // 表头内容超出列宽度时进行换行 or 以...形式展现
|
||||
showRowNum: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
|
||||
canConfigureTableSize: PropTypes.bool,
|
||||
getToolbarContainer: PropTypes.func,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
|
|
@ -105,8 +112,15 @@ const defaultProps = {
|
|||
bodyDisplayInRow: true,
|
||||
headerDisplayInRow: true,
|
||||
showRowNum: false,
|
||||
canConfigureTableSize:false
|
||||
};
|
||||
|
||||
const tableSizeIcons = {
|
||||
'sm': Tablesvg.compact,
|
||||
'md': Tablesvg.moderate,
|
||||
'lg': Tablesvg.easy
|
||||
}
|
||||
|
||||
class Table extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -132,6 +146,8 @@ class Table extends Component {
|
|||
fixedColumnsHeadRowsHeight: [],
|
||||
fixedColumnsBodyRowsHeight: [],
|
||||
fixedColumnsExpandedRowsHeight: {}, //扩展行的高度
|
||||
tableSizeConf: null, //实现表格动态缩放
|
||||
tableSize: 'md'
|
||||
}
|
||||
|
||||
this.onExpandedRowsChange = this.onExpandedRowsChange.bind(this);
|
||||
|
|
@ -419,6 +435,7 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
|
||||
const { tableSizeConf } = this.state;
|
||||
const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop,onDragEnd, draggable,
|
||||
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder} = this.props;
|
||||
const rows = this.getHeaderRows(columns);
|
||||
|
|
@ -431,7 +448,14 @@ class Table extends Component {
|
|||
});
|
||||
}
|
||||
|
||||
const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
|
||||
// const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
|
||||
let trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : ( headerHeight ? { height: headerHeight } : null );
|
||||
if( tableSizeConf && tableSizeConf.headerHeight ){
|
||||
trStyle = {
|
||||
height : tableSizeConf.headerHeight,
|
||||
fontSize : tableSizeConf.fontSize
|
||||
};
|
||||
}
|
||||
let drop = draggable ? { onDragStart, onDragOver, onDrop,onDragEnd, onDragEnter, draggable } : {};
|
||||
let dragBorder = dragborder ? { onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey,onDropBorder,onDraggingBorder } : {};
|
||||
let contentWidthDiff = 0;
|
||||
|
|
@ -676,7 +700,7 @@ class Table extends Component {
|
|||
const childrenColumnName = props.childrenColumnName;
|
||||
const expandedRowRender = props.expandedRowRender;
|
||||
const expandRowByClick = props.expandRowByClick;
|
||||
const { fixedColumnsBodyRowsHeight } = this.state;
|
||||
const { fixedColumnsBodyRowsHeight,tableSizeConf } = this.state;
|
||||
let rst = [];
|
||||
let height;
|
||||
const rowClassName = props.rowClassName;
|
||||
|
|
@ -748,6 +772,10 @@ class Table extends Component {
|
|||
} else if(fixed || props.heightConsistent) {
|
||||
height = fixedColumnsBodyRowsHeight[fixedIndex];
|
||||
}
|
||||
// 如果切换了配置，以自定义配置的高度为准
|
||||
if( props.bodyDisplayInRow && tableSizeConf && tableSizeConf.headerHeight ){
|
||||
height = tableSizeConf.height;
|
||||
}
|
||||
|
||||
let leafColumns;
|
||||
if (fixed === 'left') {
|
||||
|
|
@ -821,6 +849,7 @@ class Table extends Component {
|
|||
lazyEndIndex = {lazyEndIndex}
|
||||
centerColumnsLength={this.centerColumnsLength}
|
||||
leftColumnsLength={this.leftColumnsLength}
|
||||
tableSizeConf={tableSizeConf}
|
||||
/>
|
||||
);
|
||||
this.treeRowIndex++;
|
||||
|
|
@ -1375,7 +1404,49 @@ class Table extends Component {
|
|||
this.props.onTableKeyDown&&this.props.onTableKeyDown();
|
||||
}
|
||||
|
||||
/**
|
||||
* 自定义设置表格行高、字体大小
|
||||
*/
|
||||
getTableToolbar = () => {
|
||||
const { clsPrefix } = this.props;
|
||||
const { tableSize } = this.state;
|
||||
let menu = (
|
||||
<Menu className={`${clsPrefix}-adjustSize-menus`} onSelect={this.onConfigMenuSelect} defaultSelectedKeys={['md']}>
|
||||
<Menu.Item key="sm">{Tablesvg.compact}紧凑型</Menu.Item>
|
||||
<Menu.Item key="md">{Tablesvg.moderate}适中</Menu.Item>
|
||||
<Menu.Item key="lg">{Tablesvg.easy}宽松型</Menu.Item>
|
||||
</Menu>
|
||||
)
|
||||
return (
|
||||
<Dropdown
|
||||
trigger={['hover']}
|
||||
overlay={menu}
|
||||
placement="bottomRight"
|
||||
animation="slide-up">
|
||||
<Button bordered className={`${clsPrefix}-adjustSize-btn`}>{tableSizeIcons[tableSize]}<Icon type="uf-arrow-down"/></Button>
|
||||
</Dropdown>
|
||||
)
|
||||
}
|
||||
onConfigMenuSelect = ({key}) => {
|
||||
let { tableSizeConf,tableSize } = this.state;
|
||||
if(key === 'sm'){
|
||||
tableSizeConf = { height: 30, headerHeight: 35, fontSize: 12 };
|
||||
tableSize = 'sm';
|
||||
} else if(key === 'lg'){
|
||||
tableSizeConf = { height: 50, headerHeight: 50, fontSize: 14 };
|
||||
tableSize = 'lg';
|
||||
} else if(key === 'md'){
|
||||
tableSizeConf = { height: 40, headerHeight: 40, fontSize: 12 };
|
||||
tableSize = 'md';
|
||||
}
|
||||
this.setState({
|
||||
tableSizeConf,
|
||||
tableSize
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const {tableSizeConf} = this.state;
|
||||
const props = this.props;
|
||||
const clsPrefix = props.clsPrefix;
|
||||
const hasFixedLeft = this.columnManager.isAnyColumnsLeftFixed();
|
||||
|
|
@ -1395,9 +1466,12 @@ class Table extends Component {
|
|||
className += ` ${clsPrefix}-scroll-position-${this.state.scrollPosition}`;
|
||||
//如果传入height说明是固定高度
|
||||
//内容过多折行显示时，height 属性会失效，为了避免产生错行
|
||||
if(props.bodyDisplayInRow && props.height){
|
||||
if(props.bodyDisplayInRow && (props.height || (tableSizeConf && tableSizeConf.height))){
|
||||
className += ' fixed-height';
|
||||
}
|
||||
if(props.headerHeight || (tableSizeConf && tableSizeConf.headerHeight)){
|
||||
className += ' fixed-header-height';
|
||||
}
|
||||
if(props.bodyDisplayInRow){
|
||||
className += ' body-dispaly-in-row'
|
||||
}
|
||||
|
|
@ -1419,10 +1493,18 @@ class Table extends Component {
|
|||
if(hasFixedLeft){
|
||||
className += ` has-fixed-left`;
|
||||
}
|
||||
let portal = props.canConfigureTableSize && typeof window !== 'undefined' && props.getToolbarContainer ? (
|
||||
<Portal container={props.getToolbarContainer}>
|
||||
{ this.getTableToolbar() }
|
||||
</Portal>
|
||||
) : this.getTableToolbar();
|
||||
|
||||
return (
|
||||
<div className={className} style={props.style} ref={el => this.contentTable = el}
|
||||
tabIndex={props.focusable && (props.tabIndex?props.tabIndex:'0')} >
|
||||
{ props.canConfigureTableSize &&
|
||||
<div className={`${clsPrefix}-toolbar`}>{portal}</div>
|
||||
}
|
||||
{this.getTitle()}
|
||||
<div className={`${clsPrefix}-content`}>
|
||||
|
||||
|
|
|
|||
|
|
@ -262,6 +262,9 @@ $icon-color:#505F79;
|
|||
&.fixed-height td {
|
||||
padding: 0px $horizontal-padding;
|
||||
}
|
||||
&.fixed-header-height th {
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
&-fixed-header &-body {
|
||||
background: #fff;
|
||||
|
|
@ -1129,3 +1132,21 @@ $icon-color:#505F79;
|
|||
}
|
||||
}
|
||||
}
|
||||
// 调整 table size
|
||||
.u-table-adjustSize-btn.u-button{
|
||||
min-width: 0;
|
||||
padding: 4px 12px;
|
||||
.uf {
|
||||
padding: 0;
|
||||
&:first-child{ margin-right: 8px; }
|
||||
&:last-child{ font-size: 12px; }
|
||||
}
|
||||
}
|
||||
.u-table-adjustSize-menus.u-dropdown-menu>.u-dropdown-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
svg{ margin-right: 4px; }
|
||||
}
|
||||
|
|
@ -54,6 +54,7 @@ class TableRow extends Component{
|
|||
this._timeout = null;
|
||||
this.state = {
|
||||
hovered: false,
|
||||
tableSizeConf: {}
|
||||
};
|
||||
this.onRowClick = this.onRowClick.bind(this);
|
||||
this.onRowDoubleClick = this.onRowDoubleClick.bind(this);
|
||||
|
|
@ -82,6 +83,16 @@ class TableRow extends Component{
|
|||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps){
|
||||
const { tableSizeConf:newTableSizeConf } = nextProps;
|
||||
const { tableSizeConf:oldTableSizeConf } = this.props;
|
||||
if( newTableSizeConf !== oldTableSizeConf ){
|
||||
this.setState({
|
||||
tableSizeConf: newTableSizeConf
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 事件初始化
|
||||
*/
|
||||
|
|
@ -445,6 +456,7 @@ class TableRow extends Component{
|
|||
}
|
||||
|
||||
render() {
|
||||
const { tableSizeConf } = this.state;
|
||||
const {
|
||||
clsPrefix, columns, record, height, visible, index,
|
||||
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,rowDraggAble,
|
||||
|
|
@ -520,6 +532,9 @@ class TableRow extends Component{
|
|||
if(record && record._checked){
|
||||
className += ' selected';
|
||||
}
|
||||
if (tableSizeConf && tableSizeConf.fontSize) {
|
||||
style.fontSize = tableSizeConf.fontSize;
|
||||
}
|
||||
return (
|
||||
<tr
|
||||
draggable={rowDraggAble}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
// 紧凑、适中、宽松型图标，后续更新 iconfont 资源后，可以删掉该文件
|
||||
|
||||
export default {
|
||||
compact: <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 7.554h13.999V6H5v1.554zm0 2.816h13.999V8.814H5v1.556zm0 2.814h13.999v-1.556H5v1.556zm0 2.814h13.999v-1.555H5v1.555zm0 2.815h13.999v-1.554H5v1.554z" fill="#505F79" fill-rule="evenodd"/></svg>,
|
||||
moderate: <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 9.163h14V6H5v3.163zm0 4.825h14v-3.163H5v3.163zm0 4.825h14v-3.164H5v3.164z" fill="#505F79" fill-rule="evenodd"/></svg>,
|
||||
easy: <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 11.075h14V6H5v5.075zm0 7.739h14v-5.075H5v5.075z" fill="#505F79" fill-rule="evenodd"/></svg>
|
||||
}
|
||||
Loading…
Reference in New Issue