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

拖拽优化测试

This commit is contained in:
jonyshi 2019-04-19 11:02:20 +08:00
parent 43b650d9a2 0f3db7e24c
commit a9ccbaa37e
50 changed files with 26348 additions and 49334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
build/Table.js
View File

@ -159,14 +159,13 @@ var Table = function (_Component) {
_this.renderDragHideTable = function () {
var _this$props = _this.props,
columns = _this$props.columns,
dragborder = _this$props.dragborder,
dragborderKey = _this$props.dragborderKey;
dragborder = _this$props.dragborder;
if (!dragborder) return null;
var sum = 0;
return _react2["default"].createElement(
'div',
{ id: 'u-table-drag-hide-table-' + dragborderKey, className: _this.props.clsPrefix + '-hiden-drag' },
{ className: _this.props.clsPrefix + '-hiden-drag' },
columns.map(function (da, i) {
sum += da.width ? da.width : 0;
return _react2["default"].createElement('div', { className: _this.props.clsPrefix + '-hiden-drag-li', key: da + "_hiden_" + i, style: { left: sum + "px" } });
@ -466,7 +465,6 @@ var Table = function (_Component) {
onMouseUp = _props.onMouseUp,
dragborder = _props.dragborder,
onThMouseMove = _props.onThMouseMove,
dragborderKey = _props.dragborderKey,
minColumnWidth = _props.minColumnWidth,
headerHeight = _props.headerHeight,
afterDragColWidth = _props.afterDragColWidth,
@ -486,7 +484,7 @@ var Table = function (_Component) {
var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnter: onDragEnter, draggable: draggable } : {};
var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey, onDropBorder: onDropBorder } : {};
var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, onDropBorder: onDropBorder } : {};
var contentWidthDiff = 0;
//非固定表格,宽度不够时自动扩充
if (!fixed) {
@ -648,8 +646,7 @@ var Table = function (_Component) {
clsPrefix: clsPrefix + '-expanded-row',
indent: 1,
expandable: false,
store: this.store,
dragborderKey: this.props.dragborderKey
store: this.store
});
};
/**

301
build/TableHeader.js
View File

@ -50,6 +50,108 @@ var TableHeader = function (_Component) {
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.onTrMouseDown = function (e) {
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
var _this$props = _this.props,
clsPrefix = _this$props.clsPrefix,
contentTable = _this$props.contentTable;
var type = _utils.Event.getTarget(event).getAttribute('data-type');
if (!_this.props.dragborder && !_this.props.draggable) return;
if (type == 'online' && _this.props.dragborder) {
var currentIndex = parseInt(_utils.Event.getTarget(event).getAttribute("data-line-index"));
var defaultWidth = _utils.Event.getTarget(event).getAttribute("data-th-width");
var currentObj = _this.table.cols[currentIndex];
_this.drag.option = "border"; //拖拽操作
_this.drag.currIndex = currentIndex;
_this.drag.oldLeft = event.x;
_this.drag.oldWidth = parseInt(currentObj.style.width);
_this.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
_this.drag.tableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
} else if (type != 'online' && _this.props.draggable) {} else {
console.log("onTrMouseDown dragborder or draggable is all false !");
return;
}
};
_this.onTrMouseMove = function (e) {
var _this$props2 = _this.props,
clsPrefix = _this$props2.clsPrefix,
dragborder = _this$props2.dragborder,
contentDomWidth = _this$props2.contentDomWidth,
scrollbarWidth = _this$props2.scrollbarWidth,
contentTable = _this$props2.contentTable,
headerScroll = _this$props2.headerScroll;
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
if (_this.props.dragborder && _this.drag.option == "border") {
//移动改变宽度
var currentCols = _this.table.cols[_this.drag.currIndex];
var diff = event.x - _this.drag.oldLeft;
var newWidth = _this.drag.oldWidth + diff;
_this.drag.newWidth = newWidth;
// if(newWidth > this.drag.minWidth){
if (newWidth > _this.minWidth) {
currentCols.style.width = newWidth + 'px';
//hao 支持固定表头拖拽 修改表体的width
if (_this.fixedTable.cols) {
_this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px";
}
var newTableWidth = _this.drag.tableWidth + diff + 'px';
_this.table.table.style.width = newTableWidth; //改变table的width
_this.table.innerTableBody.style.width = newTableWidth;
var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
//表头滚动条处理
if (headerScroll) {
if (showScroll < 0) {
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
_this.table.contentTableHeader.style.overflowX = 'scroll';
_this.optTableMargin(_this.table.fixedLeftHeaderTable, scrollbarWidth);
_this.optTableMargin(_this.table.fixedRighHeadertTable, scrollbarWidth);
// fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】
} else {
_this.table.contentTableHeader.style.overflowX = 'hidden';
_this.optTableMargin(_this.table.fixedLeftHeaderTable, 0);
_this.optTableMargin(_this.table.fixedRighHeadertTable, 0);
}
} else {
if (showScroll < 0) {
_this.optTableMargin(_this.table.fixedLeftBodyTable, '-' + scrollbarWidth);
_this.optTableMargin(_this.table.fixedRightBodyTable, '-' + scrollbarWidth);
_this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'scroll' });
_this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'scroll' });
} else {
_this.optTableMargin(_this.table.fixedLeftBodyTable, 0);
_this.optTableMargin(_this.table.fixedRightBodyTable, 0);
_this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'auto' });
_this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'auto' });
}
}
}
} else if (_this.props.draggable && _this.drag.option == "draggable") {} else {
console.log("onTrMouseMove dragborder or draggable is all false !");
return;
}
};
_this.onTrMouseUp = function (event) {
var width = _this.drag.newWidth;
_this.mouseClear(event);
_this.props.onDropBorder && _this.props.onDropBorder(event, width);
var rows = _this.props.rows;
var data = { rows: rows[0], cols: _this.table.cols, currIndex: _this.drag.currIndex };
_this.props.afterDragColWidth && _this.props.afterDragColWidth(data);
};
_this.optTableMargin = function (table, scrollbarWidth) {
if (table) {
table.style.marginBottom = scrollbarWidth + "px";
@ -69,13 +171,13 @@ var TableHeader = function (_Component) {
};
_this.onLineMouseMove = function (e) {
var _this$props = _this.props,
clsPrefix = _this$props.clsPrefix,
dragborder = _this$props.dragborder,
contentDomWidth = _this$props.contentDomWidth,
scrollbarWidth = _this$props.scrollbarWidth,
contentTable = _this$props.contentTable,
headerScroll = _this$props.headerScroll;
var _this$props3 = _this.props,
clsPrefix = _this$props3.clsPrefix,
dragborder = _this$props3.dragborder,
contentDomWidth = _this$props3.contentDomWidth,
scrollbarWidth = _this$props3.scrollbarWidth,
contentTable = _this$props3.contentTable,
headerScroll = _this$props3.headerScroll;
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
@ -134,9 +236,9 @@ var TableHeader = function (_Component) {
_this.onLineMouseDown = function (e) {
_utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e);
var _this$props2 = _this.props,
clsPrefix = _this$props2.clsPrefix,
contentTable = _this$props2.contentTable;
var _this$props4 = _this.props,
clsPrefix = _this$props4.clsPrefix,
contentTable = _this$props4.contentTable;
if (!_this.props.dragborder) return;
var currentIndex = parseInt(_utils.Event.getTarget(event).getAttribute("data-line-index"));
@ -152,6 +254,10 @@ var TableHeader = function (_Component) {
_this.onLineMouseUp = function (event) {
var width = _this.drag.newWidth;
// const newTableWidth = this.drag.tableWidth + diff +'px';
// this.table.table.style.width = newTableWidth;//同步table的width
// this.table.innerTableBody.style.width = newTableWidth ;//同步改变table body 的width
// console.log(" --onLineMouseUp--- ");
_this.clearDragBorder(event);
_this.props.onDropBorder && _this.props.onDropBorder(event, width);
};
@ -235,11 +341,11 @@ var TableHeader = function (_Component) {
};
_this.filterRenderType = function (type, dataIndex, index) {
var _this$props3 = _this.props,
clsPrefix = _this$props3.clsPrefix,
rows = _this$props3.rows,
filterDelay = _this$props3.filterDelay,
locale = _this$props3.locale;
var _this$props5 = _this.props,
clsPrefix = _this$props5.clsPrefix,
rows = _this$props5.rows,
filterDelay = _this$props5.filterDelay,
locale = _this$props5.locale;
switch (type) {
//文本输入
@ -353,6 +459,111 @@ var TableHeader = function (_Component) {
return _this;
}
TableHeader.prototype.componentDidUpdate = function componentDidUpdate() {
this.initTable();
// this.initEvent();
this.initNewEvent();
};
/**
* 获取table的属性存放在this.table 中。(公用方法)
* @returns
* @memberof TableHeader
*/
TableHeader.prototype.initTable = function initTable() {
var contentTable = this.props.contentTable;
if (!this.props.dragborder && !this.props.draggable) return;
// let el = ReactDOM.findDOMNode(this);
var tableDome = this._thead.parentNode;
var table = {};
if (tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE") {
table.table = tableDome;
table.cols = tableDome.getElementsByTagName("col");
table.ths = tableDome.getElementsByTagName("th");
table.tr = tableDome.getElementsByTagName("tr");
}
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
table.fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer');
table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer');
table.innerTableBody = contentTable.querySelector('.u-table-scroll .u-table-body table');
this.table = table;
if (!this.props.dragborder) return;
if (document.getElementById("u-table-drag-thead-" + this.theadKey)) {
this.fixedTable = {};
var _fixedParentContext = document.getElementById("u-table-drag-thead-" + this.theadKey).parentNode;
var siblingDom = _fixedParentContext.parentNode.nextElementSibling;
if (siblingDom) {
var fixedTable = siblingDom.querySelector("table");
this.fixedTable.table = fixedTable;
this.fixedTable.cols = fixedTable.getElementsByTagName("col");
// this.fixedTable.ths = fixedTable.tableDome.getElementsByTagName("th");
}
}
};
TableHeader.prototype.initNewEvent = function initNewEvent() {
var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }, { key: 'mousedown', fun: this.onTrMouseDown }];
this.eventListen(events, '', this.table.tr[0]); //表示把事件添加到th元素上
// if(this.props.dragborder){
// this.thEventListen([{key:'mousedown',fun:this.onLineMouseDown}]);//表示把事件添加到竖线
// this.bodyEventListen([{key:'mouseup',fun:this.bodyonLineMouseMove}]);
// }
// if(!this.props.draggable)return;
//拖拽交换列事件
// this.thEventListen([{key:'mousedown',fun:this.dragAbleMouseDown}],'',true);//表示把事件添加到th元素上
};
TableHeader.prototype.eventListen = function eventListen(events, type, eventSource) {
var tr = this.table.tr;
for (var i = 0; i < events.length; i++) {
var _event = events[i];
if (type === "remove") {
_utils.EventUtil.removeHandler(eventSource, _event.key, _event.fun);
} else {
_utils.EventUtil.addHandler(eventSource, _event.key, _event.fun);
}
}
};
/**
* 调整列宽的down事件
* @memberof TableHeader
*/
/**
* 调整列宽的move事件
* @memberof TableHeader
*/
/**
* 调整列宽的up事件
* @memberof TableHeader
*/
TableHeader.prototype.mouseClear = function mouseClear() {
if (!this.drag || !this.drag.option) return;
// let {rows} = this.props;
//
//
this.drag = {
option: ""
};
};
/**
*
* 动态绑定th line 事件方法
@ -361,6 +572,8 @@ var TableHeader = function (_Component) {
* @param {*} eventSource 为false 给 th 内部的div增加事件
* @memberof TableHeader
*/
TableHeader.prototype.thEventListen = function thEventListen(events, type, eventSource) {
var _table = this.table,
ths = _table.ths,
@ -410,11 +623,6 @@ var TableHeader = function (_Component) {
}
};
TableHeader.prototype.componentDidUpdate = function componentDidUpdate() {
this.initTable();
this.initEvent();
};
TableHeader.prototype.componentWillUnmount = function componentWillUnmount() {
if (!this.table) return;
if (this.props.draggable) {
@ -425,11 +633,6 @@ var TableHeader = function (_Component) {
}
};
// componentDidMount(){
// this.initTable();
// this.initEvent();
// }
/**
* 初始化拖拽列宽的事件处理
* @returns
@ -463,48 +666,6 @@ var TableHeader = function (_Component) {
this.bodyEventListen([{ key: 'mouseup', fun: this.bodyonLineMouseMove }], 'remove');
};
/**
* 获取table的属性存放在this.table 中。(公用方法)
* @returns
* @memberof TableHeader
*/
TableHeader.prototype.initTable = function initTable() {
var contentTable = this.props.contentTable;
if (!this.props.dragborder && !this.props.draggable) return;
// let el = ReactDOM.findDOMNode(this);
var tableDome = this._thead.parentNode;
var table = {};
if (tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE") {
table.table = tableDome;
table.cols = tableDome.getElementsByTagName("col");
table.ths = tableDome.getElementsByTagName("th");
}
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
table.fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer');
table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer');
table.innerTableBody = contentTable.querySelector('.u-table-scroll .u-table-body table');
this.table = table;
if (!this.props.dragborder) return;
if (document.getElementById("u-table-drag-thead-" + this.theadKey)) {
this.fixedTable = {};
var _fixedParentContext = document.getElementById("u-table-drag-thead-" + this.theadKey).parentNode;
var siblingDom = _fixedParentContext.parentNode.nextElementSibling;
if (siblingDom) {
var fixedTable = siblingDom.querySelector("table");
this.fixedTable.table = fixedTable;
this.fixedTable.cols = fixedTable.getElementsByTagName("col");
// this.fixedTable.ths = fixedTable.tableDome.getElementsByTagName("th");
}
}
};
/**
*相关滚动条联动操作
*
@ -675,6 +836,7 @@ var TableHeader = function (_Component) {
return _this2._thead = _thead;
} }),
rows.map(function (row, index) {
var _rowLeng = row.length - 1;
return _react2["default"].createElement(
"tr",
{ key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
@ -719,13 +881,12 @@ var TableHeader = function (_Component) {
thClassName += " " + clsPrefix + "-thead-th " + canDotDrag;
}
thClassName += " " + fixedStyle;
if (!da.fixed) {
if (!da.fixed && columIndex != _rowLeng) {
return _react2["default"].createElement(
"th",
_extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed,
"data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width }),
"data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width, "data-row-leng": "1111111111111" }),
da.children,
dragborder ? _react2["default"].createElement(
"div",

38
build/lib/dragColumn.js
View File

@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
exports["default"] = dragColumn;
var _react = require('react');
@ -28,7 +28,6 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var cloneDeep = require('lodash.clonedeep');
/**
* 参数: 列拖拽
* @param {*} Table
@ -66,23 +65,23 @@ function dragColumn(Table) {
targetIndex = columns.findIndex(function (da, i) {
return da.key == dragTarg.key;
});
// for (let index = 0; index < columns.length; index++) {
// const da = columns[index];
// if(da.key === dragSource.key){
// columns[index] = dragTargColum;
// }
// if(da.key === dragTarg.key){
// columns[index] = dragSourceColum;
// }
// }
// 向前移动
if (targetIndex < sourceIndex) {
targetIndex = targetIndex + 1;
}
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
_this.setState({
columns: cloneDeep(columns)
var _newColumns = [];
columns.forEach(function (da, i) {
var newDate = _extends(da, {});
newDate.title = da.title;
_newColumns.push(newDate);
});
// console.log(" onDrop-------columns--- ",columns);
_this.setState({
columns: _newColumns //cloneDeep(columns)
});
// console.log(" onDrop-------columns--- ",_newColumns);
console.log(columns === _newColumns);
if (_this.props.onDrop) {
_this.props.onDrop(event, data, columns);
}
@ -106,14 +105,6 @@ function dragColumn(Table) {
}
};
DragColumn.prototype.cloneDeep = function cloneDeep(obj) {
if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) {
return obj;
}
var resultData = {};
return this.recursion(obj, resultData);
};
DragColumn.prototype.recursion = function (_recursion) {
function recursion(_x) {
return _recursion.apply(this, arguments);
@ -150,7 +141,6 @@ function dragColumn(Table) {
onDrop = _props.onDrop,
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
var key = new Date().getTime();
return _react2["default"].createElement(Table, _extends({}, others, {
columns: this.state.columns,
data: data,
@ -161,8 +151,6 @@ function dragColumn(Table) {
onDragEnter: this.onDragEnter,
draggable: draggable,
dragborder: dragborder
// dragborder={false}
, dragborderKey: key
}));
};

79
demo/demolist/Demo01.js
View File

@ -1,79 +0,0 @@
/**
*
* @title 基本表格
* @parent 基础 Basic
* @description 鼠标hover行时呼出操作按钮
*/
import React, { Component } from "react";
import {Button,Tooltip} from "tinper-bee";
import Table from "../../src";
const columns = [
{
title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
fixed:'left',
render: (text, record, index) => {
return (
<Tooltip inverse overlay={text}>
<span tootip={text} style={{
display: "inline-block",
width: "60px",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
verticalAlign: "middle",
}}>{text}</span>
</Tooltip>
);
}
},
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 500,"textAlign":'center'},
{ title: "年龄", dataIndex: "c", key: "c", width: 200,"textAlign":'center' }
];
const data = [
{ a: "令狐冲", b: "男", c: 41, key: "1" },
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
{ a: "郭靖", b: "男", c: 25, key: "3" }
];
class Demo01 extends Component {
constructor(props) {
super(props);
this.state = {
data: data
}
}
handleClick = () => {
console.log('这是第' , this.currentIndex , '行');
console.log('内容：' , this.currentRecord);
}
onRowHover=(index,record)=>{
this.currentIndex = index;
this.currentRecord = record;
}
getHoverContent=()=>{
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
}
render() {
return (
<Table
columns={columns}
data={data}
parentNodeId='parent'
height={40}
headerHeight={40}
bordered = {true}
hoverContent={this.getHoverContent}
onRowHover={this.onRowHover}
/>
);
}
}
export default Demo01;

45
demo/demolist/Demo02.js
View File

@ -1,45 +0,0 @@
/**
*
* @title 默认无数据展示
* @parent 基础 Basic
* @description 无数据时显示效果展示（可自定义）
*
*/
import React, { Component } from 'react';
import Table from '../../src';
import Icon from 'bee-icon';
const columns02 = [
{
title: "Name",
dataIndex: "name",
key: "name",
width: "40%"
},
{
title: "Age",
dataIndex: "age",
key: "age",
width: "30%"
},
{
title: "Address",
dataIndex: "address",
key: "address"
}
];
const data02 = [];
const emptyFunc = () => <Icon type="uf-nodata"></Icon>
class Demo02 extends Component {
render() {
return <Table className="demo02" columns={columns02} data={data02} emptyText={emptyFunc} />;
}
}
export default Demo02;

5
demo/demolist/Demo02.scss
View File

@ -1,5 +0,0 @@
.demo02 {
.u-table-placeholder i{
font-size: 60px;
}
}

78
demo/demolist/Demo03.js
View File

@ -1,78 +0,0 @@
/**
*
* @title 固定表头
* @parent 基础 Basic
* @description 设置`scroll.y`指定滚动区域的高度，添加纵向滚动条，达到固定表头效果
*/
import React, { Component } from 'react';
import Table from '../../src';
const columns03 = [
{
title: "Full Name",
width: 100,
dataIndex: "name",
key: "name"
},
{ title: "Age", width: 100, dataIndex: "age", key: "age"},
{ title: "Address", dataIndex: "address", key: "1" }
];
const data03 = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York Park"
},
{
key: "2",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "3",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "4",
name: "Jim Green",
age: 40,
address: "London Park"
},{
key: "11",
name: "John Brown",
age: 32,
address: "New York Park"
},
{
key: "12",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "13",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "14",
name: "Jim Green",
age: 40,
address: "London Park"
}
];
class Demo03 extends Component {
render() {
return <Table columns={columns03} data={data03} scroll={{y: 150 }} />;
}
}
export default Demo03;

80
demo/demolist/Demo04.js
View File

@ -1,80 +0,0 @@
/**
*
* @title 隔行换色
* @parent 基础 Basic
* @description 可自定义斑马线颜色
*
*/
import React, { Component } from 'react';
import Table from '../../src';
const columns04 = [
{
title: "Full Name",
width: 100,
dataIndex: "name",
key: "name"
},
{ title: "Age", width: 100, dataIndex: "age", key: "age"},
{ title: "Address", dataIndex: "address", key: "1" }
];
const data04 = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York Park"
},
{
key: "2",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "3",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "4",
name: "Jim Green",
age: 40,
address: "London Park"
},{
key: "11",
name: "John Brown",
age: 32,
address: "New York Park"
},
{
key: "12",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "13",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "14",
name: "Jim Green",
age: 40,
address: "London Park"
}
];
class Demo04 extends Component {
render() {
return <Table className="demo04" columns={columns04} data={data04} />;
}
}
export default Demo04;

8
demo/demolist/Demo04.scss
View File

@ -1,8 +0,0 @@
.demo04 {
&.u-table tr:nth-child(2n){
background: #f7f9fb;
}
&.u-table tr.u-table-row-hover, .u-table tr:hover{
background: #ebecf0;
}
}

73
demo/demolist/Demo05.js
View File

@ -1,73 +0,0 @@
/**
*
* @title 表格 Loading 加载
* @parent 基础 Basic
* @description loading可以传boolean或者object对象，object为bee-loading组件的参数类型
*
*/
import React, { Component } from "react";
import Table from "../../src";
import {Button,Popconfirm} from "tinper-bee";
const columns05 = [
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
{
title: "操作",
dataIndex: "d",
key: "d",
render(text, record, index) {
return (
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
<a href="javascript:;">
一些操作
</a>
</Popconfirm>
);
}
}
];
const data05 = [
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
];
class Demo05 extends Component {
constructor(props){
super(props);
this.state = {
loading : true
}
}
changeLoading = () => {
this.setState({
loading : !this.state.loading
})
}
render() {
return (
<div>
<Button
className="editable-add-btn"
onClick={this.changeLoading}
>
切换loading
</Button>
<Table
columns={columns05}
data={data05}
title={currentData => <div>标题: 这是一个标题</div>}
footer={currentData => <div>表尾: 我是小尾巴</div>}
// loading={this.state.loading}或者是boolean
loading={{show:this.state.loading}}
/>
</div>
);
}
}
export default Demo05;

129
demo/demolist/Demo101.js
View File

@ -1,129 +0,0 @@
/**
*
* @title 嵌套子表格
* @parent 扩展行 Expanded Row
* @description 通过expandedRowRender参数来实现子表格
*
*/
import React, { Component } from "react";
import { Popconfirm } from 'tinper-bee';
import Table from "../../src";
import dragColumn from '../../src/lib/dragColumn';
const DragColumnTable = dragColumn(Table);
const columns16 = [
{
title: "操作",
dataIndex: "d",
key: "d",
width:200,
render(text, record, index) {
return (
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
<a href="javascript:;" tooltip={text} >
一些操作
</a>
</Popconfirm>
);
}
},
{ title: "用户名", dataIndex: "a", key: "a", width: 250 },
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
];
const columns17 = [
{
title: "操作",
dataIndex: "d",
key: "d",
width:200,
render(text, record, index) {
return (
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
<a href="javascript:;" tooltip={text} >
一些操作
</a>
</Popconfirm>
);
}
},
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
];
const data16 = [
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
];
class Demo16 extends Component {
constructor(props){
super(props);
this.state={
data_obj:{}
}
}
expandedRowRender = (record, index, indent) => {
let height = 42 * (this.state.data_obj[record.key].length+ 2);
return (
<Table
columns={columns17}
style={{height:height}}
data={this.state.data_obj[record.key]}
/>
);
};
getData=(expanded, record)=>{
//当点击展开的时候才去请求数据
let new_obj = Object.assign({},this.state.data_obj);
if(expanded){
if(record.key==='1'){
new_obj[record.key] = [
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
]
this.setState({
data_obj:new_obj
})
}else{
new_obj[record.key] = [
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" }
]
this.setState({
data_obj:new_obj
})
}
}
}
haveExpandIcon=(record, index)=>{
//控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效
if(index == 0){
return true;
}
return false;
}
render() {
return (
<DragColumnTable
columns={columns16}
data={data16}
onExpand={this.getData}
expandedRowRender={this.expandedRowRender}
scroll={{x:true}}
dragborder={true}
draggable={true}
title={currentData => <div>标题: 这是一个标题</div>}
footer={currentData => <div>表尾: 我是小尾巴</div>}
/>
);
}
}
export default Demo16;

132
demo/demolist/Demo102.js
View File

@ -1,132 +0,0 @@
/**
*
* @title 层级树型展示
* @parent 扩展行 Expanded Row
* @description 通过在data中配置children数据，来自动生成树形表格
*
*/
import React, { Component } from 'react';
import Table from '../../src';
const columns4 = [
{
title: "Name",
dataIndex: "name",
key: "name",
width: "40%"
},
{
title: "Age",
dataIndex: "age",
key: "age",
width: "30%"
},
{
title: "Address",
dataIndex: "address",
key: "address"
}
];
const data4 = [
{
key: 1,
name: "John Brown sr.",
age: 60,
address: "New York No. 1 Lake Park",
children: [
{
key: 11,
name: "John Brown",
age: 42,
address: "New York No. 2 Lake Park"
},
{
key: 12,
name: "John Brown jr.",
age: 30,
address: "New York No. 3 Lake Park",
children: [
{
key: 121,
name: "Jimmy Brown",
age: 16,
address: "New York No. 3 Lake Park"
}
]
},
{
key: 13,
name: "Jim Green sr.",
age: 72,
address: "London No. 1 Lake Park",
children: [
{
key: 131,
name: "Jim Green",
age: 42,
address: "London No. 2 Lake Park",
children: [
{
key: 1311,
name: "Jim Green jr.",
age: 25,
address: "London No. 3 Lake Park"
},
{
key: 1312,
name: "Jimmy Green sr.",
age: 18,
address: "London No. 4 Lake Park"
}
]
}
]
}
]
},
{
key: 2,
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park"
}
];
class Demo4 extends Component {
constructor(props){
super(props);
this.state = {
data: data4,
factoryValue: 0,
selectedRow: new Array(data4.length)//状态同步
}
}
render() {
return <Table
rowClassName={(record,index,indent)=>{
if (this.state.selectedRow[index]) {
return 'selected';
} else {
return '';
}
}}
onRowClick={(record,index,indent)=>{
let selectedRow = new Array(this.state.data.length);
selectedRow[index] = true;
this.setState({
factoryValue: record,
selectedRow: selectedRow
});
}}
columns={columns4} data={data4} />;
}
}
export default Demo4;

59
demo/demolist/Demo103.js
View File

@ -1,59 +0,0 @@
/**
*
* @title 选中行颜色、自定义表格标题和表尾
* @parent 扩展行 Expanded Row
* @description 选中行的样式可自定义
*/
import React, { Component } from "react";
import {Button,Tooltip,} from "tinper-bee";
import Table from "../../src";
const columns = [
{ title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName"},
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
];
const data = [
{ a: "令狐冲", b: "男", c: 41, key: "1" },
{ a: "黄蓉", b: "男", c: 67, key: "2" },
{ a: "郭靖", b: "男", c: 25, key: "3" }
];
class Demo26 extends Component {
constructor(props){
super(props);
this.state = {
data: data,
selectedRowIndex: 0
}
}
render() {
return (
<Table
columns={columns}
data={data}
rowClassName={(record,index,indent)=>{
if (this.state.selectedRowIndex == index) {
return 'selected';
} else {
return '';
}
}}
onRowClick={(record,index,indent)=>{
this.setState({
selectedRowIndex: index
});
}}
title={currentData => <div>标题: 这是一个标题</div>}
footer={currentData => <div>表尾: 我是小尾巴</div>}
/>
);
}
}
export default Demo26;

87
demo/demolist/Demo104.js
View File

@ -1,87 +0,0 @@
/**
*
* @title 自定义行高
* @parent 扩展行 Expanded Row
* @description 设置`height`属性自定义表格行高，设置`headerHeight`属性自定义表头高度。
*/
import React, { Component } from "react";
import {Button,Tooltip} from "tinper-bee";
import Table from "../../src";
const columns = [
{
title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
fixed:'left',
render: (text, record, index) => {
return (
<Tooltip inverse overlay={text}>
<span tootip={text} style={{
display: "inline-block",
width: "60px",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
verticalAlign: "middle",
}}>{text}</span>
</Tooltip>
);
}
},
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
];
const data = [
{ a: "令狐冲", b: "男", c: 41, key: "1" },
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
{ a: "郭靖", b: "男", c: 25, key: "3" }
];
class Demo1 extends Component {
constructor(props) {
super(props);
this.state = {
data: data,
selectedRowIndex: 0
}
}
handleClick = () => {
console.log('这是第' , this.currentIndex , '行');
console.log('内容：' , this.currentRecord);
}
onRowHover=(index,record)=>{
this.currentIndex = index;
this.currentRecord = record;
}
getHoverContent=()=>{
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
}
render() {
return (
<Table
columns={columns}
data={data}
parentNodeId='parent'
height={40}
headerHeight={40}
hoverContent={this.getHoverContent}
onRowHover={this.onRowHover}
onRowClick={(record, index, indent) => {
this.setState({
selectedRowIndex: index
});
}}
/>
);
}
}
export default Demo1;

110
demo/demolist/Demo105.js
View File

@ -1,110 +0,0 @@
/**
*
* @title 图片在表格中的展示
* @parent 扩展行 Expanded Row
* @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer
*/
import React, { Component } from "react";
import {Button,Tooltip} from "tinper-bee";
import Table from "../../src";
const columns = [
{
title: "序号",
dataIndex: "index",
key: "index",
width: 80,
render(text, record, index) {
return index + 1;
}
},
{
title: "组织部门",
dataIndex: "orgDept",
key: "orgDept",
width: 100,
},
{
title: "设施管理部门",
dataIndex: "facilityManageUnit",
key: "facilityManageUnit",
width: 100,
},
{
title: "案卷编号",
dataIndex: "docketnum",
key: "docketnum",
width: 100,
},
{
title: "数量",
dataIndex: "num",
key: "num",
width: 100,
},
{
title: "首次发现时间",
dataIndex: "discoveryTime",
key: "discoveryTime",
width: 150,
},
{
title: "实际修复时间",
dataIndex: "repairTime",
key: "repairTime",
width: 150,
},
{
title: "图样",
dataIndex: "picture",
key: "picture",
render(text, record, index) {
return <img style={{height:'50px'}} src={text} alt="Picture"/>
}
}
];
const data = [
{ key: "1", orgDept: "组织1", facilityManageUnit: "部门1", docketnum: 41, num: "1", discoveryTime: "2018-10-17", repairTime: "2018-10-30", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg"},
{ key: "2", orgDept: "组织2", facilityManageUnit: "部门2", docketnum: 30, num: "2", discoveryTime: "2019-01-15", repairTime: "2019-01-20", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-2-min.jpg"},
{ key: "3", orgDept: "组织3", facilityManageUnit: "部门3", docketnum: 35, num: "3", discoveryTime: "2019-04-10", repairTime: "2019-04-17", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-3-min.jpg"}
];
class Demo105 extends Component {
constructor(props) {
super(props);
this.state = {
data: data,
selectedRowIndex: 0
}
}
handleClick = () => {
console.log('这是第' , this.currentIndex , '行');
console.log('内容：' , this.currentRecord);
}
onRowHover=(index,record)=>{
this.currentIndex = index;
this.currentRecord = record;
}
getHoverContent=()=>{
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
}
render() {
return (
<Table
columns={columns}
data={data}
parentNodeId='parent'
hoverContent={this.getHoverContent}
onRowHover={this.onRowHover}
/>
);
}
}
export default Demo105;

123
demo/demolist/Demo106.js
View File

@ -1,123 +0,0 @@
/**
*
* @title 自定义行、列合并
* @parent 扩展行 Expanded Row
* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
*
*/
import React, { Component } from "react";
import Table from "../../src";
const renderContent = (value, row, index) => {
const obj = {
children: value,
props: {},
};
if (index === 4) {
obj.props.colSpan = 0;
}
return obj;
};
const columns = [{
title: 'Name',
key: "name",
dataIndex: 'name',
render: (text, row, index) => {
if (index < 4) {
return <a href="#">{text}</a>;
}
return {
children: <a href="#">{text}</a>,
props: {
colSpan: 5,
},
};
},
}, {
title: 'Age',
key: "Age",
dataIndex: 'age',
render: renderContent,
}, {
title: 'Home phone',
colSpan: 2,
key: "tel",
dataIndex: 'tel',
render: (value, row, index) => {
const obj = {
children: value,
props: {},
};
if (index === 2) {
obj.props.rowSpan = 2;
}
if (index === 3) {
obj.props.rowSpan = 0;
}
if (index === 4) {
obj.props.colSpan = 0;
}
return obj;
},
}, {
title: 'Phone',
colSpan: 0,
key: "phone",
dataIndex: 'phone',
render: renderContent,
}, {
title: 'Address',
key: "address",
dataIndex: 'address',
render: renderContent,
}];
const data = [{
key: '1',
name: 'John Brown',
age: 32,
tel: '0571-22098909',
phone: 18889898989,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Jim Green',
tel: '0571-22098333',
phone: 18889898888,
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Joe Black',
age: 32,
tel: '0575-22098909',
phone: 18900010002,
address: 'Sidney No. 1 Lake Park',
}, {
key: '4',
name: 'Jim Red',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: 'London No. 2 Lake Park',
}, {
key: '5',
name: 'Jake White',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: 'Dublin No. 2 Lake Park',
}];
class Demo15 extends Component {
render() {
return (
<Table columns={columns} data={data}/>
);
}
}
export default Demo15;

140
demo/demolist/Demo11.js
View File

@ -1,140 +0,0 @@
/**
*
* @title 横向滚动条
* @parent 滚动 Scroll View
* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
*/
import React, { Component } from "react";
import Table from "../../src";
const columns11 = [
{
title: "序号",
dataIndex: "index",
key: "index",
width: 200,
},
{
title: "订单编号",
dataIndex: "orderCode",
key: "orderCode",
width: 200,
},
{
title: "供应商名称",
dataIndex: "supplierName",
key: "supplierName",
width: 200
},
{
title: "类型",
dataIndex: "type_name",
key: "type_name",
width: 200
},
{
title: "采购组织",
dataIndex: "purchasing",
key: "purchasing",
width: 200
},
{
title: "采购组",
dataIndex: "purchasingGroup",
key: "purchasingGroup",
width: 300
},
{
title: "凭证日期",
dataIndex: "voucherDate",
key: "voucherDate",
width: 200,
},
{
title: "审批状态",
dataIndex: "approvalState_name",
key: "approvalState_name",
width: 200
},
{
title: "确认状态",
dataIndex: "confirmState_name",
key: "confirmState_name",
width: 200
},
{
title: "关闭状态",
dataIndex: "closeState_name",
key: "closeState_name",
width: 200
}
];
const data11 = [
{
index: 1,
orderCode:"2343",
supplierName: "xxx",
type_name: "123",
purchasing:'内行',
purchasingGroup:"323",
voucherDate:"kkkk",
approvalState_name:"vvvv",
confirmState_name:"aaaa",
closeState_name:"vnnnnn",
key: "1"
},
{
index: 2,
_checked:true,
orderCode:"222",
supplierName: "22xxx",
type_name: "1223",
purchasing:'内行2',
purchasingGroup:"3223",
voucherDate:"222kk",
approvalState_name:"22vvvv",
confirmState_name:"2aaaa",
closeState_name:"2vnnnnn",
key: "2"
},
{
index: 3,
orderCode:"222",
supplierName: "22xxx",
_disabled:true,
type_name: "1223",
purchasing:'内行2',
purchasingGroup:"3223",
voucherDate:"222kk",
approvalState_name:"22vvvv",
confirmState_name:"2aaaa",
closeState_name:"2vnnnnn",
key: "3"
},
{
index: 4,
orderCode:"222",
supplierName: "22xxx",
type_name: "1223",
purchasing:'内行2',
purchasingGroup:"3223",
voucherDate:"222kk",
approvalState_name:"22vvvv",
confirmState_name:"2aaaa",
closeState_name:"2vnnnnn",
key: "4"
},
];
class Demo11 extends Component {
render() {
return (
<Table columns={columns11} data={data11} scroll={{x:true}} />
);
}
}
export default Demo11;

79
demo/demolist/Demo12.js
View File

@ -1,79 +0,0 @@
/**
*
* @title 纵向滚动条
* @parent 滚动 Scroll View
* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
*/
import React, { Component } from "react";
import Table from "../../src";
const columns12 = [
{
title: "Full Name",
width: 100,
dataIndex: "name",
key: "name"
},
{ title: "Age", width: 100, dataIndex: "age", key: "age"},
{ title: "Address", dataIndex: "address", key: "1" }
];
const data12 = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York Park"
},
{
key: "2",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "3",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "4",
name: "Jim Green",
age: 40,
address: "London Park"
},{
key: "11",
name: "John Brown",
age: 32,
address: "New York Park"
},
{
key: "12",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "13",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "14",
name: "Jim Green",
age: 40,
address: "London Park"
}
];
class Demo12 extends Component {
render() {
return (
<Table bordered columns={columns12} data={data12} scroll={{y:150 }} />
);
}
}
export default Demo12;

103
demo/demolist/Demo121.js
View File

@ -1,103 +0,0 @@
/**
*
* @title 多选表格
* @parent 行操作-选择
* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。
*
*/
import React, { Component } from 'react';
import {Checkbox} from "tinper-bee";
import Table from '../../src';
import multiSelect from "../../src/lib/multiSelect.js";
const columns12 = [
{
title: "名字",
dataIndex: "a",
key: "a",
width: 100
},
{
title: "性别",
dataIndex: "b",
key: "b",
width: 100
},
{
title: "年龄",
dataIndex: "c",
key: "c",
width: 200,
sorter: (a, b) => a.c - b.c
},
{
title: "武功级别",
dataIndex: "d",
key: "d"
}
];
const data12 = [
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2",_checked:true },
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked:false},
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:false},
{ a: "郭靖1", b: "男", c: 25,d:'大侠', key: "4" ,_disabled:true},
{ a: "郭靖2", b: "男", c: 25,d:'大侠', key: "5" ,_checked:false}
];
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
let MultiSelectTable = multiSelect(Table, Checkbox);
class Demo12 extends Component {
constructor(props) {
super(props);
this.state = {
data: data12
};
}
/**
*@param selectedList:当前选中的行数据
*@param record 当前操作行数据
*@param index 当前操作行索引
* @memberof Demo12
*/
getSelectedDataFunc = (selectedList,record,index) => {
console.log("selectedList", selectedList,"index",index);
// 如果在回调中增加setState逻辑，需要同步data中的_checked属性。即下面的代码
// const allChecked = selectedList.length == 0?false:true;
// record为undefind则为全选或者全不选
// if(!record){
// data12.forEach(item=>{
// item._checked = allChecked;
// })
// }else{
// data12[index]['_checked'] = record._checked;
// }
};
render() {
let multiObj = {
type: "checkbox"
};
return (
<MultiSelectTable
columns={columns12}
data={data12}
multiSelect={multiObj}
rowClassName={(record,index,indent)=>{
if (record._checked) {
return 'selected';
} else {
return '';
}
}}
getSelectedDataFunc={this.getSelectedDataFunc}/>
);
}
}
export default Demo12;

81
demo/demolist/Demo131.js
View File

@ -1,81 +0,0 @@
/**
*
* @title 万行以上数据渲染
* @parent 无限滚动 Infinite-scroll
* @description 万行数据渲染
*/
import React, { Component } from "react";
import {Tooltip} from "tinper-bee";
import Table from "../../src";
import BigData from "../../src/lib/bigData";
const BigDataTable = BigData(Table);
const columns = [
{
title:'序号',
dataIndex:'index',
width:'60',
key:'index',
render:(text,record,index)=>{
return index
}
},
{
title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName",
render: (text, record, index) => {
return (
<Tooltip inverse overlay={text}>
<span tootip={text} style={{
display: "inline-block",
width: "80px",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
verticalAlign: "middle",
}}>{text}</span>
</Tooltip>
);
}
},
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
];
const data = [ ...new Array(10000) ].map((e, i) => {
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
if(i%3==0){
rs.b = '女';
}
return rs;
})
class Demo30 extends Component {
constructor(props) {
super(props);
this.state = {
data: data,
selectedRowIndex: 0
}
}
render() {
return (
<BigDataTable
columns={columns}
data={data}
scroll={{y:300}}
height={40}
onRowClick={(record, index, indent) => {
console.log('currentIndex--'+index);
}}
/>
);
}
}
export default Demo30;

3
demo/demolist/Demo131.scss
View File

@ -1,3 +0,0 @@
.big-data tr td {
// height: 48px;
}

142
demo/demolist/Demo132.js
View File

@ -1,142 +0,0 @@
/**
*
* @title 嵌套子表格滚动加载
* @parent 无限滚动 Infinite-scroll
* @description 通过expandedRowRender参数来实现子表格
*
*/
import React, { Component } from "react";
import {Popconfirm} from 'tinper-bee';
import Table from "../../src";
import BigData from "../../src/lib/bigData";
const BigDataTable = BigData(Table);
const outColumns = [
{
title: "操作",
dataIndex: "d",
key: "d",
width:200,
render(text, record, index) {
return (
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
<a href="javascript:;">
一些操作
</a>
</Popconfirm>
);
}
},
{ title: "用户名", dataIndex: "a", key: "a", width: 250 },
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
];
const innerColumns = [
{
title: "操作",
dataIndex: "d",
key: "d",
width:200,
render(text, record, index) {
return (
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
<a href="javascript:;">
一些操作
</a>
</Popconfirm>
);
}
},
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
];
const data16 = [ ...new Array(10000) ].map((e, i) => {
return { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
})
class Demo31 extends Component {
constructor(props){
super(props);
this.state={
data_obj:{
0:[
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
],
1: [
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
{ a: "菲菲", b: "nv", c: 67, d: "操作", key: "2" }
],
}
}
}
expandedRowRender = (record, index, indent) => {
let height = 200;
let innderData = [ ...new Array(100) ].map((e, i) => {
return { a: index+"-"+ i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: index+"-"+ i };
})
return (
<Table
columns={innerColumns}
scroll={{y:height}}
data={innderData}
/>
);
};
getData=(expanded, record)=>{
//当点击展开的时候才去请求数据
let new_obj = Object.assign({},this.state.data_obj);
if(expanded){
if(record.key==='1'){
new_obj[record.key] = [
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
]
this.setState({
data_obj:new_obj
})
}else{
new_obj[record.key] = [
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
{ a: "菲菲", b: "nv", c: 67, d: "操作", key: "2" }
]
this.setState({
data_obj:new_obj
})
}
}
}
haveExpandIcon=(record, index)=>{
//控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效
if(index == 0){
return true;
}
return false;
}
render() {
return (
<BigDataTable
columns={outColumns}
data={data16}
onExpand={this.getData}
expandedRowRender={this.expandedRowRender}
scroll={{y:350}}
// defaultExpandedRowKeys={[0,1]}
title={currentData => <div>标题: 这是一个标题</div>}
footer={currentData => <div>表尾: 我是小尾巴</div>}
/>
);
}
}
export default Demo31;

90
demo/demolist/Demo133.js
View File

@ -1,90 +0,0 @@
/**
*
* @title 多功能表格滚动加载
* @parent 无限滚动 Infinite-scroll
* @description
*/
import React, { Component } from "react";
import {Tooltip,Checkbox,Icon,Popover} from "tinper-bee";
import Table from "../../src";
import BigData from "../../src/lib/bigData";
import multiSelect from '../../src/lib/multiSelect';
import filterColumn from '../../src/lib/filterColumn';
let ComplexTable = filterColumn(multiSelect(BigData(Table), Checkbox), Popover, Icon);
const columns = [
{
title:'序号',
dataIndex:'index',
width:'80',
key:'index',
render:(text,record,index)=>{
return index
}
},
{
title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName",
render: (text, record, index) => {
return (
<Tooltip inverse overlay={text}>
<span tootip={text} style={{
display: "inline-block",
width: "80px",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
verticalAlign: "middle",
}}>{text}</span>
</Tooltip>
);
}
},
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
];
const data = [ ...new Array(10000) ].map((e, i) => {
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
if(i%3==0){
rs.b = '女';
}
return rs;
})
class Demo32 extends Component {
constructor(props) {
super(props);
this.state = {
data: data,
selectedRowIndex: 0
}
}
getSelectedDataFunc = data => {
console.log(data);
};
render() {
return (
<ComplexTable
columns={columns}
data={data}
parentNodeId='parent'
scroll={{y:300}}
height={40}
bordered
onRowClick={(record, index, indent) => {
this.setState({
selectedRowIndex: index
});
}}
getSelectedDataFunc={this.getSelectedDataFunc}/>
);
}
}
export default Demo32;

95
demo/demolist/Demo134.js
View File

@ -1,95 +0,0 @@
/**
* @title 层级树大数据场景
* @parent 无限滚动 Infinite-scroll
* @description
*/
import React, { Component } from "react";
import {Tooltip} from "tinper-bee";
import Table from "../../src";
import BigData from "../../src/lib/bigData";
const BigDataTable = BigData(Table);
const columns = [
{
title:'序号',
dataIndex:'index',
width:'150',
key:'index',
render:(text,record,index)=>{
return index
}
},
{
title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName",
render: (text, record, index) => {
return (
<Tooltip inverse overlay={text}>
<span tootip={text} style={{
display: "inline-block",
width: "80px",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
verticalAlign: "middle",
}}>{text}</span>
</Tooltip>
);
}
},
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
];
const data = [ ...new Array(1000) ].map((e, i) => {
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
if(i%3==0){
rs.b = '女';
rs.children = [];
for(let subi=0;subi<3;subi++){
rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});
}
}else{
rs.children = [];
for(let subi=0;subi<3;subi++){
rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});
}
}
return rs;
})
class Demo34 extends Component {
constructor(props) {
super(props);
this.state = {
data: data,
selectedRowIndex: 0
}
}
onExpandedRowsChange = (params)=>{
console.log(params);
}
onExpand = (expandKeys)=>{
console.log('expand---'+expandKeys);
}
render() {
return (
<BigDataTable
columns={columns}
data={data}
parentNodeId='parent'
scroll={{y:300}}
height={40}
onExpand={this.onExpand}
onRowClick={(record, index, indent) => {
console.log('currentIndex--'+index);
}}
/>
);
}
}
export default Demo34;

73
demo/demolist/Demo161.js
View File

@ -1,73 +0,0 @@
/**
* @title 表格+分页
* @parent 分页 Pagination
* @description 点击分页联动表格
*/
import React, { Component } from "react";
import {Pagination} from "tinper-bee";
import Table from "../../src";
const columns8 = [
{ title: "姓名", dataIndex: "a", key: "a", width: 100 },
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
{
title: "武功级别",
dataIndex: "d",
key: "d"
}
];
const pageData = {
1: [
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
],
2: [
{ a: "芙蓉姐姐", b: "女", c: 23, d: "大侠", key: "1" },
{ a: "芙蓉妹妹", b: "女", c: 23, d: "内行", key: "2" }
]
};
class Demo8 extends Component {
constructor(props) {
super(props);
this.state = {
data: pageData[1],
activePage: 1
};
}
handleSelect(eventKey) {
this.setState({
data: pageData[eventKey],
activePage: eventKey
});
}
render() {
return (
<div className="demo8">
<Table columns={columns8} data={this.state.data} />
<Pagination
first
last
prev
next
maxButtons={5}
boundaryLinks
activePage={this.state.activePage}
onSelect={this.handleSelect.bind(this)}
onDataNumSelect={this.dataNumSelect}
showJump={true}
total={100}
dataNum={2}
/>
</div>
);
}
}
export default Demo8;

10
demo/demolist/Demo161.scss
View File

@ -1,10 +0,0 @@
.demo8{
.u-table {
margin-bottom: 11px;
}
.u-pagination{
display: flex;
align-items: center;
justify-content: center;
}
}

160
demo/demolist/Demo162.js
View File

@ -1,160 +0,0 @@
/**
*
* @title 表格+搜索
* @parent 搜索 search
* @description 搜索刷新表格数据
*
*/
import React, { Component } from "react";
import {Icon,FormControl,InputGroup} from "tinper-bee";
import Table from "../../src";
class Search extends Component {
state = {
searchValue: "",
empty: false
};
/**
* 搜索
*/
handleSearch = () => {
let { onSearch } = this.props;
this.setState({
empty: true
});
onSearch && onSearch(this.state.searchValue);
};
/**
* 捕获回车
* @param e
*/
handleKeyDown = e => {
if (e.keyCode === 13) {
this.handleSearch();
}
};
/**
* 输入框改变
* @param e
*/
handleChange = (e) => {
this.setState({
searchValue: e
});
};
/**
* 清空输入框
*/
emptySearch = () => {
let { onEmpty } = this.props;
this.setState({
searchValue: "",
empty: false
});
onEmpty && onEmpty();
};
render() {
return (
<InputGroup simple className="search-component">
<FormControl
onChange={this.handleChange}
value={this.state.searchValue}
onKeyDown={this.handleKeyDown}
placeholder="请输入用户名"
type="text"
/>
{this.state.empty ? (
<Icon
type="uf-close-c"
onClick={this.emptySearch}
className="empty-search"
/>
) : null}
<InputGroup.Button onClick={this.handleSearch} shape="border">
<Icon type="uf-search" />
</InputGroup.Button>
</InputGroup>
);
}
}
const columns9 = [
{
title: "姓名",
dataIndex: "a",
key: "a",
width: 100
},
{
title: "性别",
dataIndex: "b",
key: "b",
width: 100
},
{
title: "年龄",
dataIndex: "c",
key: "c",
width: 200
},
{
title: "武功级别",
dataIndex: "d",
key: "d"
}
];
const userData = [
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
];
class Demo9 extends Component {
constructor(props) {
super(props);
this.state = {
data: userData
};
}
handleSearch = value => {
if (value === "") {
return this.setState({
data: userData
});
}
let regExp = new RegExp(value, "ig");
let data = userData.filter(item => regExp.test(item.a));
this.setState({
data
});
};
handleEmpty = () => {
this.setState({
data: userData
});
};
render() {
return (
<div>
<div className="clearfix">
<Search onSearch={this.handleSearch} onEmpty={this.handleEmpty} />
</div>
<Table columns={columns9} data={this.state.data} />
</div>
);
}
}
export default Demo9;

60
demo/demolist/Demo21.js
View File

@ -1,60 +0,0 @@
/**
*
* @title 渲染本地数据
* @parent 数据操作 Data Opetation
* @description
*/
import React, { Component } from "react";
import {Button,Tooltip} from "tinper-bee";
import Table from "../../src";
const columns = [
{
title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
fixed:'left',
render: (text, record, index) => {
return (
<Tooltip inverse overlay={text}>
<span tootip={text} style={{
display: "inline-block",
width: "60px",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
verticalAlign: "middle",
}}>{text}</span>
</Tooltip>
);
}
},
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
];
const data = [
{ a: "令狐冲", b: "男", c: 41, key: "1" },
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
{ a: "郭靖", b: "男", c: 25, key: "3" }
];
class Demo21 extends Component {
constructor(props) {
super(props);
this.state = {
data: data
}
}
render() {
return (
<Table
columns={columns}
data={data}
/>
);
}
}
export default Demo21;

121
demo/demolist/Demo32.js
View File

@ -1,121 +0,0 @@
/**
*
* @title 多列表头
* @parent 列渲染 Custom Render
* @description columns[n] 可以内嵌 children，以渲染分组表头。
* 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
*
*/
import React, { Component } from "react";
import Table from "../../src";
import {Button} from "tinper-bee";
const { ColumnGroup, Column } = Table;
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
width: 100,
fixed: "left"
},
{
title: "Other",
width:600,
children: [
{
title: "Age",
dataIndex: "age",
key: "age",
width: 200
},
{
title: "Address",
children: [
{
title: "Street",
dataIndex: "street",
key: "street",
width: 200
},
{
title: "Block",
children: [
{
title: "Building",
dataIndex: "building",
key: "building",
width: 100
},
{
title: "Door No.",
dataIndex: "number",
key: "number",
width: 100
}
]
}
]
}
]
},
{
title: "Company",
width:400,
children: [
{
title: "Company Address",
dataIndex: "companyAddress",
key: "companyAddress",
width:200,
},
{
title: "Company Name",
dataIndex: "companyName",
key: "companyName",
width:200,
}
]
},
{
title: "Gender",
dataIndex: "gender",
key: "gender",
width: 60,
fixed: "right"
}
];
const data = [];
for (let i = 0; i < 20; i++) {
data.push({
key: i,
name: "John Brown",
age: i + 1,
street: "Lake Park",
building: "C",
number: 2035,
companyAddress: "Lake Street 42",
companyName: "SoftLake Co",
gender: "M"
});
}
class Demo32 extends Component {
render() {
return (
<Table
className={'demo32'}
columns={columns}
data={data}
headerHeight={40} //自定义表头高度
bordered
scroll={{ y: 240 }}
/>
);
}
}
export default Demo32;

6
demo/demolist/Demo32.scss
View File

@ -1,6 +0,0 @@
.demo32{
.u-table-thead th {
padding-top: 0px;
padding-bottom: 0px;
}
}

145
demo/demolist/Demo35.js
View File

@ -1,145 +0,0 @@
/**
*
* @title 合并列后合计
* @parent 列渲染 Custom Render
* @description 合并标题后的合计,且支持多字段统计（通过使用的封装好的功能方法实现复杂功能，简单易用！）
*
*/
import React, { Component } from "react";
import {Button} from "tinper-bee";
import Table from "../../src";
import sum from "../../src/lib/sum.js";
let ComplexTable = sum(Table);
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
width: 120,
fixed: "left"
},
{
title: "Other",
children: [
{
title: "Age",
dataIndex: "age",
key: "age",
width: 200,
sumCol: true,
},
{
title: "Address",
children: [
{
title: "Street",
dataIndex: "street",
key: "street",
width: 200
},
{
title: "Block",
children: [
{
title: "Building",
dataIndex: "building",
key: "building",
width: 100
},
{
title: "Door No.",
dataIndex: "number",
key: "number",
// width: 100,
sumCol: true,
}
]
}
]
}
]
},
// {
// title: "Company",
// children: [
// {
// title: "Company Address",
// dataIndex: "companyAddress",
// key: "companyAddress",
// width: 100,
// },
// {
// title: "Company Name",
// dataIndex: "companyName",
// key: "companyName",
// width: 100,
// }
// ]
// },
{
title: "Gender",
dataIndex: "gender",
key: "gender",
width: 80,
fixed: "right"
}
];
function getData(){
const data = [];
for (let i = 0; i < 5; i++) {
data.push({
key: i,
name: "John Brown"+i,
age: i + Math.floor(Math.random()*10),
street: "Lake Park",
building: "C",
number: 20 * Math.floor(Math.random()*10),
companyAddress: "Lake Street 42",
companyName: "SoftLake Co",
gender: "M"
});
}
return data;
}
class Demo35 extends Component {
constructor(props) {
super(props);
this.state = {
data: getData()
};
}
changeData = ()=>{
this.setState({
data: getData()
});
}
render() {
const {data} = this.state;
return (
<div>
<Button
className="editable-add-btn"
onClick={this.changeData}
>
动态设置数据源
</Button>
<ComplexTable
columns={columns}
data={data}
bordered
// scroll={{ x: "130%", y: 140 }}
/>
</div>
);
}
}
export default Demo35;

307
demo/demolist/Demo41.js
View File

@ -1,307 +0,0 @@
/**
*
* @title 编辑态表格
* @parent 编辑 Editor
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
*
*/
import React from "react";
import {Animate,Tooltip,FormControl,Button,Form,Icon,Checkbox,Select} from "tinper-bee";
import Table from "../../src";
import Datepicker from "bee-datepicker";
import renderInput from "../../build/render/InputRender.js";
import renderDate from "../../build/render/DateRender.js";
import renderSelect from "../../build/render/SelectRender.js";
const InputRender = renderInput(Form, FormControl, Icon);
const DateRender = renderDate(Datepicker, Icon);
const SelectRender = renderSelect(Select, Icon);
const format = "YYYY-MM-DD";
const format2 = "YYYY-MM";
const format3 = "YYYY-MM-DD HH:mm:ss";
const dateInputPlaceholder = "选择日期";
const dateInputPlaceholder2 = "选择年月";
const dataSource = [
{
key: "boyuzhou",
value: "jack"
},
{
key: "renhualiu",
value: "lucy"
},
{
key: "yuzhao",
value: "yiminghe"
}
];
class Demo41 extends React.Component {
constructor(props) {
super(props);
this.state = {
dataSource: [
{
key: "0",
name: "沉鱼",
number: "10",
age: "y",
address: "jack",
datepicker: "2017-06-12",
MonthPicker: "2017-02"
},
{
key: "1",
name: "落雁",
number: "100",
age: "y",
address: "lucy",
datepicker: "2017-06-12",
MonthPicker: "2017-02"
},
{
key: "2",
name: "闭月",
number: "1000",
age: "n",
address: "lucy",
datepicker: "2017-06-12",
MonthPicker: "2017-02"
},
{
key: "3",
name: "羞花",
number: "9999",
age: "y",
address: "lucy",
datepicker: "2017-06-12",
MonthPicker: "2017-02"
}
],
count: 4
};
this.columns = [
{
title: "普通输入",
dataIndex: "name",
key: "name",
width: "150px",
render: (text, record, index) => (
<InputRender
name="name"
placeholder="请输入姓名"
value={text}
isclickTrigger={true}
check={this.check}
onChange={this.onInputChange(index, "name")}
isRequire={true}
method="blur"
errorMessage={
<Tooltip overlay={"错误提示"}>
<Icon type="uf-exc-c" className="" />
</Tooltip>
}
/>
)
},
{
title: "货币输入",
dataIndex: "number",
key: "number",
width: "150px",
render: (text, record, index) => (
<InputRender
format="Currency"
name="number"
placeholder="请输入货币"
value={text}
isclickTrigger={true}
check={this.check}
onChange={this.onInputChange(index, "number")}
isRequire={true}
method="blur"
errorMessage={
<Tooltip overlay={"错误提示"}>
<Icon type="uf-exc-c" className="" />
</Tooltip>
}
reg={/^[0-9]+$/}
/>
)
},
{
title: "复选",
dataIndex: "age",
key: "age",
width: "100px",
render: (text, record, index) => (
<Checkbox
checked={record.age}
onChange={this.onCheckChange(index, "age")}
/>
)
},
{
title: "下拉框",
dataIndex: "address",
key: "address",
width: "200px",
render: (text, record, index) => {
return (
<SelectRender
dataSource={dataSource}
isclickTrigger={true}
value={text}
onChange={this.onSelectChange(index, "address")}
size="sm"
>
<Option value="jack">boyuzhou</Option>
<Option value="lucy">renhualiu</Option>
<Option value="disabled" disabled>
Disabled
</Option>
<Option value="yiminghe">yuzhao</Option>
</SelectRender>
);
}
},
{
title: "年月日",
dataIndex: "datepicker",
key: "datepicker",
width: "200px",
render: (text, record, index) => {
return (
<DateRender
value={text}
isclickTrigger={true}
format={format}
onSelect={this.onDateSelect}
onChange={this.onDateChange}
placeholder={dateInputPlaceholder}
/>
);
}
},
{
title: "年月",
dataIndex: "MonthPicker",
key: "MonthPicker",
width: "200px",
render: (text, record, index) => {
return (
<DateRender
value={text}
type="MonthPicker"
isclickTrigger={true}
format={format2}
onSelect={this.onSelect}
onChange={this.onChange}
placeholder={dateInputPlaceholder2}
/>
);
}
}
];
}
check = (flag, obj) => {
console.log(flag);
console.log(obj);
};
onInputChange = (index, key) => {
return value => {
const dataSource = [...this.state.dataSource];
dataSource[index][key] = value;
this.setState({ dataSource });
};
};
onCheckChange = (index, key) => {
return value => {
const dataSource = [...this.state.dataSource];
dataSource[index][key] = value;
this.setState({ dataSource });
};
};
onSelectChange = (index, key) => {
return value => {
console.log(`selected ${value}`);
const dataSource = [...this.state.dataSource];
dataSource[index][key] = value;
this.setState({ dataSource });
};
};
onDateChange = d => {
console.log(d);
};
onDateSelect = d => {
console.log(d);
};
onDelete = index => {
return () => {
const dataSource = [...this.state.dataSource];
dataSource.splice(index, 1);
this.setState({ dataSource });
};
};
handleAdd = () => {
const { count, dataSource } = this.state;
const newData = {
key: count,
name: `凤姐 ${count}`,
age: 32,
address: "jack",
datepicker: "2017-06-12",
MonthPicker: "2017-02"
};
this.setState({
dataSource: [...dataSource, newData],
count: count + 1
});
};
getBodyWrapper = body => {
return (
<Animate
transitionName="move"
component="tbody"
className={body.props.className}
>
{body.props.children}
</Animate>
);
};
getData = () => {
console.log(this.state.dataSource);
};
render() {
const { dataSource } = this.state;
const columns = this.columns;
return (
<div>
<Button
className="editable-add-btn"
onClick={this.handleAdd}
>
添加一行
</Button>
<Button
style={{marginLeft:"5px"}}
className="editable-add-btn"
onClick={this.getData}
>
获取数据
</Button>
<Table
data={dataSource}
columns={columns}
getBodyWrapper={this.getBodyWrapper}
/>
</div>
);
}
}
export default Demo41;

61
demo/demolist/Demo51.js
View File

@ -1,61 +0,0 @@
/**
*
* @title 左侧固定列
* @parent 列操作-锁定 Fixed
* @description 固定列到表格的左侧
*
*/
import React, { Component } from 'react';
import Table from '../../src';
const columns5 = [
{
title: "Full Name",
width: 100,
dataIndex: "name",
key: "name",
fixed: "left"
},
{ title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
{ title: "address", dataIndex: "address", key: "address" }
];
const data5 = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York Park"
},
{
key: "2",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "3",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "4",
name: "Jim Green",
age: 40,
address: "London Park"
}
];
class Demo51 extends Component {
render() {
return <Table columns={columns5} data={data5} scroll={{ x: "110%", y: 240 }} />;
}
}
export default Demo51;

164
demo/demolist/Demo52.js
View File

@ -1,164 +0,0 @@
/**
*
* @title 右侧固定列
* @parent 列操作-锁定 Fixed
* @description 固定列到表格的右侧
*
*/
import React, { Component } from 'react';
import {Popconfirm} from 'tinper-bee';
import Table from '../../src';
const columns5 = [
{
title: "序号",
dataIndex: "index",
key: "index",
width: 100,
},
{
title: "订单编号",
dataIndex: "orderCode",
key: "orderCode",
width: 100,
},
{
title: "供应商名称",
dataIndex: "supplierName",
key: "supplierName",
width: 100
},
{
title: "类型",
dataIndex: "type_name",
key: "type_name",
width: 100
},
{
title: "采购组织",
dataIndex: "purchasing",
key: "purchasing",
width: 100
},
{
title: "采购组",
dataIndex: "purchasingGroup",
key: "purchasingGroup",
width: 300
},
{
title: "凭证日期",
dataIndex: "voucherDate",
key: "voucherDate",
width: 100,
},
{
title: "审批状态",
dataIndex: "approvalState_name",
key: "approvalState_name",
width: 100
},
{
title: "确认状态",
dataIndex: "confirmState_name",
key: "confirmState_name",
width: 100
},
{
title: "关闭状态",
dataIndex: "closeState_name",
key: "closeState_name",
width: 100
},
{
title: "操作",
dataIndex: "d",
key: "d",
width:100,
fixed: "right",
render(text, record, index) {
return (
<div className='operation-btn'>
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
<a href="javascript:;" tooltip={text} >
一些操作
</a>
</Popconfirm>
</div>
)
}
}
];
const data5 = [
{
index: 1,
orderCode:"2343",
supplierName: "xxx",
type_name: "123",
purchasing:'内行',
purchasingGroup:"323",
voucherDate:"kkkk",
approvalState_name:"vvvv",
confirmState_name:"aaaa",
closeState_name:"vnnnnn",
d:"操作",
key: "1"
},
{
index: 2,
_checked:true,
orderCode:"222",
supplierName: "22xxx",
type_name: "1223",
purchasing:'内行2',
purchasingGroup:"3223",
voucherDate:"222kk",
approvalState_name:"22vvvv",
confirmState_name:"2aaaa",
closeState_name:"2vnnnnn",
d:"2操作",
key: "2"
},
{
index: 3,
orderCode:"222",
supplierName: "22xxx",
_disabled:true,
type_name: "1223",
purchasing:'内行2',
purchasingGroup:"3223",
voucherDate:"222kk",
approvalState_name:"22vvvv",
confirmState_name:"2aaaa",
closeState_name:"2vnnnnn",
d:"3操作",
key: "3"
},
{
index: 4,
orderCode:"222",
supplierName: "22xxx",
type_name: "1223",
purchasing:'内行2',
purchasingGroup:"3223",
voucherDate:"222kk",
approvalState_name:"22vvvv",
confirmState_name:"2aaaa",
closeState_name:"2vnnnnn",
d:"4操作",
key: "4"
},
];
class Demo52 extends Component {
render() {
return <Table columns={columns5} data={data5} scroll={{ x:true, y: 200 }} />;
}
}
export default Demo52;

158
demo/demolist/Demo53.js
View File

@ -1,158 +0,0 @@
/**
*
* @title 动态设置列锁定、解除锁定
* @parent 列操作-锁定 Fixed
* @description 动态设置columns中数据的fixed属性值【fixed: "left"，fixed: "right"】。
*
*/
import React, { Component } from 'react';
import {Icon,Menu,Dropdown} from "tinper-bee";
import Table from '../../src';
const { Item } = Menu;
const columns24 = [
{
title: "名字",
dataIndex: "a",
key: "a",
width: 100,
fixed: "left",
},
{
title: "性别",
dataIndex: "b",
key: "b",
width: 100,
fixed: "left",
},
{
title: "年龄",
dataIndex: "c",
key: "c",
width: 100,
},
{
title: "武功级别",
dataIndex: "d",
key: "d",
width: 150
},
{
title: "对手",
dataIndex: "e",
key: "e",
width: 100
},
{
title: "帮派",
dataIndex: "f",
key: "f",
width: 100
},
{
title: "武功类型",
dataIndex: "g",
key: "g",
width: 150
},
{
title: "师傅",
dataIndex: "k",
key: "k",
// width: 100
},
{
title: "攻击系数",
dataIndex: "h",
key: "h",
width: 100
}
];
const data24 = [
{ a: "杨过", b: "男", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: "1" },
{ a: "令狐冲", b: "男", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: "2" },
{ a: "郭靖", b: "男", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: "3" }
];
class Demo24 extends Component {
constructor(props) {
super(props);
this.state = {
columns:columns24
}
}
onSelect = ({key,item})=>{
console.log(`${key} selected`); //获取key
let currentObject = item.props.data; //获取选中对象的数据
let {columns} = this.state;
let fixedCols = [];
let nonColums = [];
columns.find(da=>{
if(da.key == key){
da.fixed?delete da.fixed:da.fixed = 'left';
}
da.fixed?fixedCols.push(da):nonColums.push(da);
});
columns = [...fixedCols,...nonColums]
this.setState({
columns
});
}
//表头增加下拉菜单
renderColumnsDropdown(columns) {
const icon ='uf-arrow-down';
return columns.map((originColumn,index) => {
let column = Object.assign({}, originColumn);
let menuInfo = [], title='锁定';
if(originColumn.fixed){
title = '解锁'
}
menuInfo.push({
info:title,
key:originColumn.key,
index:index
});
const menu = (
<Menu onSelect={this.onSelect} >{
menuInfo.map(da=>{ return <Item key={da.key} data={da} >{da.info}</Item> })
}
</Menu>)
column.title = (
<span className='title-con drop-menu'>
{column.title}
<Dropdown
trigger={['click']}
overlay={menu}
animation="slide-up"
>
<Icon type={icon}/>
</Dropdown>
</span>
);
return column;
});
}
render() {
let {columns} = this.state;
columns = this.renderColumnsDropdown(columns);
return(
<div className="demo24">
<Table columns={columns} data={data24} scroll={{ x: "110%", y: 240 }}/>
</div>
)
}
}
export default Demo24;

18
demo/demolist/Demo53.scss
View File

@ -1,18 +0,0 @@
th{
.drop-menu{
.uf{
font-size: 12px;
visibility: hidden;
margin-left: 15px;
}
}
&:hover{
.uf{
visibility: visible;
}
}
}

108
demo/demolist/Demo62.js
View File

@ -1,108 +0,0 @@
/**
*
* @title 按条件、值过滤
* @parent 列操作-过滤 Filter
* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤
*
*/
import React, { Component } from 'react';
import Table from '../../src';
const columns26 = [
{ title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" },
{ title: "年龄", width: 150, dataIndex: "age", key: "age", filterType: "dropdown", filterDropdown: "show" },
{ title: "日期", width: 200, dataIndex: "date", key: "date", filterType: "date", filterDropdown: "show", format: "YYYY-MM-DD" },
{ title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "dropdown", filterDropdown: "show" },
{ title: "备注", dataIndex: "mark", key: "mark" }
];
const data26 = [
{
key: "1",
name: "John Brown",
age: 32,
date: "2018-09-19",
address: "朝阳区",
mark: "无"
},
{
key: "2",
name: "Jim Green",
age: 40,
date: "2018-09-18",
address: "朝阳区",
mark: "无"
},
{
key: "3",
name: "Jim Green",
age: 40,
date: "2018-09-18",
address: "东城区",
mark: "无"
},
{
key: "4",
name: "Jim Green",
age: 40,
date: "2018-09-18",
address: "东城区",
mark: "无"
}, {
key: "5",
name: "John Brown",
age: 32,
date: "2018-09-18",
address: "海淀区",
mark: "无"
},
{
key: "6",
name: "Jim Green",
age: 48,
date: "2018-09-18",
address: "海淀区",
mark: "无"
},
{
key: "7",
name: "Jim Green",
age: 40,
date: "2018-09-18",
address: "海淀区",
mark: "无"
},
{
key: "8",
name: "Jim Green",
age: 38,
date: "2018-09-18",
address: "海淀区",
mark: "无"
}
];
class Demo26 extends Component {
handlerFilterChange = (key, val, condition) => {
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
}
handlerFilterClear = (key) => {
console.log('清除条件', key);
}
render() {
return <Table
onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
filterable={true}//是否开启过滤数据功能
bordered
columns={columns26}
data={data26} />;
}
}
export default Demo26;

201
demo/demolist/Demo63.js
View File

@ -1,201 +0,0 @@
/**
*
* @title 复杂表格中行过滤
* @parent 列操作-过滤 Filter
* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等
*
*/
/**
* @description
*/
import React, { Component } from 'react';
import {Icon,Checkbox,Dropdown,Menu} from "tinper-bee";
import Table from '../../src';
import multiSelect from '../../src/lib/multiSelect';
import sort from '../../src/lib/sort';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const data27 = [
{
key: "1",
name: "John Brown",
age: 32,
date: "2018-09-19",
address: "朝阳区",
mark: "无"
},
{
key: "2",
name: "Jim Green",
age: 40,
date: "2018-09-18",
address: "朝阳区",
mark: "无"
},
{
key: "3",
name: "Jim Green",
age: 40,
date: "2018-09-18",
address: "东城区",
mark: "无"
},
{
key: "4",
name: "Jim Green",
age: 40,
date: "2018-09-18",
address: "东城区",
mark: "无"
}, {
key: "5",
name: "John Brown",
age: 32,
date: "2018-09-18",
address: "海淀区",
mark: "无"
},
{
key: "6",
name: "Jim Green",
age: 48,
date: "2018-09-18",
address: "海淀区",
mark: "无"
},
{
key: "7",
name: "Jim Green",
age: 40,
date: "2018-09-18",
address: "海淀区",
mark: "无"
},
{
key: "8",
name: "Jim Green",
age: 38,
date: "2018-09-18",
address: "海淀区",
mark: "无"
}
];
const MultiSelectTable = multiSelect(Table, Checkbox);
const ComplexTable = sort(MultiSelectTable, Icon);
class Demo27 extends Component {
constructor(props) {
super(props);
this.state = {
dropdownvalue: []
}
}
handlerFilterChange = (key, val, condition) => {
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
}
handlerFilterClear = (key) => {
console.log('清除条件', key);
}
getSelectedDataFunc = data => {
console.log(data);
}
onClick = (item) => {
console.log(item);
}
render() {
const menu1 = (
<Menu onClick={this.onClick} style={{ width: 240 }} mode="vertical" >
<SubMenu key="sub1" title={<span><span>组织 1</span></span>}>
<MenuItemGroup title="Item 1">
<Menu.Item key="1">选项 1</Menu.Item>
<Menu.Item key="2">选项 2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="Iteom 2">
<Menu.Item key="3">选项 3</Menu.Item>
<Menu.Item key="4">选项 4</Menu.Item>
</MenuItemGroup>
</SubMenu>
</Menu>)
let multiObj = {
type: "checkbox"
};
let columns27 = [
{
title: "", width: 40, dataIndex: "key", key: "key", render: (text, record, index) => {
return <Dropdown
trigger={['click']}
overlay={menu1}
animation="slide-up"
>
<Icon style={{ "visibility": "hidden" }} type="uf-eye" />
</Dropdown>
}
},
{
title: "姓名",
width: 180,
dataIndex: "name",
key: "name",
filterType: "text",//输入框类型
filterDropdown: "show",//显示条件
filterDropdownType: "string"//字符条件
},
{
title: "年龄",
width: 180,
dataIndex: "age",
key: "age",
filterType: "number",//输入框类型
filterDropdown: "show",//显示条件
filterDropdownType: "number"//字符条件
},
{
title: "日期",
width: 190,
dataIndex: "date",
key: "date",
filterType: "date",//输入框类型
filterDropdown: "show",//显示条件
filterDropdownType: "string"//字符条件
},
{
title: "时间范围",
width: 290,
dataIndex: "mark",
key: "mark",
filterType: "daterange",//输入框类型
filterDropdown: "show",//显示条件
filterDropdownType: "number"//字符条件
},
{
title: "地址",
width: 100,
dataIndex: "address",
key: "address",
filterType: "dropdown",//输入框类型
filterDropdown: "show",//显示条件
filterDropdownType: "number"//字符条件
}
];
return <ComplexTable
onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
filterDelay={500}//输入文本多少ms触发回调函数，默认500ms
filterable={true}//是否开启过滤数据功能
getSelectedDataFunc={this.getSelectedDataFunc}
bordered
multiSelect={multiObj}
columns={columns27}
data={data27} />;
}
}
export default Demo27;

101
demo/demolist/Demo71.js
View File

@ -1,101 +0,0 @@
/**
*
* @title 列过滤面板
* @parent 列操作-隐藏 Hide
* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
*
*/
import React, { Component } from 'react';
import {Icon,Checkbox,Popover,Popconfirm} from "tinper-bee";
import Table from '../../src';
import filterColumn from '../../src/lib/filterColumn';
import sum from '../../src/lib/sum';
const data21 = [
{ a: "杨过", b: "男", c: 30,d:'内行',e: "操作", key: "2" },
{ a: "令狐冲", b: "男", c: 41,d:'大侠',e: "操作", key: "1" },
{ a: "郭靖", b: "男", c: 25,d:'大侠',e: "操作", key: "3" }
];
const FilterColumnTable = filterColumn(Table, Popover, Icon);
const defaultProps21 = {
prefixCls: "bee-table"
};
class Demo21 extends Component {
constructor(props) {
super(props);
this.state ={
columns21: [
{
title: "名字",
dataIndex: "a",
key: "a"
// width: 100
},
{
title: "性别",
dataIndex: "b",
key: "b",
// width: 100
},
{
title: "年龄",
dataIndex: "c",
key: "c",
ifshow:false,
// width: 200,
// sumCol: true,
sorter: (a, b) => a.c - b.c
},
{
title: "武功级别",
dataIndex: "d",
key: "d"
},
{
title: "操作",
dataIndex: "e",
key: "e",
render(text, record, index){
return (
<div title={text} >
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
<a href="javascript:;" tooltip={text} >
一些操作
</a>
</Popconfirm>
</div>
);
}
}
]};
}
afterFilter = (optData,columns)=>{
if(optData.key == 'b'){
if(optData.ifshow){
columns[2].ifshow = false;
}else{
columns[2].ifshow = true;
}
this.setState({
columns21 :columns,
showFilterPopover:true
});
}
}
render() {
return <FilterColumnTable columns={this.state.columns21} data={data21} afterFilter={this.afterFilter} showFilterPopover={this.state.showFilterPopover}/>;
}
}
Demo21.defaultProps = defaultProps21;
export default Demo21;

67
demo/demolist/Demo81.js
View File

@ -1,67 +0,0 @@
/**
* @title 列排序
* @parent 列操作-排序 Sort
* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称
*
*/
import React, { Component } from 'react';
import {Icon} from "tinper-bee";
import Table from '../../src';
import sort from "../../src/lib/sort.js";
let ComplexTable = sort(Table, Icon);
const columns11 = [
{
title: "名字",
dataIndex: "a",
key: "a",
width: 100
},
{
title: "性别",
dataIndex: "b",
key: "b",
width: 100
},
{
title: "年龄",
dataIndex: "c",
key: "c",
width: 200,
sorter: (a, b) => a.c - b.c
},
{
title: "武功级别",
dataIndex: "d",
key: "d"
}
];
const data11 = [
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
];
const defaultProps11 = {
prefixCls: "bee-table"
};
class Demo11 extends Component {
constructor(props) {
super(props);
this.state = {
sortOrder: "",
data: data11
};
}
render() {
return <ComplexTable columns={columns11} data={this.state.data} />;
}
}
Demo11.defaultProps = defaultProps11;
export default Demo11;

83
demo/demolist/Demo82.js
View File

@ -1,83 +0,0 @@
/**
* @title 后端列排序
* @parent 列操作-排序 Sort
* @description 将控制台打印的参数传递给后端即可进行列排序
*/
import React, { Component } from 'react';
import {Icon} from "tinper-bee";
import Table from '../../src';
import sort from "../../src/lib/sort.js";
let ComplexTable = sort(Table, Icon);
const columns11 = [
{
title: "名字",
dataIndex: "a",
key: "a",
width: 100
},
{
title: "性别",
dataIndex: "b",
key: "b",
width: 100
},
{
title: "年龄",
dataIndex: "c",
key: "c",
width: 200,
sorter: (a, b) => a.c - b.c
},
{
title: "武功级别",
dataIndex: "d",
key: "d"
},
{
title: "分数",
dataIndex: "e",
key: "e",
sorter: (a, b) => a.c - b.c
},
];
const data11 = [
{ a: "杨过", b: "男", c: 30,d:'内行', e:139,key: "2" },
{ a: "令狐冲", b: "男", c: 41,d:'大侠', e:109, key: "1" },
{ a: "郭靖", b: "男", c: 25,d:'大侠', e:159, key: "3" }
];
const defaultProps = {
prefixCls: "bee-table"
};
class Demo28 extends Component {
constructor(props) {
super(props);
this.state = {
sortOrder: "",
data: data11
};
}
/**
* 后端获取数据
*/
sortFun = (sortParam)=>{
console.info(sortParam);
//将参数传递给后端排序
}
render() {
let sortObj = {
mode:'multiple',
backSource:true,
sortFun:this.sortFun
}
return <ComplexTable columns={columns11} data={this.state.data} sort={sortObj}/>;
}
}
Demo28.defaultProps = defaultProps;
export default Demo28;

134
demo/demolist/Demo83.js
View File

@ -1,134 +0,0 @@
/**
*
* @title 多列排序
* @parent 列操作-排序 Sort
* @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
*
*/
import React, { Component } from "react";
import {Checkbox,Button,Icon} from "tinper-bee";
import Table from "../../src";
import multiSelect from "../../src/lib/multiSelect.js";
import sort from "../../src/lib/sort.js";
import sum from "../../src/lib/sum.js";
const columns13 = [
{
title: "名字",
dataIndex: "a",
key: "a",
className:'dfasd',
width: 200
},
{
title: "功力指数",
dataIndex: "b",
key: "b",
width: 200,
sumCol: true,
sorter: (a, b) => a.c - b.c,
sorterClick:(data,type)=>{//排序的回调函数
//type value is up or down
console.log("data",data);
}
},
{
title: "年龄",
dataIndex: "c",
key: "c",
width: 200,
sumCol: true,
sorter: (a, b) => a.c - b.c,
sorterClick:(data,type)=>{//排序的回调函数
//type value is up or down
console.log("data",data);
}
},
{
title: "成绩",
dataIndex: "e",
key: "e",
width: 200,
sumCol: true,
sorter: (a, b) => a.c - b.c,
},
{
title: "武功级别",
dataIndex: "d",
key: "d",
width: 200
}
];
const data13 = [
{ a: "杨过", b: 675, c: 30, d: "内行",e:100, key: "2" },
{ a: "令狐冲", b: 43, c: 41, d: "大侠",e:90, key: "1" },
{ a: "令狐冲1", b: 43, c: 81, d: "大侠", e:120,key: "4" },
{ a: "令狐冲2", b: 43, c: 81, d: "大侠", e:130,key: "5" },
{ a: "郭靖", b: 153, c: 25, d: "大侠",e:90, key: "3" }
];
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
let ComplexTable = multiSelect(sort(sum(Table, Icon)), Checkbox);
class Demo13 extends Component {
constructor(props) {
super(props);
this.state = {
data13: data13,
selectedRow: this.selectedRow,
selectDisabled: this.selectDisabled
};
}
getSelectedDataFunc = data => {
console.log(data);
};
selectDisabled = (record, index) => {
// console.log(record);
if (index === 1) {
return true;
}
return false;
};
selectedRow = (record, index) => {
// console.log(record);
if (index === 0) {
return true;
}
return false;
};
onClick = () => {
this.setState({
selectedRow: function() {}
});
};
render() {
let multiObj = {
type: "checkbox"
};
let sortObj = {
mode:'multiple'
}
return (
<div>
<Button className="editable-add-btn" onClick={this.onClick}>
change selectedRow
</Button>
<ComplexTable
selectDisabled={this.state.selectDisabled}
selectedRow={this.state.selectedRow}
columns={columns13}
data={this.state.data13}
multiSelect={multiObj}
sort={sortObj}
getSelectedDataFunc={this.getSelectedDataFunc}
/>
</div>
);
}
}
export default Demo13;

69
demo/demolist/Demo91.js
View File

@ -1,69 +0,0 @@
/**
*
* @title 拖拽改变列顺序
* @parent 列操作-拖拽 Drag
* @description 点击列的表头，进行左右拖拽，注意：固定列不可以交换
*/
import React, { Component } from 'react';
import {Icon} from "tinper-bee";
import Table from '../../src';
import dragColumn from '../../src/lib/dragColumn';
const columns22 = [
{
title: "名字",
dataIndex: "a",
key: "a",
width: 100
},
{
title: "性别",
dataIndex: "b",
key: "b",
width: 200
},
{
title: "年龄",
dataIndex: "c",
key: "c",
width: 200,
sumCol: true,
sorter: (a, b) => a.c - b.c
},
{
title: "武功级别",
dataIndex: "d",
key: "d",
width: 200,
}
];
const data22 = [
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
];
const DragColumnTable = dragColumn(Table);
const defaultProps22 = {
prefixCls: "bee-table"
};
class Demo22 extends Component {
constructor(props) {
super(props);
}
render() {
return <DragColumnTable columns={columns22} data={data22} bordered
draggable={true}
/>;
}
}
Demo22.defaultProps = defaultProps22;
export default Demo22;

2
demo/demolist/Demo92.js
View File

@ -67,7 +67,7 @@ class Demo23 extends Component {
draggable={true}
scroll={{y:200}}
onDropBorder ={(e,width)=>{
console.log(width+"--调整列宽后触发事件",e.target);
// console.log(width+"--调整列宽后触发事件",e.target);
}}
/>;
}

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

35
dist/demo.css vendored
View File

@ -35,6 +35,8 @@
color: #1565c0; }
.u-table thead tr:last-child {
border-bottom: 1px solid #C1C7D0; }
.u-table thead tr > th:last-child {
border-right: none; }
.u-table tr:hover td .uf-eye {
visibility: visible !important; }
.u-table tr tr a {
@ -604,37 +606,4 @@
.opt-btns .u-button:hover, .opt-btns .u-button:active {
background: #344563; }
.demo02 .u-table-placeholder i {
font-size: 60px; }
.demo04.u-table tr:nth-child(2n) {
background: #f7f9fb; }
.demo04.u-table tr.u-table-row-hover, .demo04 .u-table tr:hover {
background: #ebecf0; }
.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; }
.demo32 .u-table-thead th {
padding-top: 0px;
padding-bottom: 0px; }
th .drop-menu .uf {
font-size: 12px;
visibility: hidden;
margin-left: 15px; }
th:hover .uf {
visibility: visible; }
/*# sourceMappingURL=demo.css.map */

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

71498
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

4
src/Table.scss
View File

@ -76,7 +76,9 @@ $icon-color:#505F79;
tr:last-child{
border-bottom: 1px solid $table-th-bottom-border;
}
tr>th:last-child{
border-right: none;
}
}
tr {
// transition: all 0.3s ease;