demo
This commit is contained in:
“jonyshi”
parent
c77fc2fbf2
commit
81a300c2b2
Binary file not shown.
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
th{
|
||||
.drop-menu{
|
||||
.uf{
|
||||
font-size: 12px;
|
||||
visibility: hidden;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
&:hover{
|
||||
.uf{
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
.demo3{
|
||||
.u-table-thead th {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue