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

feat: 增加表格内容是否显示在一行

This commit is contained in:
izbz wh 2019-04-23 16:04:02 +08:00
parent 162dec5d37
commit df755b9a22
15 changed files with 171 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
build/Table.css
View File

@ -47,7 +47,7 @@
background: rgb(235, 236, 240); }
.u-table th,
.u-table td {
padding: 12px 16px;
padding: 12px 8px;
word-break: break-all; }
.u-table th.text-center,
.u-table td.text-center {
@ -88,7 +88,7 @@
background: rgb(241, 242, 245);
color: rgb(33, 33, 33); }
.u-table.fixed-height td {
padding: 0px 16px; }
padding: 0px 8px; }
.u-table-fixed-header .u-table-body {
background: #fff;
position: relative; }
@ -106,17 +106,17 @@
overflow-y: scroll;
box-sizing: border-box; }
.u-table-title {
padding: 12px 16px;
padding: 12px 8px;
border-top: 1px solid rgb(193, 199, 208); }
.u-table-content {
position: relative; }
.u-table-footer {
padding: 12px 16px;
padding: 12px 8px;
border-bottom: 1px solid rgb(193, 199, 208); }
.u-table-footer .u-table-scroll {
overflow-x: hidden; }
.u-table-footer .u-table {
margin: -12px -16px; }
margin: -12px -8px; }
.u-table-placeholder {
padding: 12px 8px;
background: #fff;
@ -585,3 +585,21 @@
::-webkit-scrollbar-track-piece {
display: none; }
.header-dispaly-in-row.u-table table {
table-layout: fixed; }
.header-dispaly-in-row th {
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
overflow: hidden; }
.body-dispaly-in-row.u-table table {
table-layout: fixed; }
.body-dispaly-in-row td {
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
overflow: hidden; }

20
build/Table.js
View File

@ -156,6 +156,15 @@ var Table = function (_Component) {
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.resize = function () {
(0, _utils.debounce)(_this.syncFixedTableRowHeight, 150);
_this.computeTableWidth();
var renderFlag = _this.state.renderFlag;
_this.setState({
renderFlag: !renderFlag
});
};
_this.renderDragHideTable = function () {
var _this$props = _this.props,
columns = _this$props.columns,
@ -270,7 +279,7 @@ var Table = function (_Component) {
}
if (this.columnManager.isAnyColumnsFixed()) {
this.syncFixedTableRowHeight();
this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', (0, _utils.debounce)(this.syncFixedTableRowHeight, 150));
this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', this.resize);
}
};
@ -785,7 +794,8 @@ var Table = function (_Component) {
treeType: childrenColumn || this.treeType ? true : false,
fixedIndex: fixedIndex + lazyCurrentIndex,
rootIndex: rootIndex,
syncHover: props.syncHover
syncHover: props.syncHover,
bodyDisplayInRow: props.bodyDisplayInRow
})));
this.treeRowIndex++;
var subVisible = visible && isRowExpanded;
@ -1325,6 +1335,12 @@ var Table = function (_Component) {
if (props.height) {
className += ' fixed-height';
}
if (props.bodyDisplayInRow) {
className += ' body-dispaly-in-row';
}
if (props.headerDisplayInRow) {
className += ' header-dispaly-in-row';
}
var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y;
var loading = props.loading;
if (typeof loading === 'boolean') {

12
build/TableCell.js
View File

@ -73,7 +73,8 @@ var TableCell = function (_Component) {
expandIcon = _props2.expandIcon,
column = _props2.column,
fixed = _props2.fixed,
showSum = _props2.showSum;
showSum = _props2.showSum,
bodyDisplayInRow = _props2.bodyDisplayInRow;
var dataIndex = column.dataIndex,
render = column.render;
var _column$className = column.className,
@ -83,7 +84,8 @@ var TableCell = function (_Component) {
var text = _objectPath2["default"].get(record, dataIndex);
var tdProps = void 0;
var colSpan = void 0;
var rowSpan = void 0;
var rowSpan = void 0,
title = void 0;
if (render && !showSum) {
text = render(text, record, index);
@ -114,13 +116,17 @@ var TableCell = function (_Component) {
if (column.textAlign) {
className = className + (' text-' + column.textAlign);
}
if (typeof text == 'string' && bodyDisplayInRow) {
title = text;
}
return _react2["default"].createElement(
'td',
{
colSpan: colSpan,
rowSpan: rowSpan,
className: className,
onClick: this.handleClick
onClick: this.handleClick,
title: title
},
indentText,
expandIcon,

6
build/TableRow.js
View File

@ -241,7 +241,8 @@ var TableRow = function (_Component) {
indent = _props9.indent,
indentSize = _props9.indentSize,
isHiddenExpandIcon = _props9.isHiddenExpandIcon,
fixed = _props9.fixed;
fixed = _props9.fixed,
bodyDisplayInRow = _props9.bodyDisplayInRow;
var showSum = false;
var className = this.props.className;
@ -288,7 +289,8 @@ var TableRow = function (_Component) {
key: index + "_" + (columns[i].key || columns[i].dataIndex || i),
fixed: fixed,
showSum: showSum,
expandIcon: isColumnHaveExpandIcon ? expandIcon : null
expandIcon: isColumnHaveExpandIcon ? expandIcon : null,
bodyDisplayInRow: bodyDisplayInRow
}));
}
var style = { height: height };

4
build/lib/multiSelect.js
View File

@ -97,7 +97,7 @@ function multiSelect(Table, Checkbox) {
var count = 0;
var disabledCount = 0;
data.forEach(function (da) {
if (da._checked) {
if (da._checked && !da._disabled) {
count++;
}
if (da._disabled) {
@ -223,7 +223,7 @@ function multiSelect(Table, Checkbox) {
key: "checkbox",
dataIndex: "checkbox",
fixed: "left",
width: 50,
width: 60,
render: function render(text, record, index) {
var attr = {};
record._disabled ? attr.disabled = record._disabled : "";

28
dist/demo.css vendored
View File

@ -8305,7 +8305,7 @@ ul {
background: rgb(235, 236, 240); }
.u-table th,
.u-table td {
padding: 12px 16px;
padding: 12px 8px;
word-break: break-all; }
.u-table th.text-center,
.u-table td.text-center {
@ -8346,7 +8346,7 @@ ul {
background: rgb(241, 242, 245);
color: rgb(33, 33, 33); }
.u-table.fixed-height td {
padding: 0px 16px; }
padding: 0px 8px; }
.u-table-fixed-header .u-table-body {
background: #fff;
position: relative; }
@ -8364,17 +8364,17 @@ ul {
overflow-y: scroll;
box-sizing: border-box; }
.u-table-title {
padding: 12px 16px;
padding: 12px 8px;
border-top: 1px solid rgb(193, 199, 208); }
.u-table-content {
position: relative; }
.u-table-footer {
padding: 12px 16px;
padding: 12px 8px;
border-bottom: 1px solid rgb(193, 199, 208); }
.u-table-footer .u-table-scroll {
overflow-x: hidden; }
.u-table-footer .u-table {
margin: -12px -16px; }
margin: -12px -8px; }
.u-table-placeholder {
padding: 12px 8px;
background: #fff;
@ -8848,6 +8848,24 @@ ul {
::-webkit-scrollbar-track-piece {
display: none; }
.header-dispaly-in-row.u-table table {
table-layout: fixed; }
.header-dispaly-in-row th {
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
overflow: hidden; }
.body-dispaly-in-row.u-table table {
table-layout: fixed; }
.body-dispaly-in-row td {
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
overflow: hidden; }
.selected {
background: #FFF7E7; }

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

51
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

3
docs/api.md
View File

@ -101,7 +101,8 @@ import 'bee-table/build/Table.css';
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
| textAlign | 内容对齐方式，默认是左对齐（'left、right、center'） | string |
| headerDisplayInRow | 设置表头的内容显示一行，超出显示省略号 | bool |
| bodyDisplayInRow | 设置表体的内容显示一行，超出显示省略号 | bool |
## 快捷键API

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "2.0.12",
"version": "2.0.13-beta.2",
"description": "Table ui component for react",
"keywords": [
"react",

13
src/Table.js
View File

@ -231,9 +231,13 @@ class Table extends Component {
}
}
resize(){
resize = ()=>{
debounce(this.syncFixedTableRowHeight, 150);
this.computeTableWidth();
let renderFlag = this.state.renderFlag;
this.setState({
renderFlag: !renderFlag
});
}
computeTableWidth() {
@ -652,6 +656,7 @@ class Table extends Component {
fixedIndex={fixedIndex+lazyCurrentIndex}
rootIndex = {rootIndex}
syncHover = {props.syncHover}
bodyDisplayInRow = {props.bodyDisplayInRow}
/>
);
this.treeRowIndex++;
@ -1193,6 +1198,12 @@ class Table extends Component {
if(props.height){
className += ' fixed-height';
}
if(props.bodyDisplayInRow){
className += ' body-dispaly-in-row'
}
if(props.headerDisplayInRow){
className += ' header-dispaly-in-row'
}
const isTableScroll = this.columnManager.isAnyColumnsFixed() ||
props.scroll.x ||
props.scroll.y;

31
src/Table.scss
View File

@ -10,7 +10,7 @@ $table-border-color: unquote("rgb(#{$table-border-color-base})");
// $table-head-background-color: #f7f7f7;
// $table-head-text-color: #666;
$vertical-padding: 12px;
$horizontal-padding: 16px;
$horizontal-padding: 8px;
// $table-border-color: #e9e9e9;
$table-hover-color: #E7F2FC;
@ -893,3 +893,32 @@ $icon-color:#505F79;
::-webkit-scrollbar-track-piece {
display: none;
}
// 表格显示里面的内容显示在一行
.header-dispaly-in-row{
&.u-table{
table{
table-layout: fixed;
}
}
th{
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
overflow: hidden;
}
}
.body-dispaly-in-row{
&.u-table{
table{
table-layout: fixed;
}
}
td{
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
overflow: hidden;
}
}

8
src/TableCell.js
View File

@ -30,14 +30,14 @@ class TableCell extends Component{
}
render() {
const { record, indentSize, clsPrefix, indent,
index, expandIcon, column ,fixed,showSum} = this.props;
index, expandIcon, column ,fixed,showSum, bodyDisplayInRow} = this.props;
const { dataIndex, render } = column;
let {className = ''} = column;
let text = objectPath.get(record, dataIndex);
let tdProps;
let colSpan;
let rowSpan;
let rowSpan,title;
if (render && !showSum) {
text = render(text, record, index);
@ -71,12 +71,16 @@ class TableCell extends Component{
if(column.textAlign){
className = className+` text-${column.textAlign}`;
}
if(typeof text == 'string' && bodyDisplayInRow){
title = text
}
return (
<td
colSpan={colSpan}
rowSpan={rowSpan}
className={className}
onClick={this.handleClick}
title = {title}
>
{indentText}
{expandIcon}

3
src/TableRow.js
View File

@ -164,7 +164,7 @@ class TableRow extends Component{
const {
clsPrefix, columns, record, height, visible, index,
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
} = this.props;
let showSum = false;
let { className } = this.props;
@ -215,6 +215,7 @@ class TableRow extends Component{
fixed= {fixed}
showSum={showSum}
expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null}
bodyDisplayInRow = {bodyDisplayInRow}
/>
);
}