From 69e07513604ad2495ce04b56b3c39aa2973fe0ae Mon Sep 17 00:00:00 2001 From: huyueb <1062887235@qq.com> Date: Wed, 30 Aug 2017 11:18:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/TableDemo.scss | 29 ++- demo/demolist/Demo10.js | 39 +++ demo/demolist/Demo4.js | 96 +++++++ demo/demolist/Demo5.js | 58 +++++ demo/demolist/Demo6.js | 80 ++++++ demo/demolist/Demo7.js | 81 ++++++ demo/demolist/Demo8.js | 70 +++++ demo/demolist/Demo9.js | 123 +++++++++ demo/index-demo-base.js | 3 + demo/index.js | 551 +++++++++++++++++++++++++++++++++++++++- package.json | 4 +- src/Table.js | 1 - 12 files changed, 1131 insertions(+), 4 deletions(-) create mode 100644 demo/demolist/Demo10.js create mode 100644 demo/demolist/Demo4.js create mode 100644 demo/demolist/Demo5.js create mode 100644 demo/demolist/Demo6.js create mode 100644 demo/demolist/Demo7.js create mode 100644 demo/demolist/Demo8.js create mode 100644 demo/demolist/Demo9.js diff --git a/demo/TableDemo.scss b/demo/TableDemo.scss index db8cd2f..8407021 100644 --- a/demo/TableDemo.scss +++ b/demo/TableDemo.scss @@ -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; + } +} diff --git a/demo/demolist/Demo10.js b/demo/demolist/Demo10.js new file mode 100644 index 0000000..74c3837 --- /dev/null +++ b/demo/demolist/Demo10.js @@ -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 = () => 这里没有数据！ + + class Demo10 extends Component { + render() { + return ; + } + } + \ No newline at end of file diff --git a/demo/demolist/Demo4.js b/demo/demolist/Demo4.js new file mode 100644 index 0000000..9964764 --- /dev/null +++ b/demo/demolist/Demo4.js @@ -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
; + } +} diff --git a/demo/demolist/Demo5.js b/demo/demolist/Demo5.js new file mode 100644 index 0000000..0a6a4fb --- /dev/null +++ b/demo/demolist/Demo5.js @@ -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
; + } +} diff --git a/demo/demolist/Demo6.js b/demo/demolist/Demo6.js new file mode 100644 index 0000000..68477ef --- /dev/null +++ b/demo/demolist/Demo6.js @@ -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
; + } +} diff --git a/demo/demolist/Demo7.js b/demo/demolist/Demo7.js new file mode 100644 index 0000000..3ee5c3f --- /dev/null +++ b/demo/demolist/Demo7.js @@ -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 一些操作; + } + } +]; + +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 ( +
+
标题: 我是主表
} + /> +
标题: 我是子表
} + /> + + ); + } +} diff --git a/demo/demolist/Demo8.js b/demo/demolist/Demo8.js new file mode 100644 index 0000000..a000125 --- /dev/null +++ b/demo/demolist/Demo8.js @@ -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 一些操作; + } + } +]; + +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 ( +
+
+ + + ); + } +} diff --git a/demo/demolist/Demo9.js b/demo/demolist/Demo9.js new file mode 100644 index 0000000..acef30b --- /dev/null +++ b/demo/demolist/Demo9.js @@ -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 ( + + + {this.state.empty + ? + : null} + + + + + + ); + } +} + +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 一些操作; + } + } +]; + +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 ( +
+
+ +
+
+ + ); + } +} diff --git a/demo/index-demo-base.js b/demo/index-demo-base.js index 06a1a0b..dd12b32 100644 --- a/demo/index-demo-base.js +++ b/demo/index-demo-base.js @@ -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'; diff --git a/demo/index.js b/demo/index.js index e3778c4..fc6e757 100644 --- a/demo/index.js +++ b/demo/index.js @@ -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'; @@ -53,6 +56,44 @@ class Demo1 extends Component { } /** * +* @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 = () => 这里没有数据！ + + class Demo10 extends Component { + render() { + return
; + } + } + /** +* * @title 增删改表格 * @description 这是带有增删改功能的表格 * @@ -274,7 +315,515 @@ class Demo3 extends Component { ) } } -var DemoArray = [{"example":,"title":" 简单表格","code":"/**\n*\n* @title 简单表格\n* @description\n*\n*/\n\nconst columns = [\n { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },\n { id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },\n { title: '年龄', dataIndex: 'c', key: 'c', width: 200 },\n {\n title: '操作', dataIndex: '', key: 'd', render() {\n return 一些操作;\n },\n },\n];\n\nconst data = [\n { a: '令狐冲', b: '男', c: 41, key: '1' },\n { a: '杨过', b: '男', c: 67, key: '2' },\n { a: '郭靖', b: '男', c: 25, key: '3' },\n];\n\nclass Demo1 extends Component {\n render () {\n return (\n
标题: 这是一个标题
}\n footer={currentData =>
表尾: 我是小尾巴
}\n />\n )\n }\n}\n","desc":""},{"example":,"title":" 增删改表格","code":"/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格\n*\n*/\n\nclass EditableCell extends React.Component {\n state = {\n value: this.props.value,\n editable: false,\n }\n handleChange = (e) => {\n const value = e.target.value;\n this.setState({ value });\n }\n check = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n }\n edit = () => {\n this.setState({ editable: true });\n }\n handleKeydown = (event) => {\n console.log(event.keyCode);\n if(event.keyCode == 13){\n this.check();\n }\n\n }\n render() {\n const { value, editable } = this.state;\n return (
\n {\n editable ?\n
\n \n \n
\n :\n
\n {value || ' '}\n \n
\n }\n
);\n }\n}\n\nclass Demo2 extends React.Component {\n constructor(props) {\n super(props);\n this.columns = [{\n title: '姓名',\n dataIndex: 'name',\n key:'name',\n width: '30%',\n render: (text, record, index) => (\n \n ),\n }, {\n title: '年龄',\n dataIndex: 'age',\n key:'age',\n }, {\n title: '你懂的',\n dataIndex: 'address',\n key:'address',\n }, {\n title: '操作',\n dataIndex: 'operation',\n key: 'operation',\n render: (text, record, index) => {\n return (\n this.state.dataSource.length > 1 ?\n (\n \n \n \n ) : null\n );\n },\n }];\n\n this.state = {\n dataSource: [{\n key: '0',\n name: '沉鱼',\n age: '18',\n address: '96, 77, 89',\n }, {\n key: '1',\n name: '落雁',\n age: '16',\n address: '90, 70, 80',\n }, {\n key: '2',\n name: '闭月',\n age: '17',\n address: '80, 60, 80',\n }, {\n key: '3',\n name: '羞花',\n age: '20',\n address: '120, 60, 90',\n }],\n count: 4,\n };\n }\n onCellChange = (index, key) => {\n return (value) => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n }\n onDelete = (index) => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n }\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: `100 100 100`,\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1,\n });\n }\n\n getBodyWrapper = (body) => {\n return (\n \n {body.props.children}\n \n );\n }\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (
\n \n
\n );\n }\n}\n","desc":" 这是带有增删改功能的表格"},{"example":,"title":" 更灵活的表格","code":"/**\n*\n* @title 更灵活的表格\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\nconst { ColumnGroup, Column } = Table;\n\nconst data3 = [\n { a: '北京', b: '北京', c: '250', d: 2, key: '1' },\n];\n\nclass Demo3 extends Component {\n render () {\n return (\n\n
\n \n \n \n \n \n {\n return (\n \n );\n }}\n />\n
\n )\n }\n}\n","desc":" 手写表格的头组件来达到更灵活的配置表格"}] +/** +* +* @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 ; + } +} +/** +* +* @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
; + } +} +/** +* +* @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
; + } +} +/** +* +* @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 一些操作; + } + } +]; + +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 ( +
+
标题: 我是主表
} + /> +
标题: 我是子表
} + /> + + ); + } +} +/** +* +* @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 一些操作; + } + } +]; + +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 ( +
+
+ + + ); + } +} +/** +* +* @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 ( + + + {this.state.empty + ? + : null} + + + + + + ); + } +} + +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 一些操作; + } + } +]; + +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 ( +
+
+ +
+
+ + ); + } +} +var DemoArray = [{"example":,"title":" 简单表格","code":"/**\n*\n* @title 简单表格\n* @description\n*\n*/\n\nconst columns = [\n { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },\n { id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },\n { title: '年龄', dataIndex: 'c', key: 'c', width: 200 },\n {\n title: '操作', dataIndex: '', key: 'd', render() {\n return 一些操作;\n },\n },\n];\n\nconst data = [\n { a: '令狐冲', b: '男', c: 41, key: '1' },\n { a: '杨过', b: '男', c: 67, key: '2' },\n { a: '郭靖', b: '男', c: 25, key: '3' },\n];\n\nclass Demo1 extends Component {\n render () {\n return (\n
标题: 这是一个标题
}\n footer={currentData =>
表尾: 我是小尾巴
}\n />\n )\n }\n}\n","desc":""},{"example":,"title":" 无数据时显示","code":"/**\n*\n* @title 无数据时显示\n* @description 无数据时显示效果展示\n*\n*/\n\nconst columns10 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n ];\n \n const data10 = [\n \n ];\n\n const emptyFunc = () => 这里没有数据！\n \n class Demo10 extends Component {\n render() {\n return
;\n }\n }\n ","desc":" 无数据时显示效果展示"},{"example":,"title":" 增删改表格","code":"/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格\n*\n*/\n\nclass EditableCell extends React.Component {\n state = {\n value: this.props.value,\n editable: false,\n }\n handleChange = (e) => {\n const value = e.target.value;\n this.setState({ value });\n }\n check = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n }\n edit = () => {\n this.setState({ editable: true });\n }\n handleKeydown = (event) => {\n console.log(event.keyCode);\n if(event.keyCode == 13){\n this.check();\n }\n\n }\n render() {\n const { value, editable } = this.state;\n return (
\n {\n editable ?\n
\n \n \n
\n :\n
\n {value || ' '}\n \n
\n }\n
);\n }\n}\n\nclass Demo2 extends React.Component {\n constructor(props) {\n super(props);\n this.columns = [{\n title: '姓名',\n dataIndex: 'name',\n key:'name',\n width: '30%',\n render: (text, record, index) => (\n \n ),\n }, {\n title: '年龄',\n dataIndex: 'age',\n key:'age',\n }, {\n title: '你懂的',\n dataIndex: 'address',\n key:'address',\n }, {\n title: '操作',\n dataIndex: 'operation',\n key: 'operation',\n render: (text, record, index) => {\n return (\n this.state.dataSource.length > 1 ?\n (\n \n \n \n ) : null\n );\n },\n }];\n\n this.state = {\n dataSource: [{\n key: '0',\n name: '沉鱼',\n age: '18',\n address: '96, 77, 89',\n }, {\n key: '1',\n name: '落雁',\n age: '16',\n address: '90, 70, 80',\n }, {\n key: '2',\n name: '闭月',\n age: '17',\n address: '80, 60, 80',\n }, {\n key: '3',\n name: '羞花',\n age: '20',\n address: '120, 60, 90',\n }],\n count: 4,\n };\n }\n onCellChange = (index, key) => {\n return (value) => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n }\n onDelete = (index) => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n }\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: `100 100 100`,\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1,\n });\n }\n\n getBodyWrapper = (body) => {\n return (\n \n {body.props.children}\n \n );\n }\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (
\n \n
\n );\n }\n}\n","desc":" 这是带有增删改功能的表格"},{"example":,"title":" 更灵活的表格","code":"/**\n*\n* @title 更灵活的表格\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\nconst { ColumnGroup, Column } = Table;\n\nconst data3 = [\n { a: '北京', b: '北京', c: '250', d: 2, key: '1' },\n];\n\nclass Demo3 extends Component {\n render () {\n return (\n\n
\n \n \n \n \n \n {\n return (\n \n );\n }}\n />\n
\n )\n }\n}\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 树形数据展示","code":"/**\n*\n* @title 树形数据展示\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\nconst columns4 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"John Brown sr.\",\n age: 60,\n address: \"New York No. 1 Lake Park\",\n children: [\n {\n key: 11,\n name: \"John Brown\",\n age: 42,\n address: \"New York No. 2 Lake Park\"\n },\n {\n key: 12,\n name: \"John Brown jr.\",\n age: 30,\n address: \"New York No. 3 Lake Park\",\n children: [\n {\n key: 121,\n name: \"Jimmy Brown\",\n age: 16,\n address: \"New York No. 3 Lake Park\"\n }\n ]\n },\n {\n key: 13,\n name: \"Jim Green sr.\",\n age: 72,\n address: \"London No. 1 Lake Park\",\n children: [\n {\n key: 131,\n name: \"Jim Green\",\n age: 42,\n address: \"London No. 2 Lake Park\",\n children: [\n {\n key: 1311,\n name: \"Jim Green jr.\",\n age: 25,\n address: \"London No. 3 Lake Park\"\n },\n {\n key: 1312,\n name: \"Jimmy Green sr.\",\n age: 18,\n address: \"London No. 4 Lake Park\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"Joe Black\",\n age: 32,\n address: \"Sidney No. 1 Lake Park\"\n }\n];\nclass Demo4 extends Component {\n render() {\n return ;\n }\n}\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 固定列","code":"/**\n*\n* @title 固定列\n* @description 固定列到表格的某侧\n*\n*/\n\nconst columns5 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\",\n fixed: \"left\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\n { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\n { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n];\n\nconst data5 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo5 extends Component {\n render() {\n return
;\n }\n}\n","desc":" 固定列到表格的某侧"},{"example":,"title":" 固定表头","code":"/**\n*\n* @title 固定表头\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。\n*\n*/\n\nconst columns6 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\n { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\n { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n];\n\nconst data6 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo6 extends Component {\n render() {\n return
;\n }\n}\n","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。"},{"example":,"title":" 主子表","code":"/**\n*\n* @title 主子表\n* @description 主表点击子表联动\n*\n*/\n\nconst columns7 = [\n { title: \"用户名\", dataIndex: \"a\", key: \"a\"},\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\"},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\"},\n {\n title: \"操作\",\n dataIndex: \"\",\n key: \"d\",\n render() {\n return 一些操作;\n }\n }\n];\n\nconst data7 = [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nconst columns7_1 = [\n { title: \"用户名\", dataIndex: \"a\", key: \"a\"},\n { id: \"123\", title: \"班级\", dataIndex: \"b\", key: \"b\"},\n { title: \"系别\", dataIndex: \"c\", key: \"c\"}\n];\n\nclass Demo7 extends Component {\n constructor(props){\n super(props);\n this.state = {\n children_data : []\n }\n }\n rowclick = (record, index) => {\n console.log(record)\n console.log(index)\n if(record.a === '令狐冲'){\n this.setState({\n children_data: [\n { a: \"令狐冲\", b: \"01班\", c: '文学系', key: \"1\" },\n ]\n })\n }else if(record.a === '杨过'){\n this.setState({\n children_data: [\n { a: \"杨过\", b: \"01班\", c: '外语系', key: \"2\" },\n ]\n })\n }else if(record.a === '郭靖'){\n this.setState({\n children_data: [\n { a: \"郭靖\", b: \"02班\", c: '美术系', key: \"3\" }\n ]\n })\n }\n }\n render() {\n return (\n
\n
标题: 我是主表
}\n />\n
标题: 我是子表
}\n />\n
\n );\n }\n}\n","desc":" 主表点击子表联动"},{"example":,"title":" 表格+分页","code":"/**\n*\n* @title 表格+分页\n* @description 点击分页联动表格\n*\n*/\nconst columns8 = [\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"操作\",\n dataIndex: \"\",\n key: \"d\",\n render() {\n return 一些操作;\n }\n }\n];\n\nclass Demo8 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data8: [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n ],\n activePage: 1\n };\n }\n handleSelect(eventKey) {\n if(eventKey === 1){\n this.setState({\n data8: [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n ],\n activePage: eventKey\n });\n }else{\n this.setState({\n data8: [\n { a: \"芙蓉姐姐\", b: \"女\", c: 23, key: \"1\" }\n ],\n activePage: eventKey\n });\n }\n \n }\n render() {\n return (\n
\n
\n \n \n );\n }\n}\n","desc":" 点击分页联动表格"},{"example":,"title":" 表格+搜索","code":"/**\n*\n* @title 表格+搜索\n* @description 搜索刷新表格数据\n*\n*/\n\nclass Search extends Component {\n state = {\n searchValue: \"\",\n empty: false\n };\n\n /**\n * 搜索\n */\n handleSearch = () => {\n let { onSearch,handleToChange } = this.props;\n handleToChange && handleToChange();\n onSearch && onSearch(this.state.searchValue);\n };\n\n /**\n * 捕获回车\n * @param e\n */\n handleKeyDown = e => {\n if (e.keyCode === 13) {\n this.handleSearch();\n }\n };\n\n /**\n * 输入框改变\n * @param e\n */\n handleChange = e => {\n this.setState({\n searchValue: e.target.value\n });\n };\n\n /**\n * 清空输入框\n */\n emptySearch = () => {\n let { onEmpty } = this.props;\n this.setState({\n searchValue: \"\",\n empty: false\n });\n onEmpty && onEmpty();\n };\n\n render() {\n return (\n \n \n {this.state.empty\n ? \n : null}\n\n \n \n \n \n );\n }\n}\n\nexport default Search;\nconst columns9 = [\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"操作\",\n dataIndex: \"\",\n key: \"d\",\n render() {\n return 一些操作;\n }\n }\n];\n\nclass Demo9 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n ]\n };\n }\n handleSearchToTable=()=>{\n this.setState({\n data: [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" }\n ]\n })\n }\n render() {\n return (\n
\n
\n \n
\n
\n \n );\n }\n}\n","desc":" 搜索刷新表格数据"}] class Demo extends Component { diff --git a/package.json b/package.json index 9c5407c..8fa824f 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/Table.js b/src/Table.js index ecfec7d..08b499e 100644 --- a/src/Table.js +++ b/src/Table.js @@ -706,7 +706,6 @@ class Table extends Component{ const isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y; - return (
{this.getTitle()}