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

feat: 新增组件示例

This commit is contained in:
huyueb 2017-08-30 11:18:38 +08:00
parent 4d7e969ec7
commit 69e0751360
12 changed files with 1131 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
demo/TableDemo.scss
View File

@ -6,6 +6,7 @@
@import "../src/Table.scss";
@import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
@import "../node_modules/bee-form-control/src/FormControl.scss";
@import "../node_modules/bee-pagination/src/Pagination.scss";
.editable-cell {
position: relative;
@ -43,9 +44,35 @@
.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
color:#2db7f5;
color: #2db7f5;
}
.editable-add-btn {
margin-bottom: 8px;
}
.search-component {
margin-bottom: 20px;
.empty-search {
position: absolute;
right: 45px;
z-index: 20;
top: 5px;
color: #524e4e;
cursor: pointer;
}
&.u-input-group.simple {
float: right;
}
&.u-input-group.simple .u-form-control {
width: 251px;
background: #f5f5f5;
border-color: #f5f5f5;
border-radius: 20px;
}
&.u-input-group.simple .u-input-group-btn {
top: 3px;
right: 20px;
position: absolute;
}
}

39
demo/demolist/Demo10.js Normal file
View File

@ -0,0 +1,39 @@
/**
*
* @title 无数据时显示
* @description 无数据时显示效果展示
*
*/
const columns10 = [
{
title: "Name",
dataIndex: "name",
key: "name",
width: "40%"
},
{
title: "Age",
dataIndex: "age",
key: "age",
width: "30%"
},
{
title: "Address",
dataIndex: "address",
key: "address"
}
];
const data10 = [
];
const emptyFunc = () => <span>这里没有数据！</span>
class Demo10 extends Component {
render() {
return <Table columns={columns10} data={data10} emptyText={emptyFunc} />;
}
}

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

@ -0,0 +1,96 @@
/**
*
* @title 树形数据展示
* @description 手写表格的头组件来达到更灵活的配置表格
*
*/
const columns4 = [
{
title: "Name",
dataIndex: "name",
key: "name",
width: "40%"
},
{
title: "Age",
dataIndex: "age",
key: "age",
width: "30%"
},
{
title: "Address",
dataIndex: "address",
key: "address"
}
];
const data4 = [
{
key: 1,
name: "John Brown sr.",
age: 60,
address: "New York No. 1 Lake Park",
children: [
{
key: 11,
name: "John Brown",
age: 42,
address: "New York No. 2 Lake Park"
},
{
key: 12,
name: "John Brown jr.",
age: 30,
address: "New York No. 3 Lake Park",
children: [
{
key: 121,
name: "Jimmy Brown",
age: 16,
address: "New York No. 3 Lake Park"
}
]
},
{
key: 13,
name: "Jim Green sr.",
age: 72,
address: "London No. 1 Lake Park",
children: [
{
key: 131,
name: "Jim Green",
age: 42,
address: "London No. 2 Lake Park",
children: [
{
key: 1311,
name: "Jim Green jr.",
age: 25,
address: "London No. 3 Lake Park"
},
{
key: 1312,
name: "Jimmy Green sr.",
age: 18,
address: "London No. 4 Lake Park"
}
]
}
]
}
]
},
{
key: 2,
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park"
}
];
class Demo4 extends Component {
render() {
return <Table columns={columns4} data={data4} />;
}
}

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

@ -0,0 +1,58 @@
/**
*
* @title 固定列
* @description 固定列到表格的某侧
*
*/
const columns5 = [
{
title: "Full Name",
width: 100,
dataIndex: "name",
key: "name",
fixed: "left"
},
{ title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
{ title: "Column 1", dataIndex: "address", key: "1" },
{ title: "Column 2", dataIndex: "address", key: "2" },
{ title: "Column 3", dataIndex: "address", key: "3" },
{ title: "Column 4", dataIndex: "address", key: "4" },
{ title: "Column 5", dataIndex: "address", key: "5" },
{ title: "Column 6", dataIndex: "address", key: "6" },
{ title: "Column 7", dataIndex: "address", key: "7" },
{ title: "Column 8", dataIndex: "address", key: "8" }
];
const data5 = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York Park"
},
{
key: "2",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "3",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "4",
name: "Jim Green",
age: 40,
address: "London Park"
}
];
class Demo5 extends Component {
render() {
return <Table columns={columns5} data={data5} scroll={{ x: 1500 }} />;
}
}

80
demo/demolist/Demo6.js Normal file
View File

@ -0,0 +1,80 @@
/**
*
* @title 固定表头
* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。
*
*/
const columns6 = [
{
title: "Full Name",
width: 100,
dataIndex: "name",
key: "name"
},
{ title: "Age", width: 100, dataIndex: "age", key: "age"},
{ title: "Column 1", dataIndex: "address", key: "1" },
{ title: "Column 2", dataIndex: "address", key: "2" },
{ title: "Column 3", dataIndex: "address", key: "3" },
{ title: "Column 4", dataIndex: "address", key: "4" },
{ title: "Column 5", dataIndex: "address", key: "5" },
{ title: "Column 6", dataIndex: "address", key: "6" },
{ title: "Column 7", dataIndex: "address", key: "7" },
{ title: "Column 8", dataIndex: "address", key: "8" }
];
const data6 = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York Park"
},
{
key: "2",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "3",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "4",
name: "Jim Green",
age: 40,
address: "London Park"
},{
key: "11",
name: "John Brown",
age: 32,
address: "New York Park"
},
{
key: "12",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "13",
name: "Jim Green",
age: 40,
address: "London Park"
},
{
key: "14",
name: "Jim Green",
age: 40,
address: "London Park"
}
];
class Demo6 extends Component {
render() {
return <Table columns={columns6} data={data6} scroll={{ y: 150 }} />;
}
}

81
demo/demolist/Demo7.js Normal file
View File

@ -0,0 +1,81 @@
/**
*
* @title 主子表
* @description 主表点击子表联动
*
*/
const columns7 = [
{ title: "用户名", dataIndex: "a", key: "a"},
{ id: "123", title: "性别", dataIndex: "b", key: "b"},
{ title: "年龄", dataIndex: "c", key: "c"},
{
title: "操作",
dataIndex: "",
key: "d",
render() {
return <a href="#">一些操作</a>;
}
}
];
const data7 = [
{ a: "令狐冲", b: "男", c: 41, key: "1" },
{ a: "杨过", b: "男", c: 67, key: "2" },
{ a: "郭靖", b: "男", c: 25, key: "3" }
];
const columns7_1 = [
{ title: "用户名", dataIndex: "a", key: "a"},
{ id: "123", title: "班级", dataIndex: "b", key: "b"},
{ title: "系别", dataIndex: "c", key: "c"}
];
class Demo7 extends Component {
constructor(props){
super(props);
this.state = {
children_data : []
}
}
rowclick = (record, index) => {
console.log(record)
console.log(index)
if(record.a === '令狐冲'){
this.setState({
children_data: [
{ a: "令狐冲", b: "01班", c: '文学系', key: "1" },
]
})
}else if(record.a === '杨过'){
this.setState({
children_data: [
{ a: "杨过", b: "01班", c: '外语系', key: "2" },
]
})
}else if(record.a === '郭靖'){
this.setState({
children_data: [
{ a: "郭靖", b: "02班", c: '美术系', key: "3" }
]
})
}
}
render() {
return (
<div>
<Table
columns={columns7_1}
data={data7}
onRowClick={this.rowclick}
title={currentData => <div>标题: 我是主表</div>}
/>
<Table
columns={columns7}
data={this.state.children_data}
title={currentData => <div>标题: 我是子表</div>}
/>
</div>
);
}
}

70
demo/demolist/Demo8.js Normal file
View File

@ -0,0 +1,70 @@
/**
*
* @title 表格+分页
* @description 点击分页联动表格
*
*/
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: "",
key: "d",
render() {
return <a href="#">一些操作</a>;
}
}
];
class Demo8 extends Component {
constructor(props) {
super(props);
this.state = {
data8: [
{ a: "令狐冲", b: "男", c: 41, key: "1" },
{ a: "杨过", b: "男", c: 67, key: "2" },
{ a: "郭靖", b: "男", c: 25, key: "3" }
],
activePage: 1
};
}
handleSelect(eventKey) {
if(eventKey === 1){
this.setState({
data8: [
{ a: "令狐冲", b: "男", c: 41, key: "1" },
{ a: "杨过", b: "男", c: 67, key: "2" },
{ a: "郭靖", b: "男", c: 25, key: "3" }
],
activePage: eventKey
});
}else{
this.setState({
data8: [
{ a: "芙蓉姐姐", b: "女", c: 23, key: "1" }
],
activePage: eventKey
});
}
}
render() {
return (
<div>
<Table columns={columns8} data={this.state.data8} />
<Pagination
first
last
prev
next
boundaryLinks
items={2}
maxButtons={5}
activePage={this.state.activePage}
onSelect={this.handleSelect.bind(this)} />
</div>
);
}
}

123
demo/demolist/Demo9.js Normal file
View File

@ -0,0 +1,123 @@
/**
*
* @title 表格+搜索
* @description 搜索刷新表格数据
*
*/
class Search extends Component {
state = {
searchValue: "",
empty: false
};
/**
* 搜索
*/
handleSearch = () => {
let { onSearch,handleToChange } = this.props;
handleToChange && handleToChange();
onSearch && onSearch(this.state.searchValue);
};
/**
* 捕获回车
* @param e
*/
handleKeyDown = e => {
if (e.keyCode === 13) {
this.handleSearch();
}
};
/**
* 输入框改变
* @param e
*/
handleChange = e => {
this.setState({
searchValue: e.target.value
});
};
/**
* 清空输入框
*/
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}
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>
);
}
}
export default Search;
const columns9 = [
{ 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: "",
key: "d",
render() {
return <a href="#">一些操作</a>;
}
}
];
class Demo9 extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{ a: "令狐冲", b: "男", c: 41, key: "1" },
{ a: "杨过", b: "男", c: 67, key: "2" },
{ a: "郭靖", b: "男", c: 25, key: "3" }
]
};
}
handleSearchToTable=()=>{
this.setState({
data: [
{ a: "令狐冲", b: "男", c: 41, key: "1" }
]
})
}
render() {
return (
<div>
<div className="clearfix">
<Search handleToChange={this.handleSearchToTable}/>
</div>
<Table columns={columns9} data={this.state.data} />
</div>
);
}
}

3
demo/index-demo-base.js
View File

@ -6,7 +6,10 @@ import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Table from '../src';
import Animate from 'bee-animate';
import Pagination from "bee-pagination";
import Icon from "bee-icon";
import InputGroup from 'bee-input-group';
import FormControl from 'bee-form-control';
import Input from 'bee-form-control';
import Popconfirm from 'bee-popconfirm';

551
demo/index.js
View File

File diff suppressed because one or more lines are too long

4
package.json
View File

@ -42,9 +42,11 @@
"devDependencies": {
"bee-animate": "latest",
"bee-button": "latest",
"bee-form-control": "^0.1.7",
"bee-form-control": "^0.1.8",
"bee-icon": "0.0.5",
"bee-input-group": "^0.1.12",
"bee-layout": "latest",
"bee-pagination": "^0.1.7",
"bee-panel": "latest",
"bee-popconfirm": "^0.2.2",
"bee-tools": "^0.2.1",

1
src/Table.js
View File

@ -706,7 +706,6 @@ class Table extends Component{
const isTableScroll = this.columnManager.isAnyColumnsFixed() ||
props.scroll.x ||
props.scroll.y;
return (
<div className={className} style={props.style}>
{this.getTitle()}