整理示例代码
This commit is contained in:
izbz wh
parent
3e5338d9ff
commit
7301a1cbb4
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
*
|
||||
* @title 简单表格、文字过长，两种tip
|
||||
* @title 基本用法
|
||||
* 【Tooltip】
|
||||
* @description
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,46 +1,68 @@
|
|||
/**
|
||||
*
|
||||
* @title 无数据时显示
|
||||
* @description 无数据时显示效果展示（可自定义）
|
||||
*
|
||||
* import {Table} from 'tinper-bee';
|
||||
* @title 列交换
|
||||
* @description 点击列的表头，进行左右拖拽，注意：固定列不可以交换
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
|
||||
|
||||
const columns10 = [
|
||||
const columns22 = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "40%"
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: "30%"
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
dataIndex: "address",
|
||||
key: "address"
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 200,
|
||||
}
|
||||
];
|
||||
];
|
||||
|
||||
const data10 = [
|
||||
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 emptyFunc = () => <span>这里没有数据！</span>
|
||||
const defaultProps22 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
|
||||
class Demo22 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
class Demo10 extends Component {
|
||||
render() {
|
||||
return <Table columns={columns10} data={data10} emptyText={emptyFunc} />;
|
||||
}
|
||||
}
|
||||
return <DragColumnTable columns={columns22} data={data22} bordered
|
||||
|
||||
export default Demo10;
|
||||
draggable={true}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
Demo22.defaultProps = defaultProps22;
|
||||
|
||||
|
||||
export default Demo22;
|
||||
|
|
@ -1,66 +1,77 @@
|
|||
/**
|
||||
* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称
|
||||
* @title 列排序
|
||||
*
|
||||
* @title 拖拽列宽度
|
||||
* @description 注：不支持tree结构的表头、合并表头的table
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
import Table from '../../src';
|
||||
import sort from "../../src/lib/sort.js";
|
||||
|
||||
let ComplexTable = sort(Table, Icon);
|
||||
const columns11 = [
|
||||
import Table from '../../src';
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
|
||||
const columns23 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
width: '200',
|
||||
fixed:'left'
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
width: '600'
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
width: '200',
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
key: "d",
|
||||
width: 500,
|
||||
}
|
||||
];
|
||||
|
||||
const data11 = [
|
||||
const data23 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "31" } , { a: "杨过", b: "男", c: 30,d:'内行', key: "21" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "11" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "32" } , { a: "杨过", b: "男", c: 30,d:'内行', key: "22" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "12" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
||||
];
|
||||
|
||||
const defaultProps11 = {
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
||||
const defaultProps23 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
class Demo11 extends Component {
|
||||
|
||||
class Demo23 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
sortOrder: "",
|
||||
data: data11
|
||||
};
|
||||
}
|
||||
render() {
|
||||
|
||||
return <ComplexTable columns={columns11} data={this.state.data} />;
|
||||
render() {
|
||||
return <DragColumnTable columns={columns23} data={data23} bordered
|
||||
dragborder={true}
|
||||
draggable={true}
|
||||
scroll={{y:200}}
|
||||
onDropBorder ={(e,width)=>{
|
||||
console.log(width+"--调整列宽后触发事件",e.target);
|
||||
}}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
Demo11.defaultProps = defaultProps11;
|
||||
Demo23.defaultProps = defaultProps23;
|
||||
|
||||
|
||||
export default Demo11;
|
||||
export default Demo23;
|
||||
|
|
@ -1,75 +1,176 @@
|
|||
/**
|
||||
*
|
||||
* @title 全选功能
|
||||
* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）
|
||||
* @title 动态设置固定列
|
||||
* @description 动态设置固、取消固定列
|
||||
* @description 动态固定列设置 一个table动态设置一个方向【fixed: "left"，fixed: "right"】。
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Checkbox} from "tinper-bee";
|
||||
import {Icon,Menu,Dropdown} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
|
||||
const columns12 = [
|
||||
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
|
||||
width: 100,
|
||||
fixed: "left",
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
width: 100,
|
||||
fixed: "left",
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "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 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 {
|
||||
const data24 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: "1" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: "3" }
|
||||
];
|
||||
|
||||
class Demo24 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data12
|
||||
};
|
||||
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;
|
||||
});
|
||||
|
||||
}
|
||||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
render() {
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
return (
|
||||
<MultiSelectTable
|
||||
columns={columns12}
|
||||
data={data12}
|
||||
multiSelect={multiObj}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}/>
|
||||
);
|
||||
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 Demo12;
|
||||
export default Demo24;
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
th{
|
||||
.drop-menu{
|
||||
.uf{
|
||||
font-size: 12px;
|
||||
visibility: hidden;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
&:hover{
|
||||
.uf{
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,133 +1,107 @@
|
|||
/**
|
||||
*
|
||||
* @title 多列排序、全选功能、合计
|
||||
* @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
|
||||
*
|
||||
*/
|
||||
*
|
||||
* @title 按条件、值过滤
|
||||
* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Checkbox,Button,Icon} from "tinper-bee";
|
||||
import ComplexTable from "../../src";
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
import sort from "../../src/lib/sort.js";
|
||||
import sum from "../../src/lib/sum.js";
|
||||
|
||||
const columns13 = [
|
||||
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 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
className:'dfasd',
|
||||
width: 200
|
||||
key: "1",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
date: "2018-09-19",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
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);
|
||||
}
|
||||
key: "2",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
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);
|
||||
}
|
||||
key: "3",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "东城区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
title: "成绩",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c,
|
||||
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: "无"
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 200
|
||||
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 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
|
||||
};
|
||||
class Demo26 extends Component {
|
||||
handlerFilterChange = (key, val, condition) => {
|
||||
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
|
||||
}
|
||||
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() {}
|
||||
});
|
||||
};
|
||||
|
||||
handlerFilterClear = (key) => {
|
||||
console.log('清除条件', key);
|
||||
}
|
||||
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>
|
||||
);
|
||||
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 Demo13;
|
||||
|
||||
export default Demo26;
|
||||
|
|
@ -1,308 +1,200 @@
|
|||
/**
|
||||
*
|
||||
* @title 编辑态表格
|
||||
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
|
||||
* @title 复杂表格中行过滤
|
||||
* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等
|
||||
*
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import {Animate,Tooltip,FormControl,Button,Form,Icon,Checkbox,Select} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import Datepicker from "bee-datepicker";
|
||||
import renderInput from "../../build/render/InputRender.js";
|
||||
import renderDate from "../../build/render/DateRender.js";
|
||||
import renderSelect from "../../build/render/SelectRender.js";
|
||||
/**
|
||||
* @description
|
||||
*/
|
||||
|
||||
const InputRender = renderInput(Form, FormControl, Icon);
|
||||
const DateRender = renderDate(Datepicker, Icon);
|
||||
const SelectRender = renderSelect(Select, Icon);
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox,Dropdown,Menu} from "tinper-bee";
|
||||
|
||||
const format = "YYYY-MM-DD";
|
||||
const format2 = "YYYY-MM";
|
||||
const format3 = "YYYY-MM-DD HH:mm:ss";
|
||||
import Table from '../../src';
|
||||
import multiSelect from '../../src/lib/multiSelect';
|
||||
import sort from '../../src/lib/sort';
|
||||
|
||||
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"
|
||||
},
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const MenuItemGroup = Menu.ItemGroup;
|
||||
|
||||
const data27 = [
|
||||
{
|
||||
key: "1",
|
||||
name: "落雁",
|
||||
number: "100",
|
||||
age: "y",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
date: "2018-09-19",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "闭月",
|
||||
number: "1000",
|
||||
age: "n",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "羞花",
|
||||
number: "9999",
|
||||
age: "y",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
}
|
||||
],
|
||||
count: 4
|
||||
};
|
||||
this.columns = [
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "东城区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
title: "普通输入",
|
||||
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",
|
||||
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>
|
||||
}
|
||||
/>
|
||||
)
|
||||
filterType: "text",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "string"//字符条件
|
||||
},
|
||||
{
|
||||
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: "复选",
|
||||
title: "年龄",
|
||||
width: 180,
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: "100px",
|
||||
render: (text, record, index) => (
|
||||
<Checkbox
|
||||
checked={record.age}
|
||||
onChange={this.onCheckChange(index, "age")}
|
||||
/>
|
||||
)
|
||||
filterType: "number",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "number"//字符条件
|
||||
},
|
||||
{
|
||||
title: "下拉框",
|
||||
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",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<SelectRender
|
||||
dataSource={dataSource}
|
||||
isclickTrigger={true}
|
||||
value={text}
|
||||
onChange={this.onSelectChange(index, "address")}
|
||||
size="sm"
|
||||
>
|
||||
<Option value="jack">boyuzhou</Option>
|
||||
<Option value="lucy">renhualiu</Option>
|
||||
<Option value="disabled" disabled>
|
||||
Disabled
|
||||
</Option>
|
||||
<Option value="yiminghe">yuzhao</Option>
|
||||
</SelectRender>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "年月日",
|
||||
dataIndex: "datepicker",
|
||||
key: "datepicker",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<DateRender
|
||||
value={text}
|
||||
isclickTrigger={true}
|
||||
format={format}
|
||||
onSelect={this.onDateSelect}
|
||||
onChange={this.onDateChange}
|
||||
placeholder={dateInputPlaceholder}
|
||||
/>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "年月",
|
||||
dataIndex: "MonthPicker",
|
||||
key: "MonthPicker",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<DateRender
|
||||
value={text}
|
||||
type="MonthPicker"
|
||||
isclickTrigger={true}
|
||||
format={format2}
|
||||
onSelect={this.onSelect}
|
||||
onChange={this.onChange}
|
||||
placeholder={dateInputPlaceholder2}
|
||||
/>
|
||||
);
|
||||
}
|
||||
filterType: "dropdown",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "number"//字符条件
|
||||
}
|
||||
];
|
||||
}
|
||||
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>
|
||||
);
|
||||
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 Demo14;
|
||||
export default Demo27;
|
||||
|
|
@ -1,122 +1,168 @@
|
|||
/**
|
||||
*
|
||||
* @title 表格行/列合并
|
||||
* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
|
||||
* @title 模态框中行过滤
|
||||
* @description 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件
|
||||
*
|
||||
*/
|
||||
|
||||
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;
|
||||
};
|
||||
import React, { Component } from 'react';
|
||||
import {Modal,Button} from "tinper-bee";
|
||||
import Table from '../../src';
|
||||
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
const columns29 = [
|
||||
{
|
||||
title: "姓名",
|
||||
width: 180,
|
||||
dataIndex: "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,
|
||||
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: '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;
|
||||
{
|
||||
title: "日期",
|
||||
width: 200,
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
filterType: "date",
|
||||
filterDropdown: "show",
|
||||
format: "YYYY-MM-DD"
|
||||
}
|
||||
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',
|
||||
const data29 = [
|
||||
{
|
||||
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',
|
||||
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,
|
||||
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',
|
||||
}];
|
||||
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 Demo15 extends Component {
|
||||
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 (
|
||||
<Table columns={columns} data={data}/>
|
||||
);
|
||||
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 Demo15;
|
||||
export default Demo29;
|
||||
|
|
@ -1,133 +1,46 @@
|
|||
/**
|
||||
*
|
||||
* @title 嵌套子表格
|
||||
* @description 通过expandedRowRender参数来实现子表格
|
||||
*
|
||||
* @title 无数据时显示
|
||||
* @description 无数据时显示效果展示（可自定义）
|
||||
*
|
||||
* import {Table} from 'tinper-bee';
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
const columns16 = [
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
|
||||
const columns10 = [
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width:200,
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
alert("这是第" + index + "列，内容为:" + text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
);
|
||||
}
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "40%"
|
||||
},
|
||||
{ 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: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: "30%"
|
||||
},
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{
|
||||
title: "Address",
|
||||
dataIndex: "address",
|
||||
key: "address"
|
||||
}
|
||||
];
|
||||
|
||||
];
|
||||
const data10 = [
|
||||
|
||||
const data16 = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
||||
];
|
||||
];
|
||||
|
||||
const emptyFunc = () => <span>这里没有数据！</span>
|
||||
|
||||
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;
|
||||
}
|
||||
class Demo10 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<DragColumnTable
|
||||
columns={columns16}
|
||||
data={data16}
|
||||
onExpand={this.getData}
|
||||
expandedRowRender={this.expandedRowRender}
|
||||
scroll={{x:true}}
|
||||
dragborder={true}
|
||||
draggable={true}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
/>
|
||||
);
|
||||
return <Table columns={columns10} data={data10} emptyText={emptyFunc} />;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo16;
|
||||
export default Demo10;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
*
|
||||
* @title loading属性指定表格是否加载中
|
||||
* @title loading表格
|
||||
* @description loading可以传boolean或者obj对象，obj为bee-loading组件的参数类型
|
||||
*
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
/**
|
||||
*
|
||||
* @title 合并标题后的合计,且支持多字段统计
|
||||
* @description 合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）
|
||||
* @title 多表头
|
||||
* @description columns[n] 可以内嵌 children，以渲染分组表头。
|
||||
* 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import sum from "../../src/lib/sum.js";
|
||||
import {Button} from "tinper-bee";
|
||||
|
||||
let ComplexTable = sum(Table);
|
||||
const { ColumnGroup, Column } = Table;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -22,13 +22,13 @@ const columns = [
|
|||
},
|
||||
{
|
||||
title: "Other",
|
||||
width:600,
|
||||
children: [
|
||||
{
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
|
|
@ -52,8 +52,7 @@ const columns = [
|
|||
title: "Door No.",
|
||||
dataIndex: "number",
|
||||
key: "number",
|
||||
// width: 100,
|
||||
sumCol: true,
|
||||
width: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -61,85 +60,61 @@ const columns = [
|
|||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// title: "Company",
|
||||
// children: [
|
||||
// {
|
||||
// title: "Company Address",
|
||||
// dataIndex: "companyAddress",
|
||||
// key: "companyAddress",
|
||||
// width: 100,
|
||||
// },
|
||||
// {
|
||||
// title: "Company Name",
|
||||
// dataIndex: "companyName",
|
||||
// key: "companyName",
|
||||
// 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: 80,
|
||||
width: 60,
|
||||
fixed: "right"
|
||||
}
|
||||
];
|
||||
|
||||
function getData(){
|
||||
const data = [];
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: "John Brown"+i,
|
||||
age: i + Math.floor(Math.random()*10),
|
||||
name: "John Brown",
|
||||
age: i + 1,
|
||||
street: "Lake Park",
|
||||
building: "C",
|
||||
number: 20 * Math.floor(Math.random()*10),
|
||||
number: 2035,
|
||||
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()
|
||||
});
|
||||
}
|
||||
|
||||
class Demo3 extends Component {
|
||||
render() {
|
||||
const {data} = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.changeData}
|
||||
>
|
||||
动态设置数据源
|
||||
</Button>
|
||||
|
||||
<ComplexTable
|
||||
<Table
|
||||
className={'demo3'}
|
||||
columns={columns}
|
||||
data={data}
|
||||
headerHeight={40} //自定义表头高度
|
||||
bordered
|
||||
// scroll={{ x: "130%", y: 140 }}
|
||||
scroll={{ y: 240 }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Demo18;
|
||||
|
||||
export default Demo3;
|
||||
|
|
|
|||
|
|
@ -1,221 +1,122 @@
|
|||
/**
|
||||
*
|
||||
* @title 编辑态表格
|
||||
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
|
||||
* @title 表格行、列合并
|
||||
* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
|
||||
*
|
||||
*/
|
||||
import React from "react";
|
||||
import {Button,Animate,FormControl as Input,Tooltip,Icon,Form,Select} from "tinper-bee";
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
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
|
||||
const renderContent = (value, row, index) => {
|
||||
const obj = {
|
||||
children: value,
|
||||
props: {},
|
||||
};
|
||||
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>
|
||||
if (index === 4) {
|
||||
obj.props.colSpan = 0;
|
||||
}
|
||||
reg={/^[0-9]+$/}
|
||||
/>
|
||||
)
|
||||
},
|
||||
return obj;
|
||||
};
|
||||
|
||||
{
|
||||
title:(<div>下拉框的div</div>),
|
||||
dataIndex: "address",
|
||||
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",
|
||||
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}
|
||||
size="sm"
|
||||
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);
|
||||
};
|
||||
dataIndex: 'address',
|
||||
render: renderContent,
|
||||
}];
|
||||
|
||||
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}`,
|
||||
const data = [{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: "jack",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
};
|
||||
this.setState({
|
||||
dataSource: [...dataSource, newData],
|
||||
count: count + 1
|
||||
});
|
||||
};
|
||||
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',
|
||||
}];
|
||||
|
||||
getBodyWrapper = body => {
|
||||
return (
|
||||
<Animate
|
||||
transitionName="move"
|
||||
component="tbody"
|
||||
className={body.props.className}
|
||||
>
|
||||
{body.props.children}
|
||||
</Animate>
|
||||
);
|
||||
};
|
||||
getData = () => {
|
||||
console.log(this.state.dataSource);
|
||||
};
|
||||
class Demo15 extends Component {
|
||||
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>
|
||||
<Table columns={columns} data={data}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo19;
|
||||
|
||||
export default Demo15;
|
||||
|
|
|
|||
|
|
@ -1,197 +1,75 @@
|
|||
/**
|
||||
*
|
||||
* @title 增删改表格
|
||||
* @description 这是带有增删改功能的表格（此编辑功能未使用render组件）
|
||||
* @title 多选表格
|
||||
* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据
|
||||
*
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import {Button,Icon,FormControl as Input,Popconfirm,Animate} 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 = [
|
||||
|
||||
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: "name",
|
||||
key: "name",
|
||||
width: "30%",
|
||||
render: (text, record, index) => (
|
||||
<EditableCell
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "name")}
|
||||
/>
|
||||
)
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "age",
|
||||
key: "age"
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
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;
|
||||
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 = {
|
||||
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
|
||||
data: data12
|
||||
};
|
||||
}
|
||||
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
|
||||
});
|
||||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
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;
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
colors="secondary"
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.handleAdd}
|
||||
>
|
||||
添加
|
||||
</Button>
|
||||
<Table
|
||||
data={dataSource}
|
||||
columns={columns}
|
||||
getBodyWrapper={this.getBodyWrapper}
|
||||
/>
|
||||
</div>
|
||||
<MultiSelectTable
|
||||
columns={columns12}
|
||||
data={data12}
|
||||
multiSelect={multiObj}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo2;
|
||||
export default Demo12;
|
||||
|
|
@ -1,58 +1,133 @@
|
|||
/**
|
||||
*
|
||||
* @title 简单表格选中行的背景色、表头表尾
|
||||
* @description
|
||||
*/
|
||||
*
|
||||
* @title 多功能表格
|
||||
* @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip,} from "tinper-bee";
|
||||
|
||||
import {Checkbox,Button,Icon} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
import sort from "../../src/lib/sort.js";
|
||||
import sum from "../../src/lib/sum.js";
|
||||
|
||||
const 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 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 data = [
|
||||
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||
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" }
|
||||
];
|
||||
|
||||
class Demo26 extends Component {
|
||||
|
||||
constructor(props){
|
||||
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
|
||||
let ComplexTable = multiSelect(sum(sort(Table, Icon)), Checkbox);
|
||||
|
||||
class Demo13 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
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() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
rowClassName={(record,index,indent)=>{
|
||||
if (this.state.selectedRowIndex == index) {
|
||||
return 'selected';
|
||||
} else {
|
||||
return '';
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
let sortObj = {
|
||||
mode:'multiple'
|
||||
}
|
||||
}}
|
||||
onRowClick={(record,index,indent)=>{
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
|
||||
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 Demo26;
|
||||
export default Demo13;
|
||||
|
|
@ -1,108 +1,145 @@
|
|||
/**
|
||||
*
|
||||
* @title 根据列进行过滤
|
||||
* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
|
||||
*
|
||||
*/
|
||||
*
|
||||
* @title 合并列后合计
|
||||
* @description 合并标题后的合计,且支持多字段统计（通过使用的封装好的功能方法实现复杂功能，简单易用！）
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import sum from "../../src/lib/sum.js";
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox,Popover} from "tinper-bee";
|
||||
let ComplexTable = sum(Table);
|
||||
|
||||
import Table from '../../src';
|
||||
import filterColumn from '../../src/lib/filterColumn';
|
||||
import sum from '../../src/lib/sum';
|
||||
|
||||
const data21 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行',e: "操作", key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠',e: "操作", key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠',e: "操作", key: "3" }
|
||||
const 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"
|
||||
}
|
||||
];
|
||||
|
||||
const FilterColumnTable = filterColumn(Table, Popover, Icon);
|
||||
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;
|
||||
}
|
||||
|
||||
const defaultProps21 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
class Demo18 extends Component {
|
||||
|
||||
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.state = {
|
||||
data: getData()
|
||||
};
|
||||
}
|
||||
|
||||
changeData = ()=>{
|
||||
this.setState({
|
||||
columns21 :columns,
|
||||
showFilterPopover:true
|
||||
data: getData()
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const {data} = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.changeData}
|
||||
>
|
||||
动态设置数据源
|
||||
</Button>
|
||||
|
||||
return <FilterColumnTable columns={this.state.columns21} data={data21} afterFilter={this.afterFilter} showFilterPopover={this.state.showFilterPopover}/>;
|
||||
<ComplexTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
// scroll={{ x: "130%", y: 140 }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Demo21.defaultProps = defaultProps21;
|
||||
|
||||
|
||||
export default Demo21;
|
||||
export default Demo18;
|
||||
|
|
|
|||
|
|
@ -1,68 +1,58 @@
|
|||
/**
|
||||
*
|
||||
* @title 列的拖拽，交换表头的顺序
|
||||
* @description 点击列的表头，进行左右拖拽
|
||||
* @title 选中行颜色、表头表体
|
||||
* @description
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip,} from "tinper-bee";
|
||||
|
||||
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,
|
||||
}
|
||||
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 data22 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
||||
const data = [
|
||||
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||
];
|
||||
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
class Demo26 extends Component {
|
||||
|
||||
const defaultProps22 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
|
||||
class Demo22 extends Component {
|
||||
constructor(props) {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return <DragColumnTable columns={columns22} data={data22} bordered
|
||||
|
||||
draggable={true}
|
||||
/>;
|
||||
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>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
Demo22.defaultProps = defaultProps22;
|
||||
|
||||
|
||||
export default Demo22;
|
||||
export default Demo26;
|
||||
|
|
|
|||
|
|
@ -1,77 +1,85 @@
|
|||
/**
|
||||
*
|
||||
* @title 拖拽调整列的宽度
|
||||
* @description 注：不支持tree结构的表头、合并表头的table【目前支持表头拖拽宽度、交互列一起使用】
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
*
|
||||
* @title 主子表
|
||||
* @description 主表点击子表联动
|
||||
*
|
||||
*/
|
||||
|
||||
import Table from '../../src';
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns23 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: '200',
|
||||
fixed:'left'
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: '600'
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: '200',
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
const columns7 = [
|
||||
{ title: "班级", dataIndex: "a", key: "a" },
|
||||
{ title: "人数", dataIndex: "b", key: "b" },
|
||||
{ title: "班主任", dataIndex: "c", key: "c" },
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 500,
|
||||
key: "d"
|
||||
}
|
||||
];
|
||||
|
||||
const data23 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "31" } , { a: "杨过", b: "男", c: 30,d:'内行', key: "21" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "11" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "32" } , { a: "杨过", b: "男", c: 30,d:'内行', key: "22" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "12" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
||||
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 DragColumnTable = dragColumn(Table);
|
||||
const columns7_1 = [
|
||||
{ title: "姓名", dataIndex: "a", key: "a" },
|
||||
{ title: "班级", dataIndex: "b", key: "b" },
|
||||
{ title: "系别", dataIndex: "c", key: "c" }
|
||||
];
|
||||
|
||||
const defaultProps23 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
|
||||
class Demo23 extends Component {
|
||||
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 <DragColumnTable columns={columns23} data={data23} bordered
|
||||
dragborder={true}
|
||||
draggable={true}
|
||||
scroll={{y:200}}
|
||||
onDropBorder ={(e,width)=>{
|
||||
console.log(width+"--调整列宽后触发事件",e.target);
|
||||
}}
|
||||
/>;
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Demo23.defaultProps = defaultProps23;
|
||||
|
||||
|
||||
export default Demo23;
|
||||
export default Demo7;
|
||||
|
|
|
|||
|
|
@ -1,176 +1,73 @@
|
|||
/**
|
||||
*
|
||||
* @title 动态设置固、取消固定列
|
||||
* @description 动态设置固、取消固定列
|
||||
* @description 动态固定列设置 一个table动态设置一个方向【fixed: "left"，fixed: "right"】。
|
||||
*
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Menu,Dropdown} from "tinper-bee";
|
||||
*
|
||||
* @title 表格+分页
|
||||
* @description 点击分页联动表格
|
||||
*/
|
||||
|
||||
import Table from '../../src';
|
||||
import React, { Component } from "react";
|
||||
import {Pagination} from "tinper-bee";
|
||||
|
||||
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" }
|
||||
// ];
|
||||
import Table from "../../src";
|
||||
|
||||
|
||||
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,
|
||||
},
|
||||
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",
|
||||
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
|
||||
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" }
|
||||
]
|
||||
};
|
||||
|
||||
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 {
|
||||
|
||||
class Demo8 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
columns:columns24
|
||||
}
|
||||
data: pageData[1],
|
||||
activePage: 1
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
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]
|
||||
|
||||
handleSelect(eventKey) {
|
||||
this.setState({
|
||||
columns
|
||||
data: pageData[eventKey],
|
||||
activePage: eventKey
|
||||
});
|
||||
}
|
||||
//表头增加下拉菜单
|
||||
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>;
|
||||
return (
|
||||
<div className="demo8">
|
||||
<Table columns={columns8} data={this.state.data} />
|
||||
<Pagination
|
||||
first
|
||||
last
|
||||
prev
|
||||
next
|
||||
maxButtons={5}
|
||||
boundaryLinks
|
||||
activePage={this.state.activePage}
|
||||
onSelect={this.handleSelect.bind(this)}
|
||||
onDataNumSelect={this.dataNumSelect}
|
||||
showJump={true}
|
||||
total={100}
|
||||
dataNum={2}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo24;
|
||||
export default Demo8;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,10 @@
|
|||
th{
|
||||
.drop-menu{
|
||||
.uf{
|
||||
font-size: 12px;
|
||||
visibility: hidden;
|
||||
margin-left: 15px;
|
||||
.demo8{
|
||||
.u-table {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
|
||||
.u-pagination{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&:hover{
|
||||
.uf{
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,219 +1,161 @@
|
|||
/**
|
||||
* @title 根据列进行过滤、拖拽交换列综合使用案例
|
||||
* @description 新增属性【checkMinSize 当前表格显示最少列数 】 1. 当所有列都设置了width属性后，需要给table增加checkMinSize属性 2. 所有列不设置width。
|
||||
*/
|
||||
|
||||
/**注：
|
||||
* 在使用过滤列的时候，如果每一列都设置了width属性，勾选的时候回出现重复列问题。当表格的宽度小于合计宽度的时候，就会出现此问题。
|
||||
* 必须有个别列不设置width属性，即可避免此问题。
|
||||
*
|
||||
* @title 表格+搜索
|
||||
* @description 搜索刷新表格数据
|
||||
*
|
||||
*
|
||||
* import {Table} from 'tinper-bee';
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox,Popover} 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';
|
||||
import React, { Component } from "react";
|
||||
import {Icon,FormControl,InputGroup} from "tinper-bee";
|
||||
|
||||
//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,
|
||||
import Table from "../../src";
|
||||
|
||||
},
|
||||
{
|
||||
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>
|
||||
)
|
||||
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();
|
||||
}
|
||||
}
|
||||
];
|
||||
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"
|
||||
},
|
||||
]
|
||||
/**
|
||||
* 输入框改变
|
||||
* @param e
|
||||
*/
|
||||
handleChange = (e) => {
|
||||
this.setState({
|
||||
searchValue: e
|
||||
});
|
||||
};
|
||||
|
||||
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)=>{
|
||||
|
||||
}
|
||||
/**
|
||||
* 清空输入框
|
||||
*/
|
||||
emptySearch = () => {
|
||||
let { onEmpty } = this.props;
|
||||
this.setState({
|
||||
searchValue: "",
|
||||
empty: false
|
||||
});
|
||||
onEmpty && onEmpty();
|
||||
};
|
||||
|
||||
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}}
|
||||
return (
|
||||
<InputGroup simple className="search-component">
|
||||
<FormControl
|
||||
onChange={this.handleChange}
|
||||
value={this.state.searchValue}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
placeholder="请输入用户名"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Demo25.defaultProps = defaultProps25;
|
||||
|
||||
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"
|
||||
}
|
||||
];
|
||||
|
||||
export default Demo25;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -1,107 +1,308 @@
|
|||
/**
|
||||
*
|
||||
* @title 按条件和值过滤
|
||||
* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤
|
||||
* @title 编辑态表格
|
||||
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
|
||||
*
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import {Animate,Tooltip,FormControl,Button,Form,Icon,Checkbox,Select} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import Datepicker from "bee-datepicker";
|
||||
import renderInput from "../../build/render/InputRender.js";
|
||||
import renderDate from "../../build/render/DateRender.js";
|
||||
import renderSelect from "../../build/render/SelectRender.js";
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
const InputRender = renderInput(Form, FormControl, Icon);
|
||||
const DateRender = renderDate(Datepicker, Icon);
|
||||
const SelectRender = renderSelect(Select, Icon);
|
||||
|
||||
const format = "YYYY-MM-DD";
|
||||
const format2 = "YYYY-MM";
|
||||
const format3 = "YYYY-MM-DD HH:mm:ss";
|
||||
|
||||
const 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 dateInputPlaceholder = "选择日期";
|
||||
const dateInputPlaceholder2 = "选择年月";
|
||||
const dataSource = [
|
||||
{
|
||||
key: "boyuzhou",
|
||||
value: "jack"
|
||||
},
|
||||
{
|
||||
key: "renhualiu",
|
||||
value: "lucy"
|
||||
},
|
||||
{
|
||||
key: "yuzhao",
|
||||
value: "yiminghe"
|
||||
}
|
||||
];
|
||||
|
||||
const data26 = [
|
||||
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: "John Brown",
|
||||
age: 32,
|
||||
date: "2018-09-19",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
name: "落雁",
|
||||
number: "100",
|
||||
age: "y",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
name: "闭月",
|
||||
number: "1000",
|
||||
age: "n",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "东城区",
|
||||
mark: "无"
|
||||
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>
|
||||
}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "东城区",
|
||||
mark: "无"
|
||||
}, {
|
||||
key: "5",
|
||||
name: "John Brown",
|
||||
title: "货币输入",
|
||||
dataIndex: "number",
|
||||
key: "number",
|
||||
width: "150px",
|
||||
render: (text, record, index) => (
|
||||
<InputRender
|
||||
format="Currency"
|
||||
name="number"
|
||||
placeholder="请输入货币"
|
||||
value={text}
|
||||
isclickTrigger={true}
|
||||
check={this.check}
|
||||
onChange={this.onInputChange(index, "number")}
|
||||
isRequire={true}
|
||||
method="blur"
|
||||
errorMessage={
|
||||
<Tooltip overlay={"错误提示"}>
|
||||
<Icon type="uf-exc-c" className="" />
|
||||
</Tooltip>
|
||||
}
|
||||
reg={/^[0-9]+$/}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "复选",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: "100px",
|
||||
render: (text, record, index) => (
|
||||
<Checkbox
|
||||
checked={record.age}
|
||||
onChange={this.onCheckChange(index, "age")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "下拉框",
|
||||
dataIndex: "address",
|
||||
key: "address",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<SelectRender
|
||||
dataSource={dataSource}
|
||||
isclickTrigger={true}
|
||||
value={text}
|
||||
onChange={this.onSelectChange(index, "address")}
|
||||
size="sm"
|
||||
>
|
||||
<Option value="jack">boyuzhou</Option>
|
||||
<Option value="lucy">renhualiu</Option>
|
||||
<Option value="disabled" disabled>
|
||||
Disabled
|
||||
</Option>
|
||||
<Option value="yiminghe">yuzhao</Option>
|
||||
</SelectRender>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "年月日",
|
||||
dataIndex: "datepicker",
|
||||
key: "datepicker",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<DateRender
|
||||
value={text}
|
||||
isclickTrigger={true}
|
||||
format={format}
|
||||
onSelect={this.onDateSelect}
|
||||
onChange={this.onDateChange}
|
||||
placeholder={dateInputPlaceholder}
|
||||
/>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "年月",
|
||||
dataIndex: "MonthPicker",
|
||||
key: "MonthPicker",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<DateRender
|
||||
value={text}
|
||||
type="MonthPicker"
|
||||
isclickTrigger={true}
|
||||
format={format2}
|
||||
onSelect={this.onSelect}
|
||||
onChange={this.onChange}
|
||||
placeholder={dateInputPlaceholder2}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
check = (flag, obj) => {
|
||||
console.log(flag);
|
||||
console.log(obj);
|
||||
};
|
||||
|
||||
onInputChange = (index, key) => {
|
||||
return value => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onCheckChange = (index, key) => {
|
||||
return value => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onSelectChange = (index, key) => {
|
||||
return value => {
|
||||
console.log(`selected ${value}`);
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onDateChange = d => {
|
||||
console.log(d);
|
||||
};
|
||||
onDateSelect = d => {
|
||||
console.log(d);
|
||||
};
|
||||
onDelete = index => {
|
||||
return () => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource.splice(index, 1);
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
handleAdd = () => {
|
||||
const { count, dataSource } = this.state;
|
||||
const newData = {
|
||||
key: count,
|
||||
name: `凤姐 ${count}`,
|
||||
age: 32,
|
||||
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: "无"
|
||||
}
|
||||
];
|
||||
address: "jack",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
};
|
||||
this.setState({
|
||||
dataSource: [...dataSource, newData],
|
||||
count: count + 1
|
||||
});
|
||||
};
|
||||
|
||||
class Demo26 extends Component {
|
||||
handlerFilterChange = (key, val, condition) => {
|
||||
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
|
||||
}
|
||||
|
||||
handlerFilterClear = (key) => {
|
||||
console.log('清除条件', key);
|
||||
}
|
||||
getBodyWrapper = body => {
|
||||
return (
|
||||
<Animate
|
||||
transitionName="move"
|
||||
component="tbody"
|
||||
className={body.props.className}
|
||||
>
|
||||
{body.props.children}
|
||||
</Animate>
|
||||
);
|
||||
};
|
||||
getData = () => {
|
||||
console.log(this.state.dataSource);
|
||||
};
|
||||
render() {
|
||||
return <Table
|
||||
onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
|
||||
onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
|
||||
filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
|
||||
filterable={true}//是否开启过滤数据功能
|
||||
bordered
|
||||
columns={columns26}
|
||||
data={data26} />;
|
||||
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 Demo26;
|
||||
export default Demo14;
|
||||
|
|
|
|||
|
|
@ -1,208 +1,80 @@
|
|||
/**
|
||||
*
|
||||
* @title 组合过滤和其他功能使用
|
||||
* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等
|
||||
*
|
||||
* @title 滚动加载
|
||||
* @description
|
||||
*/
|
||||
|
||||
/**
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox,Dropdown,Menu} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import multiSelect from '../../src/lib/multiSelect';
|
||||
import sort from '../../src/lib/sort';
|
||||
|
||||
const { 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 = [
|
||||
import React, { Component } from "react";
|
||||
import {Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import BigData from "../../src/lib/bigData";
|
||||
const BigDataTable = BigData(Table);
|
||||
const columns = [
|
||||
{
|
||||
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: "无"
|
||||
title:'序号',
|
||||
dataIndex:'index',
|
||||
width:'50',
|
||||
key:'index',
|
||||
render:(text,record,index)=>{
|
||||
return index
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
|
||||
|
||||
];
|
||||
|
||||
const data = [ ...new Array(10000) ].map((e, i) => {
|
||||
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
|
||||
if(i%3==0){
|
||||
rs.b = '女';
|
||||
}
|
||||
return rs;
|
||||
})
|
||||
|
||||
|
||||
class Demo30 extends Component {
|
||||
|
||||
const MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
const ComplexTable = sort(MultiSelectTable, Icon);
|
||||
class Demo27 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dropdownvalue: []
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
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} />;
|
||||
return (
|
||||
<BigDataTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
scroll={{y:300}}
|
||||
height={40}
|
||||
onRowClick={(record, index, indent) => {
|
||||
console.log('currentIndex--'+index);
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo27;
|
||||
export default Demo30;
|
||||
|
|
@ -1,83 +1,146 @@
|
|||
/**
|
||||
*
|
||||
* @title 列排序,后端排序
|
||||
* @title 嵌套子表格滚动加载
|
||||
* @description 通过expandedRowRender参数来实现子表格
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
import Table from '../../src';
|
||||
import sort from "../../src/lib/sort.js";
|
||||
let ComplexTable = sort(Table, Icon);
|
||||
|
||||
const columns11 = [
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import BigData from "../../src/lib/bigData";
|
||||
const BigDataTable = BigData(Table);
|
||||
const outColumns = [
|
||||
{
|
||||
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: "武功级别",
|
||||
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
|
||||
};
|
||||
key: "d",
|
||||
width:200,
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
alert("这是第" + index + "列，内容为:" + text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
);
|
||||
}
|
||||
/**
|
||||
* 后端获取数据
|
||||
*/
|
||||
sortFun = (sortParam)=>{
|
||||
console.info(sortParam);
|
||||
//将参数传递给后端排序
|
||||
},
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 250 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
|
||||
];
|
||||
const innerColumns = [
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width:200,
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
alert("这是第" + index + "列，内容为:" + text);
|
||||
}}
|
||||
>
|
||||
{'一些操作'+index}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
|
||||
];
|
||||
|
||||
const data16 = [ ...new Array(10000) ].map((e, i) => {
|
||||
return { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class Demo31 extends Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state={
|
||||
data_obj:{
|
||||
0:[
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
|
||||
],
|
||||
1: [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "菲菲", b: "nv", c: 67, d: "操作", key: "2" }
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
expandedRowRender = (record, index, indent) => {
|
||||
let height = 200;
|
||||
let innderData = [ ...new Array(100) ].map((e, i) => {
|
||||
return { a: index+"-"+ i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: index+"-"+ i };
|
||||
})
|
||||
return (
|
||||
<Table
|
||||
|
||||
columns={innerColumns}
|
||||
scroll={{y:height}}
|
||||
data={innderData}
|
||||
|
||||
/>
|
||||
);
|
||||
};
|
||||
getData=(expanded, record)=>{
|
||||
//当点击展开的时候才去请求数据
|
||||
let new_obj = Object.assign({},this.state.data_obj);
|
||||
if(expanded){
|
||||
if(record.key==='1'){
|
||||
new_obj[record.key] = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
|
||||
]
|
||||
this.setState({
|
||||
data_obj:new_obj
|
||||
})
|
||||
}else{
|
||||
new_obj[record.key] = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "菲菲", b: "nv", c: 67, d: "操作", key: "2" }
|
||||
]
|
||||
this.setState({
|
||||
data_obj:new_obj
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
haveExpandIcon=(record, index)=>{
|
||||
//控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效
|
||||
if(index == 0){
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
render() {
|
||||
let sortObj = {
|
||||
mode:'multiple',
|
||||
backSource:true,
|
||||
sortFun:this.sortFun
|
||||
}
|
||||
return <ComplexTable columns={columns11} data={this.state.data} sort={sortObj}/>;
|
||||
return (
|
||||
<BigDataTable
|
||||
columns={outColumns}
|
||||
data={data16}
|
||||
onExpand={this.getData}
|
||||
expandedRowRender={this.expandedRowRender}
|
||||
scroll={{y:350}}
|
||||
// defaultExpandedRowKeys={[0,1]}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
Demo28.defaultProps = defaultProps;
|
||||
|
||||
|
||||
export default Demo28;
|
||||
export default Demo31;
|
||||
|
|
|
|||
|
|
@ -1,168 +1,89 @@
|
|||
/**
|
||||
*
|
||||
* @title 从弹出框内显示过滤行并且设置可选下拉条件
|
||||
* @description 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件
|
||||
*
|
||||
* @title 多功能表格滚动加载
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Tooltip,Checkbox,Icon,Popover} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import BigData from "../../src/lib/bigData";
|
||||
import multiSelect from '../../src/lib/multiSelect';
|
||||
import filterColumn from '../../src/lib/filterColumn';
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Modal,Button} from "tinper-bee";
|
||||
import Table from '../../src';
|
||||
let ComplexTable = filterColumn(multiSelect(BigData(Table), Checkbox), Popover, Icon);
|
||||
|
||||
const columns29 = [
|
||||
const columns = [
|
||||
{
|
||||
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:'序号',
|
||||
dataIndex:'index',
|
||||
width:'50',
|
||||
key:'index',
|
||||
render:(text,record,index)=>{
|
||||
return index
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "日期",
|
||||
width: 200,
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
filterType: "date",
|
||||
filterDropdown: "show",
|
||||
format: "YYYY-MM-DD"
|
||||
title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
|
||||
];
|
||||
|
||||
const 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: "无"
|
||||
const data = [ ...new Array(10000) ].map((e, i) => {
|
||||
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
|
||||
if(i%3==0){
|
||||
rs.b = '女';
|
||||
}
|
||||
];
|
||||
return rs;
|
||||
})
|
||||
|
||||
class Demo29 extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
class Demo32 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
show: false
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
this.close = this.close.bind(this);
|
||||
this.open = this.open.bind(this);
|
||||
}
|
||||
handlerFilterChange = (key, val, condition) => {
|
||||
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
|
||||
}
|
||||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
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}//是否开启过滤数据功能
|
||||
return (
|
||||
<ComplexTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
parentNodeId='parent'
|
||||
scroll={{y:300}}
|
||||
height={40}
|
||||
bordered
|
||||
columns={columns29}
|
||||
data={data29} />
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
<Button colors="primary" onClick={this.open}>显示表格</Button>
|
||||
</div>)
|
||||
onRowClick={(record, index, indent) => {
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}/>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo29;
|
||||
export default Demo32;
|
||||
|
|
|
|||
|
|
@ -1,120 +1,108 @@
|
|||
/**
|
||||
*
|
||||
* @title 表头分组并自定义表头高度
|
||||
* @description columns[n] 可以内嵌 children，以渲染分组表头。
|
||||
* 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
|
||||
*
|
||||
*/
|
||||
*
|
||||
* @title 列过滤
|
||||
* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import {Button} from "tinper-bee";
|
||||
|
||||
const { ColumnGroup, Column } = Table;
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox,Popover} from "tinper-bee";
|
||||
|
||||
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"
|
||||
}
|
||||
import Table from '../../src';
|
||||
import filterColumn from '../../src/lib/filterColumn';
|
||||
import sum from '../../src/lib/sum';
|
||||
|
||||
const data21 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行',e: "操作", key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠',e: "操作", key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠',e: "操作", key: "3" }
|
||||
];
|
||||
|
||||
const 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"
|
||||
});
|
||||
}
|
||||
const FilterColumnTable = filterColumn(Table, Popover, Icon);
|
||||
|
||||
class Demo3 extends Component {
|
||||
render() {
|
||||
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 (
|
||||
<Table
|
||||
className={'demo3'}
|
||||
columns={columns}
|
||||
data={data}
|
||||
headerHeight={40} //自定义表头高度
|
||||
bordered
|
||||
scroll={{ y: 240 }}
|
||||
/>
|
||||
<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
|
||||
});
|
||||
}
|
||||
|
||||
export default Demo3;
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return <FilterColumnTable columns={this.state.columns21} data={data21} afterFilter={this.afterFilter} showFilterPopover={this.state.showFilterPopover}/>;
|
||||
}
|
||||
}
|
||||
Demo21.defaultProps = defaultProps21;
|
||||
|
||||
|
||||
export default Demo21;
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
/**
|
||||
*
|
||||
* @title 大数据加载
|
||||
* @title 树状表滚动加载
|
||||
* 【Tooltip】
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Tooltip} from "tinper-bee";
|
||||
|
||||
import Table from "../../src";
|
||||
import BigData from "../../src/lib/bigData";
|
||||
const BigDataTable = BigData(Table);
|
||||
|
|
@ -14,7 +15,7 @@ const columns = [
|
|||
{
|
||||
title:'序号',
|
||||
dataIndex:'index',
|
||||
width:'50',
|
||||
width:'150',
|
||||
key:'index',
|
||||
render:(text,record,index)=>{
|
||||
return index
|
||||
|
|
@ -39,19 +40,27 @@ const columns = [
|
|||
},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
|
||||
|
||||
];
|
||||
|
||||
const data = [ ...new Array(10000) ].map((e, i) => {
|
||||
const data = [ ...new Array(1000) ].map((e, i) => {
|
||||
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
|
||||
if(i%3==0){
|
||||
rs.b = '女';
|
||||
rs.children = [];
|
||||
for(let subi=0;subi<3;subi++){
|
||||
rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});
|
||||
}
|
||||
}else{
|
||||
rs.children = [];
|
||||
for(let subi=0;subi<3;subi++){
|
||||
rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});
|
||||
}
|
||||
}
|
||||
return rs;
|
||||
})
|
||||
|
||||
|
||||
class Demo30 extends Component {
|
||||
class Demo34 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -60,12 +69,18 @@ class Demo30 extends Component {
|
|||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
|
||||
onExpandedRowsChange = (params)=>{
|
||||
console.log(params);
|
||||
}
|
||||
onExpand = (expandKeys)=>{
|
||||
console.log('expand---'+expandKeys);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<BigDataTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
parentNodeId='parent'
|
||||
scroll={{y:300}}
|
||||
height={40}
|
||||
onRowClick={(record, index, indent) => {
|
||||
|
|
@ -78,4 +93,4 @@ class Demo30 extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Demo30;
|
||||
export default Demo34;
|
||||
|
|
|
|||
|
|
@ -1,146 +1,108 @@
|
|||
/**
|
||||
*
|
||||
* @title 含有嵌套子表格的大数据场景
|
||||
* @description 通过expandedRowRender参数来实现子表格
|
||||
*
|
||||
* @title hover呼出操作栏
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Tooltip,Button} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import BigData from "../../src/lib/bigData";
|
||||
const BigDataTable = BigData(Table);
|
||||
const outColumns = [
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "用户名", dataIndex: "a", key: "a", width: 80, className: "rowClassName",
|
||||
fixed:'left',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
width: "60px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 300 },
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width:200,
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<div style={{ position: 'relative' }} title={text} >
|
||||
<a
|
||||
href="#"
|
||||
href="javascript:;"
|
||||
tooltip={text}
|
||||
onClick={() => {
|
||||
alert("这是第" + index + "列，内容为:" + text);
|
||||
alert('这是第' + index + '列，内容为:' + text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 250 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
|
||||
];
|
||||
const innerColumns = [
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width:200,
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
alert("这是第" + index + "列，内容为:" + text);
|
||||
}}
|
||||
>
|
||||
{'一些操作'+index}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
|
||||
];
|
||||
|
||||
const data16 = [ ...new Array(10000) ].map((e, i) => {
|
||||
return { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
|
||||
})
|
||||
const data = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, d: "操作", key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
||||
];
|
||||
|
||||
class Demo35 extends Component {
|
||||
|
||||
|
||||
|
||||
|
||||
class Demo31 extends Component {
|
||||
constructor(props){
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state={
|
||||
data_obj:{
|
||||
0:[
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
|
||||
],
|
||||
1: [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "菲菲", b: "nv", c: 67, d: "操作", key: "2" }
|
||||
],
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
expandedRowRender = (record, index, indent) => {
|
||||
let height = 200;
|
||||
let innderData = [ ...new Array(100) ].map((e, i) => {
|
||||
return { a: index+"-"+ i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: index+"-"+ i };
|
||||
})
|
||||
return (
|
||||
<Table
|
||||
|
||||
columns={innerColumns}
|
||||
scroll={{y:height}}
|
||||
data={innderData}
|
||||
|
||||
/>
|
||||
);
|
||||
};
|
||||
getData=(expanded, record)=>{
|
||||
//当点击展开的时候才去请求数据
|
||||
let new_obj = Object.assign({},this.state.data_obj);
|
||||
if(expanded){
|
||||
if(record.key==='1'){
|
||||
new_obj[record.key] = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
|
||||
]
|
||||
delFun=()=>{
|
||||
// console.log('click'+this.currentIndex);
|
||||
let {data} = this.state;
|
||||
data.splice(this.currentIndex,1);
|
||||
this.setState({
|
||||
data_obj:new_obj
|
||||
})
|
||||
}else{
|
||||
new_obj[record.key] = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "菲菲", b: "nv", c: 67, d: "操作", key: "2" }
|
||||
]
|
||||
this.setState({
|
||||
data_obj:new_obj
|
||||
})
|
||||
data
|
||||
});
|
||||
}
|
||||
onRowHover=(index,record)=>{
|
||||
this.currentIndex = index;
|
||||
this.currentRecord = record;
|
||||
}
|
||||
}
|
||||
haveExpandIcon=(record, index)=>{
|
||||
//控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效
|
||||
if(index == 0){
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
getHoverContent=()=>{
|
||||
return <div className="opt-btns"><Button size="sm" onClick={this.delFun}>删除</Button> </div>
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<BigDataTable
|
||||
columns={outColumns}
|
||||
data={data16}
|
||||
onExpand={this.getData}
|
||||
expandedRowRender={this.expandedRowRender}
|
||||
scroll={{y:350}}
|
||||
// defaultExpandedRowKeys={[0,1]}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
parentNodeId='parent'
|
||||
height={43}
|
||||
headerHeight={42}
|
||||
hoverContent={this.getHoverContent}
|
||||
onRowHover={this.onRowHover}
|
||||
onRowClick={(record, index, indent) => {
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo31;
|
||||
export default Demo35;
|
||||
|
|
|
|||
|
|
@ -1,90 +1,215 @@
|
|||
/**
|
||||
*
|
||||
* @title 大数据加载下的复杂Table
|
||||
*
|
||||
* @description
|
||||
* @title 多功能表格
|
||||
* @description 根据列进行过滤、拖拽交换列综合使用案例
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Tooltip,Checkbox,Icon,Popover} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import BigData from "../../src/lib/bigData";
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox,Popover} 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';
|
||||
|
||||
let ComplexTable = filterColumn(multiSelect(BigData(Table), Checkbox), Popover, Icon);
|
||||
|
||||
const columns = [
|
||||
//Cloumns1
|
||||
function getCloumns(){
|
||||
const column = [
|
||||
{
|
||||
title:'序号',
|
||||
dataIndex:'index',
|
||||
width:'50',
|
||||
key:'index',
|
||||
render:(text,record,index)=>{
|
||||
return index
|
||||
}
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 100,
|
||||
},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
|
||||
];
|
||||
{
|
||||
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,
|
||||
|
||||
const data = [ ...new Array(10000) ].map((e, i) => {
|
||||
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
|
||||
if(i%3==0){
|
||||
rs.b = '女';
|
||||
}
|
||||
return rs;
|
||||
})
|
||||
|
||||
|
||||
class Demo32 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
render() {
|
||||
},
|
||||
{
|
||||
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 (
|
||||
<ComplexTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
parentNodeId='parent'
|
||||
scroll={{y:300}}
|
||||
height={40}
|
||||
bordered
|
||||
onRowClick={(record, index, indent) => {
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
<div className='operation-btn'>
|
||||
<a href="#"
|
||||
tooltip={text}
|
||||
onClick={() => {
|
||||
alert('这是第'+index+'列，内容为:'+text);
|
||||
}}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}/>
|
||||
|
||||
);
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
];
|
||||
return column;
|
||||
}
|
||||
|
||||
export default Demo32;
|
||||
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;
|
||||
|
|
@ -0,0 +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;
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 树状结构的大数据场景
|
||||
* 【Tooltip】
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Tooltip} from "tinper-bee";
|
||||
|
||||
import Table from "../../src";
|
||||
import BigData from "../../src/lib/bigData";
|
||||
const BigDataTable = BigData(Table);
|
||||
const columns = [
|
||||
{
|
||||
title:'序号',
|
||||
dataIndex:'index',
|
||||
width:'150',
|
||||
key:'index',
|
||||
render:(text,record,index)=>{
|
||||
return index
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
|
||||
];
|
||||
|
||||
const data = [ ...new Array(1000) ].map((e, i) => {
|
||||
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
|
||||
if(i%3==0){
|
||||
rs.b = '女';
|
||||
rs.children = [];
|
||||
for(let subi=0;subi<3;subi++){
|
||||
rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});
|
||||
}
|
||||
}else{
|
||||
rs.children = [];
|
||||
for(let subi=0;subi<3;subi++){
|
||||
rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});
|
||||
}
|
||||
}
|
||||
return rs;
|
||||
})
|
||||
|
||||
|
||||
class Demo34 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
onExpandedRowsChange = (params)=>{
|
||||
console.log(params);
|
||||
}
|
||||
onExpand = (expandKeys)=>{
|
||||
console.log('expand---'+expandKeys);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<BigDataTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
parentNodeId='parent'
|
||||
scroll={{y:300}}
|
||||
height={40}
|
||||
onRowClick={(record, index, indent) => {
|
||||
console.log('currentIndex--'+index);
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo34;
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title hover呼出菜单栏
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Tooltip,Button} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "用户名", dataIndex: "a", key: "a", width: 80, className: "rowClassName",
|
||||
fixed:'left',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
width: "60px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 300 },
|
||||
{
|
||||
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 Demo35 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
|
||||
delFun=()=>{
|
||||
// console.log('click'+this.currentIndex);
|
||||
let {data} = this.state;
|
||||
data.splice(this.currentIndex,1);
|
||||
this.setState({
|
||||
data
|
||||
});
|
||||
}
|
||||
onRowHover=(index,record)=>{
|
||||
this.currentIndex = index;
|
||||
this.currentRecord = record;
|
||||
}
|
||||
getHoverContent=()=>{
|
||||
return <div className="opt-btns"><Button size="sm" onClick={this.delFun}>删除</Button> </div>
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
parentNodeId='parent'
|
||||
height={43}
|
||||
headerHeight={42}
|
||||
hoverContent={this.getHoverContent}
|
||||
onRowHover={this.onRowHover}
|
||||
onRowClick={(record, index, indent) => {
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo35;
|
||||
|
|
@ -1,131 +1,81 @@
|
|||
/**
|
||||
*
|
||||
* @title 树形数据展示
|
||||
* @description 通过在data中配置children数据，来自动生成树形数据
|
||||
* @title 固定表头
|
||||
* @description 当滚动纵向滚动条时，表头固定。还可以设置scroll来支持横向或纵向滚动
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import dragColumn from "../../src/lib/dragColumn";;
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
||||
|
||||
const columns4 = [
|
||||
const columns6 = [
|
||||
{
|
||||
title: "Name",
|
||||
title: "Full Name",
|
||||
width: 100,
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "40%"
|
||||
key: "name"
|
||||
},
|
||||
{
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
dataIndex: "address",
|
||||
key: "address"
|
||||
}
|
||||
{ title: "Age", width: 100, dataIndex: "age", key: "age"},
|
||||
{ title: "Address", dataIndex: "address", key: "1" }
|
||||
];
|
||||
|
||||
const data4 = [
|
||||
const data6 = [
|
||||
{
|
||||
key: 1,
|
||||
name: "John Brown sr.",
|
||||
age: 60,
|
||||
address: "New York No. 1 Lake Park",
|
||||
children: [
|
||||
{
|
||||
key: 11,
|
||||
key: "1",
|
||||
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"
|
||||
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 Demo4 extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data4,
|
||||
factoryValue: 0,
|
||||
selectedRow: new Array(data4.length)//状态同步
|
||||
}
|
||||
}
|
||||
|
||||
class Demo6 extends Component {
|
||||
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} />;
|
||||
return <DragColumnTable columns={columns6} data={data6} scroll={{y: 150 }} dragborder={true} />;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default Demo4;
|
||||
export default Demo6;
|
||||
|
|
@ -1,81 +1,66 @@
|
|||
/**
|
||||
*
|
||||
* @title 固定表头
|
||||
* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)
|
||||
* @title 列排序
|
||||
* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
import Table from '../../src';
|
||||
import dragColumn from "../../src/lib/dragColumn";;
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
import sort from "../../src/lib/sort.js";
|
||||
|
||||
const columns6 = [
|
||||
let ComplexTable = sort(Table, Icon);
|
||||
const columns11 = [
|
||||
{
|
||||
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"
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
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"
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo6 extends Component {
|
||||
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 <DragColumnTable columns={columns6} data={data6} scroll={{y: 150 }} dragborder={true} />;
|
||||
|
||||
return <ComplexTable columns={columns11} data={this.state.data} />;
|
||||
}
|
||||
}
|
||||
Demo11.defaultProps = defaultProps11;
|
||||
|
||||
export default Demo6;
|
||||
|
||||
export default Demo11;
|
||||
|
|
@ -1,85 +1,82 @@
|
|||
/**
|
||||
*
|
||||
* @title 主子表
|
||||
* @description 主表点击子表联动
|
||||
*
|
||||
*/
|
||||
* @title 后端列排序
|
||||
*
|
||||
*/
|
||||
|
||||
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" },
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
import Table from '../../src';
|
||||
import sort from "../../src/lib/sort.js";
|
||||
let ComplexTable = sort(Table, Icon);
|
||||
|
||||
const columns11 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "分数",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
];
|
||||
|
||||
const 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 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 columns7_1 = [
|
||||
{ title: "姓名", dataIndex: "a", key: "a" },
|
||||
{ title: "班级", dataIndex: "b", key: "b" },
|
||||
{ title: "系别", dataIndex: "c", key: "c" }
|
||||
];
|
||||
|
||||
class Demo7 extends Component {
|
||||
const defaultProps = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
class Demo28 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
children_data: []
|
||||
sortOrder: "",
|
||||
data: data11
|
||||
};
|
||||
}
|
||||
|
||||
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" }]
|
||||
});
|
||||
/**
|
||||
* 后端获取数据
|
||||
*/
|
||||
sortFun = (sortParam)=>{
|
||||
console.info(sortParam);
|
||||
//将参数传递给后端排序
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
let sortObj = {
|
||||
mode:'multiple',
|
||||
backSource:true,
|
||||
sortFun:this.sortFun
|
||||
}
|
||||
return <ComplexTable columns={columns11} data={this.state.data} sort={sortObj}/>;
|
||||
}
|
||||
}
|
||||
Demo28.defaultProps = defaultProps;
|
||||
|
||||
export default Demo7;
|
||||
|
||||
export default Demo28;
|
||||
|
|
@ -1,73 +1,133 @@
|
|||
/**
|
||||
*
|
||||
* @title 表格+分页
|
||||
* @description 点击分页联动表格
|
||||
*/
|
||||
*
|
||||
* @title 嵌套子表格
|
||||
* @description 通过expandedRowRender参数来实现子表格
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Pagination} from "tinper-bee";
|
||||
|
||||
import Table from "../../src";
|
||||
|
||||
const columns8 = [
|
||||
{ title: "姓名", dataIndex: "a", key: "a", width: 100 },
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
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: "武功级别",
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "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 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" }
|
||||
]
|
||||
};
|
||||
const data16 = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
||||
];
|
||||
|
||||
class Demo8 extends Component {
|
||||
constructor(props) {
|
||||
|
||||
class Demo16 extends Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: pageData[1],
|
||||
activePage: 1
|
||||
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]}
|
||||
|
||||
/>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
handleSelect(eventKey) {
|
||||
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: pageData[eventKey],
|
||||
activePage: eventKey
|
||||
});
|
||||
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 (
|
||||
<div className="demo8">
|
||||
<Table columns={columns8} data={this.state.data} />
|
||||
<Pagination
|
||||
first
|
||||
last
|
||||
prev
|
||||
next
|
||||
maxButtons={5}
|
||||
boundaryLinks
|
||||
activePage={this.state.activePage}
|
||||
onSelect={this.handleSelect.bind(this)}
|
||||
onDataNumSelect={this.dataNumSelect}
|
||||
showJump={true}
|
||||
total={100}
|
||||
dataNum={2}
|
||||
<DragColumnTable
|
||||
columns={columns16}
|
||||
data={data16}
|
||||
onExpand={this.getData}
|
||||
expandedRowRender={this.expandedRowRender}
|
||||
scroll={{x:true}}
|
||||
dragborder={true}
|
||||
draggable={true}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Demo8;
|
||||
|
||||
export default Demo16;
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
.demo8{
|
||||
.u-table {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
.u-pagination{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,161 +1,131 @@
|
|||
/**
|
||||
*
|
||||
* @title 表格+搜索
|
||||
* @description 搜索刷新表格数据
|
||||
*
|
||||
*
|
||||
* import {Table} from 'tinper-bee';
|
||||
*/
|
||||
*
|
||||
* @title 树形表格
|
||||
* @description 通过在data中配置children数据，来自动生成树形表格
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Icon,FormControl,InputGroup} from "tinper-bee";
|
||||
|
||||
import Table from "../../src";
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
class Search extends Component {
|
||||
state = {
|
||||
searchValue: "",
|
||||
empty: false
|
||||
};
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
*/
|
||||
handleSearch = () => {
|
||||
let { onSearch } = this.props;
|
||||
this.setState({
|
||||
empty: true
|
||||
});
|
||||
onSearch && onSearch(this.state.searchValue);
|
||||
};
|
||||
|
||||
/**
|
||||
* 捕获回车
|
||||
* @param e
|
||||
*/
|
||||
handleKeyDown = e => {
|
||||
if (e.keyCode === 13) {
|
||||
this.handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 输入框改变
|
||||
* @param e
|
||||
*/
|
||||
handleChange = (e) => {
|
||||
this.setState({
|
||||
searchValue: e
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 清空输入框
|
||||
*/
|
||||
emptySearch = () => {
|
||||
let { onEmpty } = this.props;
|
||||
this.setState({
|
||||
searchValue: "",
|
||||
empty: false
|
||||
});
|
||||
onEmpty && onEmpty();
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<InputGroup simple className="search-component">
|
||||
<FormControl
|
||||
onChange={this.handleChange}
|
||||
value={this.state.searchValue}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
placeholder="请输入用户名"
|
||||
type="text"
|
||||
/>
|
||||
{this.state.empty ? (
|
||||
<Icon
|
||||
type="uf-close-c"
|
||||
onClick={this.emptySearch}
|
||||
className="empty-search"
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<InputGroup.Button onClick={this.handleSearch} shape="border">
|
||||
<Icon type="uf-search" />
|
||||
</InputGroup.Button>
|
||||
</InputGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const columns9 = [
|
||||
const columns4 = [
|
||||
{
|
||||
title: "姓名",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "40%"
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
title: "Address",
|
||||
dataIndex: "address",
|
||||
key: "address"
|
||||
}
|
||||
];
|
||||
|
||||
const userData = [
|
||||
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
|
||||
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 {
|
||||
|
||||
class Demo9 extends Component {
|
||||
constructor(props) {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: userData
|
||||
};
|
||||
data: data4,
|
||||
factoryValue: 0,
|
||||
selectedRow: new Array(data4.length)//状态同步
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
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 Demo9;
|
||||
|
||||
export default Demo4;
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -714,15 +714,6 @@ th:hover .uf {
|
|||
padding-top: 0px;
|
||||
padding-bottom: 0px; }
|
||||
|
||||
|
||||
.opt-btns .u-button {
|
||||
background-color: #505F79;
|
||||
border-color: #505F79;
|
||||
color: #fff; }
|
||||
.opt-btns .u-button:hover, .opt-btns .u-button:active {
|
||||
background-color: #344563;
|
||||
border-color: #344563; }
|
||||
|
||||
.demo8 .u-table {
|
||||
margin-bottom: 11px; }
|
||||
|
||||
|
|
@ -734,4 +725,13 @@ th:hover .uf {
|
|||
-ms-flex-pack: center;
|
||||
justify-content: center; }
|
||||
|
||||
|
||||
.opt-btns .u-button {
|
||||
background-color: #505F79;
|
||||
border-color: #505F79;
|
||||
color: #fff; }
|
||||
.opt-btns .u-button:hover, .opt-btns .u-button:active {
|
||||
background-color: #344563;
|
||||
border-color: #344563; }
|
||||
|
||||
/*# sourceMappingURL=demo.css.map */
|
||||
|
|
|
|||
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