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

已缓存的数据不重新render

This commit is contained in:
wanghaoo 2018-12-20 18:07:30 +08:00
parent 06ee2107df
commit 386ded627f
43 changed files with 277 additions and 19328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
build.zip
View File

Binary file not shown.

3
build/Table.js
View File

@ -605,7 +605,7 @@ var Table = function (_Component) {
if (props.lazyLoad && props.lazyLoad.preHeight) {
rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.preHeight, columns: [], className: '', store: this.store, visible: true }));
}
var lazyCurrentIndex = props.lazyLoad && props.lazyLoad.currentIndex ? props.lazyLoad.currentIndex : 0;
var lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ? props.lazyLoad.startIndex : 0;
var expandedContentHeight = 0;
for (var i = 0; i < data.length; i++) {
var record = data[i];
@ -1114,7 +1114,6 @@ var Table = function (_Component) {
bodyTable.scrollTop = e.target.scrollTop;
}
this.lastScrollTop = e.target.scrollTop;
console.log('handleBodyScroll---scrollTop--' + e.target.scrollTop);
if (handleScroll) {
var scrollTop = e.target.scrollTop;
(0, _utils.debounce)(handleScroll(scrollTop), 200);

125
build/lib/bigData.js
View File

@ -36,23 +36,26 @@ function bigData(Table) {
function BigData(props) {
_classCallCheck(this, BigData);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
var _this2 = _possibleConstructorReturn(this, _Component.call(this, props));
_initialiseProps.call(_this);
_initialiseProps.call(_this2);
_this2.state = {
_this.state = {
currentIndex: 0,
scrollLeft: 0,
scrollTop: 0
};
var rowHeight = _this.props.height ? _this.props.height : defaultHeight;
var rowHeight = _this2.props.height ? _this2.props.height : defaultHeight;
//默认显示25条，rowsInView根据定高算的。在非固定高下，这个只是一个大概的值。
_this.rowsInView = _this.props.scroll.y ? Math.ceil(_this.props.scroll.y / rowHeight) : 25;
_this.cachedRowHeight = [];
_this.lastScrollTop = 0;
_this.setRowHeight = _this.setRowHeight.bind(_this);
return _this;
_this2.rowsInView = _this2.props.scroll.y ? Math.ceil(_this2.props.scroll.y / rowHeight) : 25;
_this2.currentIndex = 0;
_this2.loadCount = 30; //一次加载多少数据
_this2.cachedRowHeight = [];
_this2.lastScrollTop = 0;
_this2.startIndex = _this2.currentIndex;
_this2.endIndex = _this2.currentIndex + _this2.loadCount;
_this2.setRowHeight = _this2.setRowHeight.bind(_this2);
return _this2;
}
/**
*获取数据区高度
@ -108,19 +111,20 @@ function bigData(Table) {
BigData.prototype.render = function render() {
var data = this.props.data;
var _state = this.state,
currentIndex = _state.currentIndex,
scrollTop = _state.scrollTop;
var rowsInView = this.rowsInView;
var currentIndex = this.currentIndex,
scrollTop = this.scrollTop;
var rowsInView = this.rowsInView,
loadCount = this.loadCount,
endIndex = this.endIndex,
startIndex = this.startIndex;
var lazyLoad = {
preHeight: this.getSumHeight(0, currentIndex),
sufHeight: this.getSumHeight(currentIndex + rowsInView, data.length),
currentIndex: currentIndex
preHeight: this.getSumHeight(0, startIndex),
sufHeight: this.getSumHeight(endIndex, data.length),
startIndex: startIndex
};
return _react2["default"].createElement(Table, _extends({}, this.props, {
data: data.slice(currentIndex, currentIndex + rowsInView),
data: data.slice(startIndex, endIndex),
lazyLoad: lazyLoad,
handleScroll: this.handleScroll,
scrollTop: scrollTop,
@ -134,43 +138,82 @@ function bigData(Table) {
data: undefined
// height: 40, //默认行高
}, _initialiseProps = function _initialiseProps() {
var _this2 = this;
var _this3 = this;
this.handleScroll = function (scrollTop) {
console.log('scrollTop----' + scrollTop);
var _props = _this2.props,
this.handleScroll = function (nextScrollTop) {
var _this = _this3;
//将currentIndex放在this上，如果可视区域中需要展示的数据已经存在则不重现render。
var _props = _this3.props,
data = _props.data,
height = _props.height;
height = _props.height,
_props$scroll = _props.scroll,
scroll = _props$scroll === undefined ? {} : _props$scroll;
var rowHeight = height ? height : defaultHeight;
var rowsInView = _this2.rowsInView;
var _state$currentIndex = _this2.state.currentIndex,
currentIndex = _state$currentIndex === undefined ? 0 : _state$currentIndex;
// let index = currentIndex;
var _this$currentIndex = _this.currentIndex,
currentIndex = _this$currentIndex === undefined ? 0 : _this$currentIndex,
loadCount = _this.loadCount,
scrollTop = _this.scrollTop;
var endIndex = _this.endIndex,
startIndex = _this.startIndex;
var needRender = _this.state.needRender;
var index = 0;
// let temp = scrollTop - this.lastScrollTop;
var temp = scrollTop;
// let lastScrollTop = scrollTop;
var temp = nextScrollTop;
var viewHeight = parseInt(scroll.y);
var isOrder = nextScrollTop > scrollTop ? true : false;
while (temp > 0) {
temp -= _this2.cachedRowHeight[index] || rowHeight;
temp -= _this3.cachedRowHeight[index] || rowHeight;
if (temp > 0) {
index += 1;
}
}
//记录上一次滚动的位置，作为缓存用
// this.lastScrollTop = lastScrollTop + temp;
// offset last row
// index -= 1
console.log(index);
if (data.length - rowsInView < index) index = data.length - rowsInView;
if (data.length - loadCount < index) index = data.length - loadCount;
if (index < 0) index = 0;
if (currentIndex !== index) {
_this2.setState({ currentIndex: index, scrollTop: scrollTop });
_this.currentIndex = index;
_this.scrollTop = nextScrollTop;
var rowsInView = 0;
var rowsHeight = 0;
//计算下一屏显示的数据条数
if (viewHeight) {
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
while (rowsHeight < viewHeight && _this3.cachedRowHeight[rowsInView + index]) {
rowsHeight += _this3.cachedRowHeight[rowsInView + index];
rowsInView++;
}
// 如果rowsInView 小于 缓存的数据则重新render
// 向下滚动
if (rowsInView + index > endIndex - 3 && isOrder) {
_this3.startIndex = index;
endIndex = _this3.startIndex + loadCount;
if (endIndex > data.length - 1) {
endIndex = data.length - 1;
}
_this3.endIndex = endIndex;
_this3.setState({ needRender: !needRender });
}
// 向上滚动，当前的index是否已经加载（currentIndex）
if (!isOrder && index < startIndex + 3) {
startIndex = index - 15;
if (startIndex < 0) {
startIndex = 0;
}
_this3.startIndex = startIndex;
_this3.endIndex = _this3.startIndex + loadCount;
_this3.setState({ needRender: !needRender });
}
}
console.log('**index**' + index, "**startIndex**" + _this3.startIndex, "**endIndex**" + _this3.endIndex);
// this.setState({ scrollTop:scrollTop})
}
};
}, _temp;

92
demo/demolist/Demo1.js
View File

@ -1,92 +0,0 @@
/**
*
* @title 简单表格、文字过长，两种tip
* 【Tooltip】
* @description
*/
import React, { Component } from "react";
import Button from "bee-button";
import Tooltip from "bee-tooltip";
import Table from "../../src";
const columns = [
{
title: "用户名", dataIndex: "a", key: "a", width: 80, className: "rowClassName",
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: '10%' },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
{
title: "操作",
dataIndex: "d",
key: "d",
render(text, record, index) {
return (
<div style={{ position: 'relative' }} title={text} >
<a
href="javascript:;"
tooltip={text}
onClick={() => {
alert('这是第' + index + '列，内容为:' + text);
}}
>
一些操作
</a>
</div>
);
}
}
];
const data = [
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, d: "操作", key: "2" },
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
];
class Demo1 extends Component {
constructor(props) {
super(props);
this.state = {
data: data,
selectedRowIndex: 0
}
}
render() {
return (
<Table
columns={columns}
data={data}
parentNodeId='parent'
height={43}
headerHeight={42}
onRowClick={(record, index, indent) => {
this.setState({
selectedRowIndex: index
});
}}
/>
);
}
}
export default Demo1;

46
demo/demolist/Demo10.js
View File

@ -1,46 +0,0 @@
/**
*
* @title 无数据时显示
* @description 无数据时显示效果展示（可自定义）
*
* import {Table} from 'tinper-bee';
*/
import React, { Component } from 'react';
import Table from '../../src';
const columns10 = [
{
title: "Name",
dataIndex: "name",
key: "name",
width: "40%"
},
{
title: "Age",
dataIndex: "age",
key: "age",
width: "30%"
},
{
title: "Address",
dataIndex: "address",
key: "address"
}
];
const data10 = [
];
const emptyFunc = () => <span>这里没有数据！</span>
class Demo10 extends Component {
render() {
return <Table columns={columns10} data={data10} emptyText={emptyFunc} />;
}
}
export default Demo10;

65
demo/demolist/Demo11.js
View File

@ -1,65 +0,0 @@
/**
*
* @title 列排序
*
*/
import React, { Component } from 'react';
import Table from '../../src';
import Icon from "bee-icon";
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;

74
demo/demolist/Demo12.js
View File

@ -1,74 +0,0 @@
/**
*
* @title 全选功能
* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）
*
*/
import React, { Component } from 'react';
import Table from '../../src';
import multiSelect from "../../src/lib/multiSelect.js";
import Checkbox from 'bee-checkbox';
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:true},
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:true}
];
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
let MultiSelectTable = multiSelect(Table, Checkbox);
class Demo12 extends Component {
constructor(props) {
super(props);
this.state = {
data: data12
};
}
getSelectedDataFunc = data => {
console.log(data);
};
render() {
let multiObj = {
type: "checkbox"
};
return (
<MultiSelectTable
columns={columns12}
data={data12}
multiSelect={multiObj}
getSelectedDataFunc={this.getSelectedDataFunc}/>
);
}
}
export default Demo12;

133
demo/demolist/Demo13.js
View File

@ -1,133 +0,0 @@
/**
*
* @title 多列排序、全选功能、合计
* @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
*
*/
import React, { Component } from "react";
import Table from "../../src";
import Checkbox from "bee-checkbox";
import Button from "bee-button";
import Icon from "bee-icon";
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",
fixed:'right',
width: 200
}
];
const data13 = [
{ a: "令狐冲", b: 43, c: 41, d: "大侠",e:90.52, key: "1" },
];
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
let ComplexTable = multiSelect(sum(sort(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}
scroll={{x:'100%',y:100}}
getSelectedDataFunc={this.getSelectedDataFunc}
/>
</div>
);
}
}
export default Demo13;

314
demo/demolist/Demo14.js
View File

@ -1,314 +0,0 @@
/**
*
* @title 编辑态表格
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
*
*/
import React from "react";
import Table from "../../src";
import Animate from "bee-animate";
import Tooltip from "bee-tooltip";
import Button from "bee-button";
import Form from "bee-form";
import Icon from "bee-icon";
import Input from "bee-form-control";
import Checkbox from "bee-checkbox";
import Datepicker from "bee-datepicker";
import Select from "bee-select";
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, Input, 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 Demo14 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")}
>
<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"
type="ghost"
onClick={this.handleAdd}
>
添加一行
</Button>
<Button
style={{marginLeft:"5px"}}
className="editable-add-btn"
type="ghost"
onClick={this.getData}
>
获取数据
</Button>
<Table
data={dataSource}
columns={columns}
getBodyWrapper={this.getBodyWrapper}
/>
</div>
);
}
}
export default Demo14;

122
demo/demolist/Demo15.js
View File

@ -1,122 +0,0 @@
/**
*
* @title 表格行/列合并
* @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;

130
demo/demolist/Demo16.js
View File

@ -1,130 +0,0 @@
/**
*
* @title 嵌套子表格
* @description 通过expandedRowRender参数来实现子表格
*
*/
import React, { Component } from "react";
import Table from "../../src";
const columns16 = [
{
title: "操作",
dataIndex: "d",
key: "d",
width:200,
render(text, record, index) {
return (
<a
href="#"
onClick={() => {
alert("这是第" + index + "列，内容为:" + text);
}}
>
一些操作
</a>
);
}
},
{ 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 (
<a
href="#"
onClick={() => {
alert("这是第" + index + "列，内容为:" + text);
}}
>
一些操作
</a>
);
}
},
{ 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 (
<Table
columns={columns16}
data={data16}
onExpand={this.getData}
expandedRowRender={this.expandedRowRender}
scroll={{x:true}}
title={currentData => <div>标题: 这是一个标题</div>}
footer={currentData => <div>表尾: 我是小尾巴</div>}
/>
);
}
}
export default Demo16;

76
demo/demolist/Demo17.js
View File

@ -1,76 +0,0 @@
/**
*
* @title loading属性指定表格是否加载中
* @description loading可以传boolean或者obj对象，obj为bee-loading组件的参数类型
*
*/
import React, { Component } from "react";
import Table from "../../src";
import Button from "bee-button";
const columns17 = [
{ 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 (
<a
href="#"
onClick={() => {
alert('这是第'+index+'列，内容为:'+text);
}}
>
一些操作
</a>
);
}
}
];
const data17 = [
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
];
class Demo17 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"
type="ghost"
onClick={this.changeLoading}
>
切换loading
</Button>
<Table
columns={columns17}
data={data17}
title={currentData => <div>标题: 这是一个标题</div>}
footer={currentData => <div>表尾: 我是小尾巴</div>}
// loading={this.state.loading}或者是boolean
loading={{show:this.state.loading,loadingType:"line"}}
/>
</div>
);
}
}
export default Demo17;

145
demo/demolist/Demo18.js
View File

@ -1,145 +0,0 @@
/**
*
* @title 合并标题后的合计,且支持多字段统计
* @description 合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）
*
*/
import React, { Component } from "react";
import Button from "bee-button";
import Table from "../../src";
import sum from "../../src/lib/sum.js";
let ComplexTable = sum(Table);
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
width: 100,
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 Demo18 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"
type="ghost"
onClick={this.changeData}
>
动态设置数据源
</Button>
<ComplexTable
columns={columns}
data={data}
bordered
// scroll={{ x: "130%", y: 140 }}
/>
</div>
);
}
}
export default Demo18;

227
demo/demolist/Demo19.js
View File

@ -1,227 +0,0 @@
/**
*
* @title 编辑态表格
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
*
*/
import Button from "bee-button";
import React from "react";
import Table from "../../src";
import Animate from "bee-animate";
import Tooltip from "bee-tooltip";
import Icon from "bee-icon";
import Input from "bee-form-control";
import Form from "bee-form";
import Select from "bee-select";
import renderInput from "../../build/render/InputRender.js";
import renderSelect from "../../build/render/SelectRender.js";
const InputRender = renderInput(Form, Input, Icon);
const SelectRender = renderSelect(Select, Icon);
const Option = Select.Option;
const dataSource = [
{
key: "boyuzhou",
value: "jack"
},
{
key: "renhualiu",
value: "lucy"
},
{
key: "yuzhao",
value: "yiminghe"
}
];
class Demo19 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: "number",
key: "number",
width: "150px",
render: (text, record, index) => (
<InputRender
format="Currency"
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>
}
reg={/^[0-9]+$/}
/>
)
},
{
title:(<div>下拉框的div</div>),
dataIndex: "address",
key: "address",
width: "200px",
render: (text, record, index) => {
return (
<SelectRender
dataSource={dataSource}
isclickTrigger={true}
value={text}
onChange={this.onSelectChange(index, "address")}
onFocus={this.handFocus}
onBlur={this.onBlur}
autofocus
>
<Option value="jack">boyuzhou</Option>
<Option value="lucy">renhualiu</Option>
<Option value="disabled" disabled>
Disabled
</Option>
<Option value="yiminghe">yuzhao</Option>
</SelectRender>
);
}
}
];
}
check = (flag, obj) => {
console.log(flag);
console.log(obj);
};
handFocus = (value,e) => {
console.log(value+` 获取焦点事件`);
};
onBlur = (value,e) => {
console.log(value+` onBlur`);
};
onInputChange = (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 });
};
};
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"
type="ghost"
onClick={this.handleAdd}
>
添加一行
</Button>
<Button
style={{marginLeft:"5px"}}
className="editable-add-btn"
type="ghost"
onClick={this.getData}
>
获取数据
</Button>
<Table
data={dataSource}
columns={columns}
getBodyWrapper={this.getBodyWrapper}
/>
</div>
);
}
}
export default Demo19;

202
demo/demolist/Demo2.js
View File

@ -1,202 +0,0 @@
/**
*
* @title 增删改表格
* @description 这是带有增删改功能的表格（此编辑功能未使用render组件）
*
*/
import Button from "bee-button";
import React, { Component } from "react";
import Table from "../../src";
import Animate from "bee-animate";
import Icon from "bee-icon";
import Input from "bee-form-control";
import Popconfirm from "bee-popconfirm";
class EditableCell extends React.Component {
state = {
value: this.props.value,
editable: false
};
handleChange = e => {
const value = e;
this.setState({ value });
};
check = () => {
this.setState({ editable: false });
if (this.props.onChange) {
this.props.onChange(this.state.value);
}
};
edit = () => {
this.setState({ editable: true });
};
handleKeydown = event => {
if (event.keyCode == 13) {
this.check();
}
};
render() {
const { value, editable } = this.state;
return (
<div className="editable-cell">
{editable ? (
<div className="editable-cell-input-wrapper">
<Input
value={value}
onChange={this.handleChange}
onKeyDown={this.handleKeydown}
/>
<Icon
type="uf-correct"
className="editable-cell-icon-check"
onClick={this.check}
/>
</div>
) : (
<div className="editable-cell-text-wrapper">
{value || " "}
<Icon
type="uf-pencil"
className="editable-cell-icon"
onClick={this.edit}
/>
</div>
)}
</div>
);
}
}
class Demo2 extends React.Component {
constructor(props) {
super(props);
this.columns = [
{
title: "姓名",
dataIndex: "name",
key: "name",
width: "30%",
render: (text, record, index) => (
<EditableCell
value={text}
onChange={this.onCellChange(index, "name")}
/>
)
},
{
title: "年龄",
dataIndex: "age",
key: "age"
},
{
title: "你懂的",
dataIndex: "address",
key: "address"
},
{
title: "操作",
dataIndex: "operation",
key: "operation",
render: (text, record, index) => {
return this.state.dataSource.length > 1 ? (
<Popconfirm content="确认删除?" id="aa" onClose={this.onDelete(index)}>
<Icon type="uf-del" />
</Popconfirm>
) : null;
}
}
];
this.state = {
dataSource: [
{
key: "0",
name: "沉鱼",
age: "18",
address: "96, 77, 89"
},
{
key: "1",
name: "落雁",
age: "16",
address: "90, 70, 80"
},
{
key: "2",
name: "闭月",
age: "17",
address: "80, 60, 80"
},
{
key: "3",
name: "羞花",
age: "20",
address: "120, 60, 90"
}
],
count: 4
};
}
onCellChange = (index, key) => {
return value => {
const dataSource = [...this.state.dataSource];
dataSource[index][key] = value;
this.setState({ dataSource });
};
};
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: `100 100 100`
};
this.setState({
dataSource: [...dataSource, newData],
count: count + 1
});
};
getBodyWrapper = body => {
return (
<Animate
transitionName="move"
component="tbody"
className={body.props.className}
>
{body.props.children}
</Animate>
);
};
render() {
const { dataSource } = this.state;
const columns = this.columns;
return (
<div>
<Button
className="editable-add-btn"
type="ghost"
onClick={this.handleAdd}
>
添加
</Button>
<Table
data={dataSource}
columns={columns}
getBodyWrapper={this.getBodyWrapper}
/>
</div>
);
}
}
export default Demo2;

58
demo/demolist/Demo20.js
View File

@ -1,58 +0,0 @@
/**
*
* @title 简单表格选中行的背景色、表头表尾
* @description
*/
import React, { Component } from "react";
import Button from "bee-button";
import Tooltip from "bee-tooltip";
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;

109
demo/demolist/Demo21.js
View File

@ -1,109 +0,0 @@
/**
*
* @title 根据列进行过滤
* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
*
*/
import React, { Component } from 'react';
import Table from '../../src';
import filterColumn from '../../src/lib/filterColumn';
import sum from '../../src/lib/sum';
import Icon from "bee-icon";
import Checkbox from 'bee-checkbox';
import Popover from 'bee-popover';
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} >
<a href="#"
tooltip={text}
onClick={() => {
alert('这是第'+index+'列，内容为:'+text);
}}
// style={{
// position: 'absolute',
// top: 5,
// left: 0
// }}
>
一些操作
</a>
</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;

68
demo/demolist/Demo22.js
View File

@ -1,68 +0,0 @@
/**
*
* @title 列的拖拽，交换表头的顺序
* @description 点击列的表头，进行左右拖拽
*/
import React, { Component } from 'react';
import Table from '../../src';
import dragColumn from '../../src/lib/dragColumn';
import Icon from "bee-icon";
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;

69
demo/demolist/Demo23.js
View File

@ -1,69 +0,0 @@
/**
*
* @title 拖拽调整列的宽度
* @description 注：不支持tree结构的表头、合并表头的table【目前支持表头拖拽宽度、交互列一起使用】
*/
import React, { Component } from 'react';
import Table from '../../src';
import dragColumn from '../../src/lib/dragColumn';
import Icon from "bee-icon";
const columns23 = [
{
title: "名字",
dataIndex: "a",
key: "a",
width: '200'
},
{
title: "性别",
dataIndex: "b",
key: "b",
width: '100'
},
{
title: "年龄",
dataIndex: "c",
key: "c",
width: '200',
sumCol: true,
sorter: (a, b) => a.c - b.c
},
{
title: "武功级别",
dataIndex: "d",
key: "d",
fixed:'right',
width: 200,
}
];
const data23 = [
{ 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 defaultProps23 = {
prefixCls: "bee-table"
};
class Demo23 extends Component {
constructor(props) {
super(props);
}
render() {
return <DragColumnTable columns={columns23} data={data23} bordered
dragborder={true}
draggable={true}
/>;
}
}
Demo23.defaultProps = defaultProps23;
export default Demo23;

181
demo/demolist/Demo24.js
View File

@ -1,181 +0,0 @@
/**
*
* @title 动态设置固、取消固定列
* @description 动态设置固、取消固定列
* @description 动态固定列设置 一个table动态设置一个方向【fixed: "left"，fixed: "right"】。
*
*/
import React, { Component } from 'react';
import Table from '../../src';
import Icon from 'bee-icon';
import Menu from 'bee-menus';
import Dropdown from 'bee-dropdown';
const { Item } = Menu;
// const columns24 = [
// {
// title: "Full Name",
// width: 100,
// dataIndex: "name",
// key: "name",
// fixed: "left",
// },
// { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
// { title: "Column 1", dataIndex: "address", key: "1" },
// { title: "Column 2", dataIndex: "address2", key: "2" },
// { title: "Column 3", dataIndex: "address", key: "3" },
// { title: "Column 4", dataIndex: "address", key: "4" },
// { title: "Column 24", dataIndex: "address", key: "24" },
// { title: "Column 6", dataIndex: "address", key: "6" },
// { title: "Column 7", dataIndex: "address", key: "7" },
// { title: "Column 8", dataIndex: "address", key: "8" }
// ];
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: 100
},
{
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);
// let columns = [];
// Object.assign(columns,columns24);
// columns.forEach(da=>da.onHeadCellClick=this.onHeadCellClick);
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/Demo24.scss
View File

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

221
demo/demolist/Demo25.js
View File

@ -1,221 +0,0 @@
/**
* @title 根据列进行过滤、拖拽交换列综合使用案例
* @description 新增属性【checkMinSize 当前表格显示最少列数 】 1. 当所有列都设置了width属性后，需要给table增加checkMinSize属性 2. 所有列不设置width。
*/
/**注：
* 在使用过滤列的时候，如果每一列都设置了width属性，勾选的时候回出现重复列问题。当表格的宽度小于合计宽度的时候，就会出现此问题。
* 必须有个别列不设置width属性，即可避免此问题。
*/
import React, { Component } from 'react';
import Table from '../../src';
import multiSelect from '../../src/lib/multiSelect';
import filterColumn from '../../src/lib/filterColumn';
import dragColumn from "../../src/lib/dragColumn";
import sum from '../../src/lib/sum';
import Icon from "bee-icon";
import Checkbox from 'bee-checkbox';
import Popover from 'bee-popover';
//Cloumns1
function getCloumns(){
const column = [
{
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'>
<a href="#"
tooltip={text}
onClick={() => {
alert('这是第'+index+'列，内容为:'+text);
}}
>
一些操作
</a>
</div>
)
}
}
];
return column;
}
const dataList = [
{
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"
},
]
const DragColumnTable = filterColumn(dragColumn(multiSelect(Table, Checkbox)),Popover);
const defaultProps25 = {
prefixCls: "bee-table"
};
class Demo25 extends Component {
constructor(props) {
super(props);
}
getSelectedDataFunc=(data)=>{
console.log("data",data);
}
getCloumnsScroll=(columns)=>{
let sum = 0;
columns.forEach((da)=>{
sum += da.width;
})
console.log("sum",sum);
return (sum);
}
selectedRow=(record, index)=>{
}
render() {
let columns = getCloumns();
return <div className="demo25">
<DragColumnTable
columns={columns}
data={dataList}
getSelectedDataFunc={this.getSelectedDataFunc}
bordered
checkMinSize={7}
draggable={true}
multiSelect={{type: "checkbox"}}
scroll={{x:"130%", y: 100}}
selectedRow={this.selectedRow}
// scroll={{x:this.getCloumnsScroll(columns), y: 150}}
/>
</div>
}
}
Demo25.defaultProps = defaultProps25;
export default Demo25;

107
demo/demolist/Demo26.js
View File

@ -1,107 +0,0 @@
/**
*
* @title 按条件和值过滤
* @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;

211
demo/demolist/Demo27.js
View File

@ -1,211 +0,0 @@
/**
*
* @title 组合过滤和其他功能使用
* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等
*
*/
/**
* @description
*/
import React, { Component } from 'react';
import Table from '../../src';
import multiSelect from '../../src/lib/MultiSelect';
import sort from '../../src/lib/sort';
import Checkbox from 'bee-checkbox';
import Icon from 'bee-icon';
import Menu from 'bee-menus';
import Dropdown from 'bee-dropdown';
const { Item } = Menu;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const dataList = [
{ "key": "1", value: "库存明细", id: "a" },
{ "key": "2", value: "订单明细", id: "v" },
{ "key": "3", value: "发货明细", id: "c" }
]
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;

82
demo/demolist/Demo28.js
View File

@ -1,82 +0,0 @@
/**
*
* @title 列排序,后端排序
*
*/
import React, { Component } from 'react';
import Table from '../../src';
import Icon from "bee-icon";
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;

170
demo/demolist/Demo29.js
View File

@ -1,170 +0,0 @@
/**
*
* @title 从弹出框内显示过滤行并且设置可选下拉条件
* @description 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件
*
*/
import React, { Component } from 'react';
import Table from '../../src';
import Modal from 'bee-modal';
import Button from 'bee-button';
const columns29 = [
{
title: "姓名",
width: 180,
dataIndex: "name",
key: "name",
filterType: "text",
filterDropdown: "show",
filterDropdownIncludeKeys: ['LIKE', 'EQ']
},
{
title: "年龄",
width: 170,
dataIndex: "age",
key: "age",
filterType: "number",
filterDropdown: "show",
filterDropdownType: "number",
filterDropdownIncludeKeys: ['EQ'],
filterInputNumberOptions: {
max: 200,
min: 0,
step: 1,
precision: 0
}
},
{
title: "日期",
width: 200,
dataIndex: "date",
key: "date",
filterType: "date",
filterDropdown: "show",
format: "YYYY-MM-DD"
}
];
const data29 = [
{
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 Demo29 extends Component {
constructor() {
super();
this.state = {
show: false
}
this.close = this.close.bind(this);
this.open = this.open.bind(this);
}
handlerFilterChange = (key, val, condition) => {
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
}
handlerFilterClear = (key) => {
console.log('清除条件', key);
}
close() {
this.setState({
show: false
});
}
open() {
this.setState({
show: true
});
}
render() {
return (<div><Modal
show={this.state.show}
onHide={this.close}
autoFocus={false}
enforceFocus={false}
>
<Modal.Header closeButton>
<Modal.Title>过滤行</Modal.Title>
</Modal.Header>
<Modal.Body>
<Table
onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
filterable={true}//是否开启过滤数据功能
bordered
columns={columns29}
data={data29} />
</Modal.Body>
</Modal>
<Button colors="primary" onClick={this.open}>显示表格</Button>
</div>)
}
}
export default Demo29;

120
demo/demolist/Demo3.js
View File

@ -1,120 +0,0 @@
/**
*
* @title 表头分组并自定义表头高度
* @description columns[n] 可以内嵌 children，以渲染分组表头。
* 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
*
*/
import Button from "bee-button";
import React, { Component } from "react";
import Table from "../../src";
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 Demo3 extends Component {
render() {
return (
<Table
className={'demo3'}
columns={columns}
data={data}
headerHeight={40} //自定义表头高度
bordered
scroll={{ y: 240 }}
/>
);
}
}
export default Demo3;

6
demo/demolist/Demo3.scss
View File

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

3
demo/demolist/Demo30.js
View File

@ -65,7 +65,7 @@ const columns = [
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 = '我的性别你猜猜不定高度测试测试ing：女';
rs.b = '女';
}
return rs;
})
@ -89,6 +89,7 @@ class Demo1 extends Component {
parentNodeId='parent'
headerHeight={42}
scroll={{y:400}}
height={43}
onRowClick={(record, index, indent) => {
this.setState({
selectedRowIndex: index

141
demo/demolist/Demo31.js
View File

@ -1,141 +0,0 @@
/**
*
* @title 含有嵌套子表格的大数据场景
* @description 通过expandedRowRender参数来实现子表格
*
*/
import React, { Component } from "react";
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 (
<a
href="#"
onClick={() => {
alert("这是第" + index + "列，内容为:" + text);
}}
>
一些操作
</a>
);
}
},
{ 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 (
<a
href="#"
onClick={() => {
alert("这是第" + index + "列，内容为:" + text);
}}
>
一些操作
</a>
);
}
},
{ 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 = 42 * (this.state.data_obj[record.key].length+ 2);
return (
<Table
columns={innerColumns}
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" },
{ 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;

131
demo/demolist/Demo4.js
View File

@ -1,131 +0,0 @@
/**
*
* @title 树形数据展示
* @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;

62
demo/demolist/Demo5.js
View File

@ -1,62 +0,0 @@
/**
*
* @title 固定列
* @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: "Column 1", dataIndex: "key", key: "1" },
{ title: "Column 2", dataIndex: "address", key: "2" },
];
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 Demo5 extends Component {
render() {
return <Table columns={columns5} data={data5}scroll={{ x: "130%", y: 140 }}/>;
}
}
export default Demo5;

81
demo/demolist/Demo6.js
View File

@ -1,81 +0,0 @@
/**
*
* @title 固定表头
* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)
*
*/
import React, { Component } from 'react';
import Table from '../../src';
import dragColumn from "../../src/lib/dragColumn";;
const DragColumnTable = dragColumn(Table);
const columns6 = [
{
title: "Full Name",
width: 100,
dataIndex: "name",
key: "name"
},
{ title: "Age", width: 100, dataIndex: "age", key: "age"},
{ title: "Address", dataIndex: "address", key: "1" }
];
const data6 = [
{
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 Demo6 extends Component {
render() {
return <DragColumnTable columns={columns6} data={data6} scroll={{y: 150 }} dragborder={true} />;
}
}
export default Demo6;

85
demo/demolist/Demo7.js
View File

@ -1,85 +0,0 @@
/**
*
* @title 主子表
* @description 主表点击子表联动
*
*/
import React, { Component } from "react";
import Table from "../../src";
const columns7 = [
{ title: "班级", dataIndex: "a", key: "a" },
{ title: "人数", dataIndex: "b", key: "b" },
{ title: "班主任", dataIndex: "c", key: "c" },
{
title: "武功级别",
dataIndex: "d",
key: "d"
}
];
const data7 = [
{ a: "02级一班", b: "2", c: "欧阳锋", d: "大侠", key: "1" },
{ a: "03级二班", b: "3", c: "归海一刀", d: "大侠", key: "2" },
{ a: "05级三班", b: "1", c: "一拳超人", d: "愣头青", key: "3" }
];
const columns7_1 = [
{ title: "姓名", dataIndex: "a", key: "a" },
{ title: "班级", dataIndex: "b", key: "b" },
{ title: "系别", dataIndex: "c", key: "c" }
];
class Demo7 extends Component {
constructor(props) {
super(props);
this.state = {
children_data: []
};
}
rowclick = (record, index) => {
if (record.a === "02级一班") {
this.setState({
children_data: [
{ a: "郭靖", b: "02级一班", c: "文学系", key: "1" },
{ a: "黄蓉", b: "02级一班", c: "文学系", key: "2" }
]
});
} else if (record.a === "03级二班") {
this.setState({
children_data: [
{ a: "杨过", b: "03级二班", c: "外语系", key: "1" },
{ a: "小龙女", b: "03级二班", c: "外语系", key: "2" },
{ a: "傻姑", b: "03级二班", c: "外语系", key: "3" }
]
});
} else if (record.a === "05级三班") {
this.setState({
children_data: [{ a: "金圣叹", b: "05级三班", c: "美术系", key: "1" }]
});
}
};
render() {
return (
<div>
<Table
columns={columns7}
data={data7}
onRowClick={this.rowclick}
title={currentData => <div>标题: 我是主表</div>}
/>
<Table
style={{ marginTop: 40 }}
columns={columns7_1}
data={this.state.children_data}
title={currentData => <div>标题: 我是子表</div>}
/>
</div>
);
}
}
export default Demo7;

73
demo/demolist/Demo8.js
View File

@ -1,73 +0,0 @@
/**
*
* @title 表格+分页
* @description 点击分页联动表格
*/
import React, { Component } from "react";
import Table from "../../src";
import Pagination from "bee-pagination";
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>
<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;

163
demo/demolist/Demo9.js
View File

@ -1,163 +0,0 @@
/**
*
* @title 表格+搜索
* @description 搜索刷新表格数据
*
*
* import {Table} from 'tinper-bee';
*/
import React, { Component } from "react";
import Table from "../../src";
import Icon from "bee-icon";
import InputGroup from "bee-input-group";
import FormControl from "bee-form-control";
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;

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

12
dist/demo.css vendored
View File

@ -10322,16 +10322,4 @@ li.rc-time-picker-panel-select-option-disabled:hover {
.demo25 .u-table-filter-column-filter-icon {
right: 15px; }
th .drop-menu .uf {
font-size: 12px;
visibility: hidden;
margin-left: 15px; }
th:hover .uf {
visibility: visible; }
.demo3 .u-table-thead th {
padding-top: 0px;
padding-bottom: 0px; }
/*# sourceMappingURL=demo.css.map */

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

15547
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

3
src/Table.js
View File

@ -498,7 +498,7 @@ class Table extends Component {
<TableRow height={props.lazyLoad.preHeight} columns={[]} className='' store={this.store} visible = {true}/>
)
}
const lazyCurrentIndex = props.lazyLoad && props.lazyLoad.currentIndex ?props.lazyLoad.currentIndex :0;
const lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ?props.lazyLoad.startIndex :0;
let expandedContentHeight = 0;
for (let i = 0; i < data.length; i++) {
const record = data[i];
@ -984,7 +984,6 @@ class Table extends Component {
bodyTable.scrollTop = e.target.scrollTop;
}
this.lastScrollTop = e.target.scrollTop;
console.log('handleBodyScroll---scrollTop--'+e.target.scrollTop);
if(handleScroll){
const scrollTop = e.target.scrollTop
debounce(

124
src/lib/bigData.js
View File

@ -1,29 +1,30 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
const defaultHeight = 40;
const rowDiff = 3;//行差值
export default function bigData(Table) {
return class BigData extends Component {
static defaultProps = {
data: undefined,
// height: 40, //默认行高
data: []
};
constructor(props) {
super(props);
this.state = {
currentIndex: 0,
scrollLeft: 0,
scrollTop: 0
};
const rowHeight = this.props.height?this.props.height:defaultHeight
//默认显示25条，rowsInView根据定高算的。在非固定高下，这个只是一个大概的值。
this.rowsInView = this.props.scroll.y?Math.ceil(this.props.scroll.y/rowHeight):25 ;
this.cachedRowHeight = [];
this.rowsInView = this.props.scroll.y?Math.ceil(this.props.scroll.y/rowHeight):25 ;
this.currentIndex = 0;
this.loadCount = 30;//一次加载多少数据
this.cachedRowHeight = [];//缓存每行的高度
this.lastScrollTop = 0;
this.startIndex = this.currentIndex;//数据开始位置
this.endIndex = this.currentIndex + this.loadCount//数据结束位置
this.setRowHeight = this.setRowHeight.bind(this);
}
/**
@ -46,59 +47,67 @@ export default function bigData(Table) {
return sumHeight;
}
// getIndex(scrollTop = this.state.scrollTop) {
// const { data } = this.props
// const {rowsInView} = this;
// const max = data.length
// const mcf = scrollTop > 0.5 ? Math.ceil : Math.floor
// let index = mcf((scrollTop * max) - (rowsInView * scrollTop))
// if (index > max - rowsInView) index = max - rowsInView
// if (index < 0) index = 0
// return index
// }
// getLastRowHeight = (index) =>{
// const { height, data } = this.props
// const {rowsInView} = this;
// if (index + rowsInView >= data.length) return 0
// let lastRowHeight = 0
// if (index >= 1 && index < data.length / 2) {
// lastRowHeight = this.cachedRowHeight[index - 1] || height
// }
// return lastRowHeight
// }
handleScroll = (scrollTop)=> {
console.log('scrollTop----'+scrollTop)
const {data,height} = this.props;
const rowHeight = height?height:defaultHeight;
const {rowsInView} = this;
const {currentIndex = 0} = this.state;
// let index = currentIndex;
let index = 0;
// let temp = scrollTop - this.lastScrollTop;
let temp = scrollTop ;
// let lastScrollTop = scrollTop;
handleScroll = (nextScrollTop)=> {
const _this = this;
const {data,height,scroll={}} = _this.props;
const rowHeight = height?height:defaultHeight;
const {currentIndex = 0 ,loadCount,scrollTop} = _this;
let {endIndex,startIndex} = _this;
const {needRender} = _this.state;
let index = 0;//记录下次当前位置
let temp = nextScrollTop ;
const viewHeight = parseInt(scroll.y);
const isOrder = nextScrollTop > scrollTop?true:false;//true为向下滚动、false为向上滚动
//根据scrollTop计算下次当前索引的位置
while (temp > 0) {
temp -= this.cachedRowHeight[index] || rowHeight
if(temp > 0){
index += 1
}
}
//记录上一次滚动的位置，作为缓存用
// this.lastScrollTop = lastScrollTop + temp;
// offset last row
// index -= 1
console.log(index);
if (data.length - rowsInView < index) index = data.length - rowsInView
// if (data.length - loadCount < index) index = data.length - loadCount
if (index < 0) index = 0
//如果之前的索引和下一次的不一样则重置索引和滚动的位置
if(currentIndex !== index){
this.setState({ currentIndex: index ,scrollTop:scrollTop})
_this.currentIndex = index;
_this.scrollTop = nextScrollTop;
let rowsInView = 0 ; //可视区域显示多少行
let rowsHeight = 0; //可视区域内容高度
//如果可视区域中需要展示的数据已经在缓存中则不重现render。
if(viewHeight){
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
while(rowsHeight < viewHeight && this.cachedRowHeight[rowsInView + index] ){
rowsHeight += this.cachedRowHeight[rowsInView + index];
rowsInView++;
}
// 如果rowsInView 小于 缓存的数据则重新render
// 向下滚动 下临界值超出缓存的endIndex则重新渲染
if(rowsInView+index > endIndex - rowDiff && isOrder){
this.startIndex = index;
endIndex = this.startIndex + loadCount
if(endIndex > data.length){
endIndex = data.length
}
this.endIndex = endIndex;
this.setState({needRender: !needRender });
}
// 向上滚动，当前的index是否已经加载（currentIndex），若干上临界值小于startIndex则重新渲染
if(!isOrder && index < startIndex + rowDiff){
startIndex = index - this.loadCount/2;
if(startIndex<0){
startIndex = 0;
}
this.startIndex = startIndex;
this.endIndex = this.startIndex + loadCount
this.setState({needRender: !needRender });
}
}
console.log('**index**'+index,"**startIndex**"+this.startIndex,"**endIndex**"+this.endIndex);
}
}
@ -108,18 +117,17 @@ export default function bigData(Table) {
}
render() {
const { data } = this.props;
const { currentIndex,scrollTop } = this.state;
const {rowsInView} = this;
const { scrollTop } = this;
const {endIndex,startIndex} = this;
const lazyLoad = {
preHeight: this.getSumHeight(0, currentIndex),
sufHeight: this.getSumHeight(currentIndex + rowsInView , data.length),
currentIndex:currentIndex
preHeight: this.getSumHeight(0, startIndex),
sufHeight: this.getSumHeight(endIndex , data.length),
startIndex:startIndex
};
return (
<Table
{...this.props}
data={data.slice(currentIndex, currentIndex + rowsInView)}
data={data.slice(startIndex, endIndex)}
lazyLoad={lazyLoad}
handleScroll={this.handleScroll}
scrollTop={scrollTop}