feat(bee-table): column render方法新增第四个参数为column设置的属性

This commit is contained in:
liushaozhen 2020-04-16 14:19:24 +08:00
parent 3a6626c43b
commit b4b0c95c9c
10 changed files with 10972 additions and 213 deletions

View File

@ -951,8 +951,6 @@ var Table = function (_Component) {
if (rootIndex == -1) { if (rootIndex == -1) {
index = i + lazyParentIndex; index = i + lazyParentIndex;
} }
console.log('preHeight', props.preHeight);
console.log('height: ', height);
rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({ rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({
indent: indent, indent: indent,
indentSize: props.indentSize, indentSize: props.indentSize,

View File

@ -38,6 +38,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
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; } 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; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@ -313,12 +315,15 @@ var TableCell = function (_Component) {
bodyDisplayInRow = _props2.bodyDisplayInRow, bodyDisplayInRow = _props2.bodyDisplayInRow,
lazyStartIndex = _props2.lazyStartIndex, lazyStartIndex = _props2.lazyStartIndex,
lazyEndIndex = _props2.lazyEndIndex; lazyEndIndex = _props2.lazyEndIndex;
var dataIndex = column.dataIndex, var dataIndex = column.dataIndex,
render = column.render, render = column.render,
fieldType = column.fieldType, fieldType = column.fieldType,
linkConfig = column.linkConfig, linkConfig = column.linkConfig,
fontColor = column.fontColor, fontColor = column.fontColor,
bgColor = column.bgColor; bgColor = column.bgColor,
other = _objectWithoutProperties(column, ['dataIndex', 'render', 'fieldType', 'linkConfig', 'fontColor', 'bgColor']);
var _column$className = column.className, var _column$className = column.className,
className = _column$className === undefined ? '' : _column$className; className = _column$className === undefined ? '' : _column$className;
@ -330,7 +335,8 @@ var TableCell = function (_Component) {
title = void 0; title = void 0;
if (render && !showSum) { if (render && !showSum) {
text = render(text, record, index); text = render(text, record, index, _extends({
dataIndex: dataIndex, render: render, fieldType: fieldType, linkConfig: linkConfig, fontColor: fontColor, bgColor: bgColor }, other));
if (this.isInvalidRenderCellText(text)) { if (this.isInvalidRenderCellText(text)) {
tdProps = text.props || {}; tdProps = text.props || {};
rowSpan = tdProps.rowSpan > lazyEndIndex && lazyEndIndex > 5 ? lazyEndIndex - index : tdProps.rowSpan; rowSpan = tdProps.rowSpan > lazyEndIndex && lazyEndIndex > 5 ? lazyEndIndex - index : tdProps.rowSpan;

237
dist/demo.css vendored
View File

@ -907,4 +907,241 @@
background: #344563; background: #344563;
border-color: #505F79; } border-color: #505F79; }
.demo04.u-table tr:nth-child(2n) {
background: #f7f9fb; }
.demo04.u-table tr.u-table-row-hover, .demo04 .u-table tr:hover {
background: #ebecf0; }
.demo22 .opt-btns {
margin-bottom: 8px; }
.demo32 .u-table-thead th {
padding-top: 0px;
padding-bottom: 0px; }
.demo0501 .u-table .u-row-hover .opt-btns button, .demo0501 .u-table .u-row-hover .cancel-btns button {
margin: 0; }
.demo0501 .u-table .u-row-hover .opt-btns button:first-child, .demo0501 .u-table .u-row-hover .cancel-btns button:first-child {
margin-right: 8px; }
.demo0501 .u-table .u-table-row td {
padding: 5px 8px; }
.demo0501 .u-table .u-table-row td input {
font-size: 12px;
padding-left: 5px; }
.demo0501 .u-table .u-table-row .u-form-control,
.demo0501 .u-table .u-table-row .u-select-selection {
height: 30px; }
.demo0501 .u-table .editable-cell-text-wrapper {
box-sizing: border-box;
line-height: 20px;
border-radius: 3px; }
.demo0501 .u-table .required {
margin-left: 10px;
position: relative; }
.demo0501 .u-table .required::before {
content: " ";
border: 1px solid #F44336;
width: 0;
height: 12px;
position: absolute;
top: 9px;
left: -8px; }
.demo0501 .u-table .required span.u-input-group {
display: block; }
.demo0501 .u-table .verify-cell {
padding-right: 25px !important; }
.demo0501 .u-table .required-icon {
position: absolute;
top: 2px;
color: #F44336;
font-size: 20px; }
.demo0501 .u-table .ref-input-wrap {
width: 160px !important; }
.u-editable-table-tp .tp-content {
color: #F44336; }
.u-editable-table .u-table .u-table-row td {
padding: 5px 8px; }
.u-editable-table .u-table .u-table-row td input {
padding-left: 5px;
font-size: 12px; }
.u-editable-table .u-table .u-table-row td input.error {
border-color: #F44336; }
.u-editable-table .u-table .u-table-row .editable-cell {
height: 30px; }
.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper {
line-height: 19px; }
.u-editable-table .u-table .u-table-row .u-form-control,
.u-editable-table .u-table .u-table-row .u-select-selection {
height: 30px; }
.u-editable-table .u-table .editable-cell-text-wrapper {
box-sizing: border-box;
line-height: 20px;
border-radius: 3px; }
.u-editable-table .u-table .editable-cell-input-wrapper {
padding-right: 0; }
.u-editable-table .u-table .editable-cell-input-wrapper .ref-input-wrap {
width: auto !important;
height: 30px; }
.u-editable-table .u-table .editable-cell-input-wrapper .ref-input-wrap .u-input-group {
display: inline-block; }
.u-editable-table .u-table .verify-cell {
padding-right: 25px !important; }
.u-editable-table .u-table .require {
position: absolute;
top: 2px;
color: #F44336;
font-size: 20px; }
.u-editable-table-tp .tp-content {
color: #F44336; }
.demo0503-m-b.u-modal .u-modal-body {
padding: 16px 0;
background: #f7f9fb; }
.demo0503-m-b .u-form-group {
overflow: hidden; }
.demo0503-m-b .u-form-control {
font-size: 12px; }
.demo0503-m-b .editable-cell {
display: block;
float: left;
width: 265px;
padding-right: 25px; }
.demo0503-m-b .ref-input-wrap {
width: 240px !important; }
.demo0503-m-b .u-label {
display: block;
float: left;
text-align: right;
width: 110px;
box-sizing: border-box;
padding-right: 10px;
font-size: 12px;
height: 32px;
line-height: 32px; }
.demo0503-m-b .u-label .mast {
padding: 0;
color: red; }
.demo0503-m-b .required-icon {
position: absolute;
top: 2px;
color: #F44336;
font-size: 20px; }
.u-editable-table-tp {
z-index: 9999 !important; }
.u-editable-table-tp .tp-content {
color: #F44336; }
.ref-core-button .u-button:first-child {
margin-right: 8px; }
.demo0505 .toolbar-btns {
margin-bottom: 8px; }
.demo0505 .toolbar-btns .u-button:first-child {
margin-right: 8px; }
.demo0505 .u-table .u-row-select {
background-color: #FFF7E7; }
.demo0505 .u-table .u-table-row td {
padding: 5px 8px; }
.demo0505 .u-table .u-table-row td input {
font-size: 12px;
padding-left: 5px; }
.demo0505 .u-table .u-table-row .u-form-control,
.demo0505 .u-table .u-table-row .u-select-selection {
height: 30px; }
.demo0505 .u-table .editable-cell-text-wrapper {
box-sizing: border-box;
line-height: 20px;
border-radius: 3px; }
.demo0505 .u-table .required {
margin-left: 10px;
position: relative; }
.demo0505 .u-table .required::before {
content: " ";
border: 1px solid #F44336;
width: 0;
height: 12px;
position: absolute;
top: 9px;
left: -8px; }
.demo0505 .u-table .required span.u-input-group {
display: block; }
.demo0505 .u-table .verify-cell {
padding-right: 25px !important; }
.demo0505 .u-table .edited::after {
content: " ";
position: absolute;
z-index: 999;
top: 0;
left: 0;
border-width: 5px;
border-style: solid;
border-color: #f44336 transparent transparent #f44336; }
.demo0505 .u-table .required-icon {
position: absolute;
top: 2px;
color: #F44336;
font-size: 20px; }
.demo0505 .u-table .ref-input-wrap {
width: 160px !important; }
.u-editable-table-tp .tp-content {
color: #F44336; }
th .drop-menu .uf {
font-size: 12px;
visibility: hidden;
margin-left: 15px; }
th:hover .uf {
visibility: visible; }
.expanded-table .expand-icon-con .uf {
font-size: 12px; }
.demo8 .u-table {
margin-bottom: 11px; }
.demo8 .u-pagination {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center; }
/*# sourceMappingURL=demo.css.map */ /*# sourceMappingURL=demo.css.map */

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

10920
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -122,7 +122,7 @@ import 'bee-table/build/Table.css';
|fixed| 当表水平滚动时此列将被固定true或'left'或'right'| true/'left'/'right'|-| |fixed| 当表水平滚动时此列将被固定true或'left'或'right'| true/'left'/'right'|-|
|sorter|前端列排序方法,只要列上有此属性就说明这列可排序。**注:默认是前端排序,排序方法书写时注意有些字段的值可能是undefined的情况需要转换成0**| function|-| |sorter|前端列排序方法,只要列上有此属性就说明这列可排序。**注:默认是前端排序,排序方法书写时注意有些字段的值可能是undefined的情况需要转换成0**| function|-|
|sorterClick|排序的回调函数|function|-| |sorterClick|排序的回调函数|function|-|
|render|cell的render函数有三个参数这个单元格的文本这行的记录这行的索引它返回一个对象{childrenvalueprops{colSpan1rowSpan1}} ==>'children'是这个单元格的文本props是这个单元格的一些设置可以设置单元格行/列合并|-| |render|cell的render函数有三个参数这个单元格的文本这行的记录这行的索引它返回一个对象{childrenvalueprops{colSpan1rowSpan1}} ==>'children'是这个单元格的文本props是这个单元格的一些设置可以设置单元格行/列合并。2.2.48及以后版本新增第四个参数options为column设置的属性|-|
|onCellClick|单击列的单元格时调用|Function(row, event)|-| |onCellClick|单击列的单元格时调用|Function(row, event)|-|
|onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据| |onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
| order | 设置排序 | string"descend"、"ascend" | -| | order | 设置排序 | string"descend"、"ascend" | -|

View File

@ -1,6 +1,6 @@
{ {
"name": "bee-table", "name": "bee-table",
"version": "2.2.47", "version": "2.2.48",
"description": "Table ui component for react", "description": "Table ui component for react",
"keywords": [ "keywords": [
"react", "react",

View File

@ -783,8 +783,6 @@ class Table extends Component {
if(rootIndex ==-1){ if(rootIndex ==-1){
index = i+lazyParentIndex index = i+lazyParentIndex
} }
console.log('preHeight',props.preHeight)
console.log('height: ',height)
rst.push( rst.push(
<TableRow <TableRow
indent={indent} indent={indent}

View File

@ -177,7 +177,7 @@ class TableCell extends Component{
render() { render() {
const { record, indentSize, clsPrefix, indent, const { record, indentSize, clsPrefix, indent,
index, expandIcon, column ,fixed,showSum, bodyDisplayInRow,lazyStartIndex,lazyEndIndex} = this.props; index, expandIcon, column ,fixed,showSum, bodyDisplayInRow,lazyStartIndex,lazyEndIndex} = this.props;
const { dataIndex, render, fieldType, linkConfig, fontColor, bgColor } = column; const { dataIndex, render, fieldType, linkConfig, fontColor, bgColor,...other } = column;
let {className = ''} = column; let {className = ''} = column;
let text = objectPath.get(record, dataIndex); let text = objectPath.get(record, dataIndex);
@ -186,7 +186,9 @@ class TableCell extends Component{
let rowSpan,title; let rowSpan,title;
if (render && !showSum) { if (render && !showSum) {
text = render(text, record, index); text = render(text, record, index,{
dataIndex, render, fieldType, linkConfig, fontColor, bgColor,...other
});
if (this.isInvalidRenderCellText(text)) { if (this.isInvalidRenderCellText(text)) {
tdProps = text.props || {}; tdProps = text.props || {};
rowSpan = (tdProps.rowSpan>lazyEndIndex && lazyEndIndex>5)?lazyEndIndex-index:tdProps.rowSpan; rowSpan = (tdProps.rowSpan>lazyEndIndex && lazyEndIndex>5)?lazyEndIndex-index:tdProps.rowSpan;