forgetest5
/
bee-table7
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

demo

This commit is contained in:
“jonyshi” 2018-12-18 19:28:02 +08:00
parent c77fc2fbf2
commit 81a300c2b2
32 changed files with 3579 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
demo/demolist/.DS_Store vendored
View File

Binary file not shown.

92
demo/demolist/Demo1.js Normal file
View File

@ -0,0 +1,92 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,46 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,65 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,74 @@
/**
*
* @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;

134
demo/demolist/Demo13.js Normal file
View File

@ -0,0 +1,134 @@
/**
*
* @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",
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(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}
getSelectedDataFunc={this.getSelectedDataFunc}
/>
</div>
);
}
}
export default Demo13;

314
demo/demolist/Demo14.js Normal file
View File

@ -0,0 +1,314 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,122 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,130 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,76 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,145 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,227 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,202 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,58 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,109 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,68 @@
/**
*
* @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;

181
demo/demolist/Demo24.js Normal file
View File

@ -0,0 +1,181 @@
/**
*
* @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 Normal file
View File

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

221
demo/demolist/Demo25.js Normal file
View File

@ -0,0 +1,221 @@
/**
* @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 Normal file
View File

@ -0,0 +1,107 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,211 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,82 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,170 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,120 @@
/**
*
* @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 Normal file
View File

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

131
demo/demolist/Demo4.js Normal file
View File

@ -0,0 +1,131 @@
/**
*
* @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;

67
demo/demolist/Demo5.js Normal file
View File

@ -0,0 +1,67 @@
/**
*
* @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: "c1", key: "1" },
{ title: "Column 2", dataIndex: "c2", key: "2" },
{ title: "Column 3", dataIndex: "c3", key: "3" },
{ title: "Column 4", dataIndex: "c4", key: "4" },
{ title: "Column 5", dataIndex: "c5", key: "5" },
{ title: "Column 6", dataIndex: "c6", key: "6" },
{ title: "Column 7", dataIndex: "c7", key: "7" },
{ title: "Column 8", dataIndex: "c8", key: "8" }
];
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 Normal file
View File

@ -0,0 +1,81 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,85 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,73 @@
/**
*
* @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 Normal file
View File

@ -0,0 +1,163 @@
/**
*
* @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