示例分类顺序调整
This commit is contained in:
yangchch6
parent
b02dc956a3
commit
610f501f30
|
|
@ -1,12 +1,12 @@
|
|||
/**
|
||||
*
|
||||
* @title 基本用法
|
||||
* @title 基本表格
|
||||
* 【Tooltip】
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip,Popconfirm} from "tinper-bee";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
|
|
@ -29,29 +29,13 @@ const columns = [
|
|||
}
|
||||
},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<div style={{ position: 'relative' }} title={text} >
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;" tooltip={text}>
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, d: "操作", key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
||||
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||
];
|
||||
|
||||
class Demo1 extends Component {
|
||||
|
|
@ -63,6 +47,19 @@ class Demo1 extends Component {
|
|||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
handleClick = () => {
|
||||
console.log('这是第' , this.currentIndex , '行');
|
||||
console.log('内容：' , this.currentRecord);
|
||||
}
|
||||
|
||||
onRowHover=(index,record)=>{
|
||||
this.currentIndex = index;
|
||||
this.currentRecord = record;
|
||||
}
|
||||
|
||||
getHoverContent=()=>{
|
||||
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
|
@ -73,6 +70,8 @@ class Demo1 extends Component {
|
|||
parentNodeId='parent'
|
||||
height={40}
|
||||
headerHeight={40}
|
||||
hoverContent={this.getHoverContent}
|
||||
onRowHover={this.onRowHover}
|
||||
onRowClick={(record, index, indent) => {
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
|
|
@ -1,46 +1,47 @@
|
|||
/**
|
||||
*
|
||||
* @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} />;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @title 默认无数据展示
|
||||
* @description 无数据时显示效果展示（可自定义）
|
||||
*
|
||||
* import {Table} from 'tinper-bee';
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import Icon from 'bee-icon';
|
||||
|
||||
|
||||
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 = () => <Icon type="uf-nodata"></Icon>
|
||||
|
||||
class Demo10 extends Component {
|
||||
render() {
|
||||
return <Table className="demo02" columns={columns10} data={data10} emptyText={emptyFunc} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo10;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
.demo02 {
|
||||
.u-table-placeholder i{
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,81 +1,81 @@
|
|||
/**
|
||||
*
|
||||
* @title 固定表头
|
||||
* @description 当滚动纵向滚动条时，表头固定。还可以设置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} />;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @title 固定表头
|
||||
* @description 当滚动纵向滚动条时，表头固定。还可以设置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,79 @@
|
|||
/**
|
||||
*
|
||||
* @title 隔行换色
|
||||
* @description 可自定义斑马线颜色
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
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 Demo04 extends Component {
|
||||
render() {
|
||||
return <Table className="demo04" columns={columns6} data={data6} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo04;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.demo04 {
|
||||
&.u-table tr:nth-child(2n){
|
||||
background: #f7f9fb;
|
||||
}
|
||||
&.u-table tr.u-table-row-hover, .u-table tr:hover{
|
||||
background: #ebecf0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,73 +1,73 @@
|
|||
/**
|
||||
*
|
||||
* @title loading表格
|
||||
* @description loading可以传boolean或者obj对象，obj为bee-loading组件的参数类型
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import {Button,Popconfirm} from "tinper-bee";
|
||||
|
||||
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 (
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;">
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
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}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo17;
|
||||
/**
|
||||
*
|
||||
* @title 表格 Loading 加载
|
||||
* @description loading可以传boolean或者obj对象，obj为bee-loading组件的参数类型
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import {Button,Popconfirm} from "tinper-bee";
|
||||
|
||||
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 (
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;">
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
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}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo17;
|
||||
|
|
@ -1,120 +1,120 @@
|
|||
/**
|
||||
*
|
||||
* @title 多表头
|
||||
* @description columns[n] 可以内嵌 children，以渲染分组表头。
|
||||
* 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import {Button} from "tinper-bee";
|
||||
|
||||
const { ColumnGroup, Column } = Table;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: 100,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "Other",
|
||||
width:600,
|
||||
children: [
|
||||
{
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
children: [
|
||||
{
|
||||
title: "Street",
|
||||
dataIndex: "street",
|
||||
key: "street",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "Block",
|
||||
children: [
|
||||
{
|
||||
title: "Building",
|
||||
dataIndex: "building",
|
||||
key: "building",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "Door No.",
|
||||
dataIndex: "number",
|
||||
key: "number",
|
||||
width: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
width:400,
|
||||
children: [
|
||||
{
|
||||
title: "Company Address",
|
||||
dataIndex: "companyAddress",
|
||||
key: "companyAddress",
|
||||
width:200,
|
||||
},
|
||||
{
|
||||
title: "Company Name",
|
||||
dataIndex: "companyName",
|
||||
key: "companyName",
|
||||
width:200,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Gender",
|
||||
dataIndex: "gender",
|
||||
key: "gender",
|
||||
width: 60,
|
||||
fixed: "right"
|
||||
}
|
||||
];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: "John Brown",
|
||||
age: i + 1,
|
||||
street: "Lake Park",
|
||||
building: "C",
|
||||
number: 2035,
|
||||
companyAddress: "Lake Street 42",
|
||||
companyName: "SoftLake Co",
|
||||
gender: "M"
|
||||
});
|
||||
}
|
||||
|
||||
class Demo3 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
className={'demo3'}
|
||||
columns={columns}
|
||||
data={data}
|
||||
headerHeight={40} //自定义表头高度
|
||||
bordered
|
||||
scroll={{ y: 240 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo3;
|
||||
/**
|
||||
*
|
||||
* @title 多列表头
|
||||
* @description columns[n] 可以内嵌 children，以渲染分组表头。
|
||||
* 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import {Button} from "tinper-bee";
|
||||
|
||||
const { ColumnGroup, Column } = Table;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: 100,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "Other",
|
||||
width:600,
|
||||
children: [
|
||||
{
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
children: [
|
||||
{
|
||||
title: "Street",
|
||||
dataIndex: "street",
|
||||
key: "street",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "Block",
|
||||
children: [
|
||||
{
|
||||
title: "Building",
|
||||
dataIndex: "building",
|
||||
key: "building",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "Door No.",
|
||||
dataIndex: "number",
|
||||
key: "number",
|
||||
width: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
width:400,
|
||||
children: [
|
||||
{
|
||||
title: "Company Address",
|
||||
dataIndex: "companyAddress",
|
||||
key: "companyAddress",
|
||||
width:200,
|
||||
},
|
||||
{
|
||||
title: "Company Name",
|
||||
dataIndex: "companyName",
|
||||
key: "companyName",
|
||||
width:200,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Gender",
|
||||
dataIndex: "gender",
|
||||
key: "gender",
|
||||
width: 60,
|
||||
fixed: "right"
|
||||
}
|
||||
];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: "John Brown",
|
||||
age: i + 1,
|
||||
street: "Lake Park",
|
||||
building: "C",
|
||||
number: 2035,
|
||||
companyAddress: "Lake Street 42",
|
||||
companyName: "SoftLake Co",
|
||||
gender: "M"
|
||||
});
|
||||
}
|
||||
|
||||
class Demo3 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
className={'demo3'}
|
||||
columns={columns}
|
||||
data={data}
|
||||
headerHeight={40} //自定义表头高度
|
||||
bordered
|
||||
scroll={{ y: 240 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo3;
|
||||
|
|
|
|||
|
|
@ -1,93 +1,100 @@
|
|||
/**
|
||||
*
|
||||
* @title 多选表格
|
||||
* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Checkbox} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
|
||||
const columns12 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
}
|
||||
];
|
||||
|
||||
const data12 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2",_checked:true },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked: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
|
||||
};
|
||||
}
|
||||
/**
|
||||
*@param selectedList:当前选中的行数据
|
||||
*@param record 当前操作行数据
|
||||
*@param index 当前操作行索引
|
||||
* @memberof Demo12
|
||||
*/
|
||||
getSelectedDataFunc = (selectedList,record,index) => {
|
||||
console.log("selectedList", selectedList,"index",index);
|
||||
// 如果在回调中增加setState逻辑，需要同步data中的_checked属性。即下面的代码
|
||||
// const allChecked = selectedList.length == 0?false:true;
|
||||
// record为undefind则为全选或者全不选
|
||||
// if(!record){
|
||||
// data12.forEach(item=>{
|
||||
// item._checked = allChecked;
|
||||
// })
|
||||
// }else{
|
||||
// data12[index]['_checked'] = record._checked;
|
||||
// }
|
||||
|
||||
|
||||
};
|
||||
|
||||
render() {
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
return (
|
||||
<MultiSelectTable
|
||||
columns={columns12}
|
||||
data={data12}
|
||||
multiSelect={multiObj}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @title 多选表格
|
||||
* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Checkbox} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
|
||||
const columns12 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
}
|
||||
];
|
||||
|
||||
const data12 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2",_checked:true },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked:false},
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:false}
|
||||
];
|
||||
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
|
||||
let MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
|
||||
class Demo12 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data12
|
||||
};
|
||||
}
|
||||
/**
|
||||
*@param selectedList:当前选中的行数据
|
||||
*@param record 当前操作行数据
|
||||
*@param index 当前操作行索引
|
||||
* @memberof Demo12
|
||||
*/
|
||||
getSelectedDataFunc = (selectedList,record,index) => {
|
||||
console.log("selectedList", selectedList,"index",index);
|
||||
// 如果在回调中增加setState逻辑，需要同步data中的_checked属性。即下面的代码
|
||||
// const allChecked = selectedList.length == 0?false:true;
|
||||
// record为undefind则为全选或者全不选
|
||||
// if(!record){
|
||||
// data12.forEach(item=>{
|
||||
// item._checked = allChecked;
|
||||
// })
|
||||
// }else{
|
||||
// data12[index]['_checked'] = record._checked;
|
||||
// }
|
||||
|
||||
|
||||
};
|
||||
|
||||
render() {
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
return (
|
||||
<MultiSelectTable
|
||||
columns={columns12}
|
||||
data={data12}
|
||||
multiSelect={multiObj}
|
||||
rowClassName={(record,index,indent)=>{
|
||||
if (record._checked) {
|
||||
return 'selected';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo12;
|
||||
|
|
@ -1,58 +1,58 @@
|
|||
/**
|
||||
*
|
||||
* @title 选中行颜色、表头表体
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip,} from "tinper-bee";
|
||||
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName"},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||
];
|
||||
|
||||
class Demo26 extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
rowClassName={(record,index,indent)=>{
|
||||
if (this.state.selectedRowIndex == index) {
|
||||
return 'selected';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}}
|
||||
onRowClick={(record,index,indent)=>{
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo26;
|
||||
/**
|
||||
*
|
||||
* @title 选中行颜色、表头表体
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip,} from "tinper-bee";
|
||||
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName"},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||
];
|
||||
|
||||
class Demo26 extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
rowClassName={(record,index,indent)=>{
|
||||
if (this.state.selectedRowIndex == index) {
|
||||
return 'selected';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}}
|
||||
onRowClick={(record,index,indent)=>{
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo26;
|
||||
|
|
|
|||
|
|
@ -1,212 +1,212 @@
|
|||
/**
|
||||
* @title 多功能表格
|
||||
* @description 根据列进行过滤、拖拽交换列综合使用案例
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox,Popover,Popconfirm} from "tinper-bee";
|
||||
|
||||
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';
|
||||
|
||||
//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'>
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;" tooltip={text} >
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
</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}
|
||||
|
||||
checkMinSize={7}
|
||||
draggable={true}
|
||||
multiSelect={{type: "checkbox"}}
|
||||
scroll={{x:true, y: 100}}
|
||||
selectedRow={this.selectedRow}
|
||||
// scroll={{x:this.getCloumnsScroll(columns), y: 150}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Demo25.defaultProps = defaultProps25;
|
||||
|
||||
|
||||
/**
|
||||
* @title 多功能表格
|
||||
* @description 根据列进行过滤、拖拽交换列综合使用案例
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox,Popover,Popconfirm} from "tinper-bee";
|
||||
|
||||
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';
|
||||
|
||||
//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'>
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;" tooltip={text} >
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
</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}
|
||||
|
||||
checkMinSize={7}
|
||||
draggable={true}
|
||||
multiSelect={{type: "checkbox"}}
|
||||
scroll={{x:true, y: 100}}
|
||||
selectedRow={this.selectedRow}
|
||||
// scroll={{x:this.getCloumnsScroll(columns), y: 150}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Demo25.defaultProps = defaultProps25;
|
||||
|
||||
|
||||
export default Demo25;
|
||||
|
|
@ -1,186 +1,186 @@
|
|||
/**
|
||||
*
|
||||
* @title 增删改表格
|
||||
* @description 这是带有增删改功能的表格（此编辑功能未使用render组件）
|
||||
*
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import {Button,Icon,FormControl as Input,Popconfirm} from "tinper-bee";
|
||||
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
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
colors="secondary"
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.handleAdd}
|
||||
>
|
||||
添加
|
||||
</Button>
|
||||
<Table
|
||||
data={dataSource}
|
||||
columns={columns}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo2;
|
||||
/**
|
||||
*
|
||||
* @title 增删改表格
|
||||
* @description 这是带有增删改功能的表格（此编辑功能未使用render组件）
|
||||
*
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import {Button,Icon,FormControl as Input,Popconfirm} from "tinper-bee";
|
||||
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
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
colors="secondary"
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.handleAdd}
|
||||
>
|
||||
添加
|
||||
</Button>
|
||||
<Table
|
||||
data={dataSource}
|
||||
columns={columns}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo2;
|
||||
|
|
@ -1,85 +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;
|
||||
/**
|
||||
*
|
||||
* @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;
|
||||
|
|
@ -1,168 +1,168 @@
|
|||
/**
|
||||
*
|
||||
* @title 模态框中行过滤
|
||||
* @description 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Modal,Button} from "tinper-bee";
|
||||
import Table from '../../src';
|
||||
|
||||
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>)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @title 模态框中行过滤
|
||||
* @description 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Modal,Button} from "tinper-bee";
|
||||
import Table from '../../src';
|
||||
|
||||
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;
|
||||
168
demo/index.js
168
demo/index.js
File diff suppressed because one or more lines are too long
|
|
@ -216,8 +216,8 @@
|
|||
background-clip: padding-box;
|
||||
-moz-user-select: -moz-none;
|
||||
-webkit-user-select: none;
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
*/
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
|
|
@ -578,6 +578,15 @@
|
|||
.demo25 .u-table-filter-column-filter-icon {
|
||||
right: 15px; }
|
||||
|
||||
.demo02 .u-table-placeholder i {
|
||||
font-size: 40px; }
|
||||
|
||||
.demo04.u-table tr:nth-child(2n) {
|
||||
background: #f7f9fb; }
|
||||
|
||||
.demo04.u-table tr.u-table-row-hover, .demo04 .u-table tr:hover {
|
||||
background: #ebecf0; }
|
||||
|
||||
th .drop-menu .uf {
|
||||
font-size: 12px;
|
||||
visibility: hidden;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue