From b46877970d0d6c8ffcedb1acd2c5bf04f0d1dd02 Mon Sep 17 00:00:00 2001
From: BoyuZhou <386607913@qq.com>
Date: Fri, 29 Sep 2017 16:04:08 +0800
Subject: [PATCH] change demo
---
.idea/bee-table.iml | 12 ++
.idea/misc.xml | 38 ++++++
.idea/modules.xml | 8 ++
.idea/vcs.xml | 6 +
.idea/workspace.xml | 278 ++++++++++++++++++++++++++++++++++++++++
build/Table.js | 1 -
demo/demolist/Demo10.js | 3 +-
demo/demolist/Demo7.js | 138 ++++++++++----------
demo/demolist/Demo8.js | 125 +++++++++---------
demo/demolist/Demo9.js | 257 +++++++++++++++++++++----------------
demo/index.js | 2 +-
package.json | 3 +-
12 files changed, 626 insertions(+), 245 deletions(-)
create mode 100644 .idea/bee-table.iml
create mode 100644 .idea/misc.xml
create mode 100644 .idea/modules.xml
create mode 100644 .idea/vcs.xml
create mode 100644 .idea/workspace.xml
diff --git a/.idea/bee-table.iml b/.idea/bee-table.iml
new file mode 100644
index 0000000..24643cc
--- /dev/null
+++ b/.idea/bee-table.iml
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..3cf9024
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+ true
+
+ false
+ true
+
+
+
+
+
+
+
+
+
+ CSS
+
+
+ Code quality toolsCSS
+
+
+ GeneralJavaScript
+
+
+ JavaScript
+
+
+ Node.jsJavaScript
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..20b1a71
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 0000000..5a8c34c
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,278 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ true
+ DEFINITION_ORDER
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1504076174885
+
+
+ 1504076174885
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/build/Table.js b/build/Table.js
index 98f957f..f6cfb74 100644
--- a/build/Table.js
+++ b/build/Table.js
@@ -805,7 +805,6 @@ var Table = function (_Component) {
className += ' ' + clsPrefix + '-scroll-position-' + this.state.scrollPosition;
var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y;
-
return _react2["default"].createElement(
'div',
{ className: className, style: props.style },
diff --git a/demo/demolist/Demo10.js b/demo/demolist/Demo10.js
index c87439c..90f8371 100644
--- a/demo/demolist/Demo10.js
+++ b/demo/demolist/Demo10.js
@@ -2,7 +2,8 @@
*
* @title 无数据时显示
* @description 无数据时显示效果展示
-*
+ *
+* import {Table} from 'tinper-bee';
*/
import React, { Component } from 'react';
diff --git a/demo/demolist/Demo7.js b/demo/demolist/Demo7.js
index 361856f..c5e6fad 100644
--- a/demo/demolist/Demo7.js
+++ b/demo/demolist/Demo7.js
@@ -1,88 +1,92 @@
/**
-*
-* @title 主子表
-* @description 主表点击子表联动
-*
-*/
+ *
+ * @title 主子表
+ * @description 主表点击子表联动
+ *
+ */
-import React, { Component } from 'react';
+import React, {Component} from 'react';
import Table from '../../src';
-
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 一些操作;
+ {title: "班级", dataIndex: "a", key: "a"},
+ {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" }
+ {a: "02级一班", b: "2", c: "欧阳锋", key: "1"},
+ {a: "03级二班", b: "3", c: "归海一刀", key: "2"},
+ {a: "05级三班", b: "1", c: "一拳超人", key: "3"}
];
const columns7_1 = [
- { title: "用户名", dataIndex: "a", key: "a"},
- { id: "123", title: "班级", dataIndex: "b", key: "b"},
- { title: "系别", dataIndex: "c", key: "c"}
+ {title: "姓名", dataIndex: "a", key: "a"},
+ {title: "班级", dataIndex: "b", key: "b"},
+ {title: "系别", dataIndex: "c", key: "c"}
];
class Demo7 extends Component {
- constructor(props){
- super(props);
- this.state = {
- children_data : []
+ 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" }
- ]
- })
+
+ 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 (
+
+
标题: 我是主表
}
+ />
+ 标题: 我是子表
}
+ />
+
+ );
}
- }
- render() {
- return (
-
-
标题: 我是主表
}
- />
- 标题: 我是子表
}
- />
-
- );
- }
}
export default Demo7;
diff --git a/demo/demolist/Demo8.js b/demo/demolist/Demo8.js
index caf3f2c..067d448 100644
--- a/demo/demolist/Demo8.js
+++ b/demo/demolist/Demo8.js
@@ -1,78 +1,77 @@
/**
-*
-* @title 表格+分页
-* @description 点击分页联动表格
-*
-*/
+ *
+ * @title 表格+分页
+ * @description 点击分页联动表格
+ *
+ *import {Table} from 'tinper-bee';
+ */
-import React, { Component } from 'react';
+import React, {Component} from 'react';
import Table from '../../src';
import Pagination from 'bee-pagination';
const columns8 = [
- { title: "用户名", dataIndex: "a", key: "a", width: 100 },
- { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
- { title: "年龄", dataIndex: "c", key: "c", width: 200 },
- {
- title: "操作",
- dataIndex: "",
- key: "d",
- render() {
- return 一些操作;
+ {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 一些操作;
+ }
}
- }
];
+const pageData = {
+ 1: [
+ {a: "令狐冲", b: "男", c: 41, key: "1"},
+ {a: "杨过", b: "男", c: 67, key: "2"},
+ {a: "郭靖", b: "男", c: 25, key: "3"}
+ ],
+ 2: [
+ {a: "芙蓉姐姐", b: "女", c: 23, key: "1"},
+ {a: "芙蓉姐姐", b: "女", c: 23, key: "2"}
+ ]
+}
+
+
+
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
- });
+ constructor(props) {
+ super(props);
+ this.state = {
+ data: pageData[1],
+ activePage: 1
+ };
+ }
+
+ handleSelect(eventKey) {
+ this.setState({
+ data: pageData[eventKey],
+ activePage: eventKey
+ })
+ }
+
+ render() {
+ return (
+
+
+
+
+ );
}
-
- }
- render() {
- return (
-
- );
- }
}
export default Demo8;
\ No newline at end of file
diff --git a/demo/demolist/Demo9.js b/demo/demolist/Demo9.js
index f60f44f..6592ccf 100644
--- a/demo/demolist/Demo9.js
+++ b/demo/demolist/Demo9.js
@@ -1,132 +1,169 @@
/**
-*
-* @title 表格+搜索
-* @description 搜索刷新表格数据
-*
-*/
+ *
+ * @title 表格+搜索
+ * @description 搜索刷新表格数据
+ *
+ *
+ * import {Table} from 'tinper-bee';
+ */
-import React, { Component } from 'react';
+import React, {Component} from 'react';
import Table from '../../src';
import Icon from "bee-icon";
import InputGroup from 'bee-input-group';
import FormControl from 'bee-form-control';
-
class Search extends Component {
- state = {
- searchValue: "",
- empty: false
- };
+ state = {
+ searchValue: "",
+ empty: false
+ };
- /**
- * 搜索
- */
- handleSearch = () => {
- let { onSearch,handleToChange } = this.props;
- handleToChange && handleToChange();
- onSearch && onSearch(this.state.searchValue);
- };
+ /**
+ * 搜索
+ */
+ 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
+ */
+ 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}
+
+
+
+
+
+ );
}
- };
-
- /**
- * 输入框改变
- * @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}
-
-
-
-
-
- );
- }
}
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 一些操作;
+ {
+ title: "用户名",
+ dataIndex: "a",
+ key: "a",
+ width: 100
+ },
+ {
+ title: "性别",
+ dataIndex: "b",
+ key: "b",
+ width: 100
+ },
+ {
+ title: "年龄",
+ dataIndex: "c",
+ key: "c",
+ width: 200
+ },
+ {
+ title: "操作",
+ dataIndex: "",
+ key: "d",
+ render() {
+ return 一些操作;
+ }
}
- }
+];
+
+const userData = [
+ {a: "令狐冲", b: "男", c: 41, key: "1"},
+ {a: "杨过", b: "男", c: 67, key: "2"},
+ {a: "郭靖", b: "男", c: 25, key: "3"}
];
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 (
-
- );
- }
+ 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 (
+
+
+
+
+
+
+ );
+ }
}
export default Demo9;
diff --git a/demo/index.js b/demo/index.js
index 63ad7f8..28ea6ac 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -18,7 +18,7 @@ const CARET = ;
const CARETUP = ;
-var Demo1 = require("./demolist/Demo1");var Demo10 = require("./demolist/Demo10");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var Demo7 = require("./demolist/Demo7");var Demo8 = require("./demolist/Demo8");var Demo9 = require("./demolist/Demo9");var DemoArray = [{"example":,"title":" 简单表格","code":"/**\n*\n* @title 简单表格\n* @description\n*\n*/\n\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport Table from 'tinper-bee';\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\n\n\n","desc":""},{"example":,"title":" 无数据时显示","code":"/**\n*\n* @title 无数据时显示\n* @description 无数据时显示效果展示\n*\n*/\n\nimport React, { Component } from 'react';\nimport Table from 'tinper-bee';\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\n \n\n","desc":" 无数据时显示效果展示"},{"example":,"title":" 增删改表格","code":"/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格\n*\n*/\n\nimport React, { Component } from 'react';\nimport Button from 'bee-button';\nimport Table from 'tinper-bee';\nimport Animate from 'bee-animate';\nimport Icon from \"bee-icon\";\nimport Input from 'bee-form-control';\nimport Popconfirm from 'bee-popconfirm';\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 \n \n \n {\n return (\n \n );\n }}\n />\n
\n )\n }\n}\n\n\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 树形数据展示","code":"/**\n*\n* @title 树形数据展示\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\nimport React, { Component } from 'react';\nimport Table from 'tinper-bee';\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\n\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 固定列","code":"/**\n*\n* @title 固定列\n* @description 固定列到表格的某侧\n*\n*/\n\nimport React, { Component } from 'react';\nimport Table from 'tinper-bee';\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\n\n","desc":" 固定列到表格的某侧"},{"example":,"title":" 固定表头","code":"/**\n*\n* @title 固定表头\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。\n*\n*/\n\nimport React, { Component } from 'react';\nimport Table from 'tinper-bee';\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\n","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。"},{"example":,"title":" 主子表","code":"/**\n*\n* @title 主子表\n* @description 主表点击子表联动\n*\n*/\n\nimport React, { Component } from 'react';\nimport Table from 'tinper-bee';\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 footer={currentData => 表尾: 我是小尾巴
}\n />\n )\n }\n}\n\n\n\n","desc":""},{"example":,"title":" 无数据时显示","code":"/**\n*\n* @title 无数据时显示\n* @description 无数据时显示效果展示\n *\n* import {Table} from 'tinper-bee';\n*/\n\nimport React, { Component } from 'react';\nimport Table from 'tinper-bee';\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\n \n\n","desc":" 无数据时显示效果展示"},{"example":,"title":" 增删改表格","code":"/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格\n*\n*/\n\nimport React, { Component } from 'react';\nimport Button from 'bee-button';\nimport Table from 'tinper-bee';\nimport Animate from 'bee-animate';\nimport Icon from \"bee-icon\";\nimport Input from 'bee-form-control';\nimport Popconfirm from 'bee-popconfirm';\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 \n \n \n {\n return (\n \n );\n }}\n />\n
\n )\n }\n}\n\n\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 树形数据展示","code":"/**\n*\n* @title 树形数据展示\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\nimport React, { Component } from 'react';\nimport Table from 'tinper-bee';\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\n\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 固定列","code":"/**\n*\n* @title 固定列\n* @description 固定列到表格的某侧\n*\n*/\n\nimport React, { Component } from 'react';\nimport Table from 'tinper-bee';\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\n\n","desc":" 固定列到表格的某侧"},{"example":,"title":" 固定表头","code":"/**\n*\n* @title 固定表头\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。\n*\n*/\n\nimport React, { Component } from 'react';\nimport Table from 'tinper-bee';\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\n","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。"},{"example":,"title":" 主子表","code":"/**\n *\n * @title 主子表\n * @description 主表点击子表联动\n *\n */\n\nimport React, {Component} from 'react';\nimport Table from 'tinper-bee';\n\n\nconst columns7 = [\n {title: \"班级\", dataIndex: \"a\", key: \"a\"},\n {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: \"02级一班\", b: \"2\", c: \"欧阳锋\", key: \"1\"},\n {a: \"03级二班\", b: \"3\", c: \"归海一刀\", key: \"2\"},\n {a: \"05级三班\", b: \"1\", c: \"一拳超人\", key: \"3\"}\n];\n\nconst columns7_1 = [\n {title: \"姓名\", dataIndex: \"a\", key: \"a\"},\n {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\n rowclick = (record, index) => {\n\n if (record.a === '02级一班') {\n this.setState({\n children_data: [\n {a: \"郭靖\", b: \"02级一班\", c: '文学系', key: \"1\"},\n {a: \"黄蓉\", b: \"02级一班\", c: '文学系', key: \"2\"},\n ]\n })\n } else if (record.a === '03级二班') {\n this.setState({\n children_data: [\n {a: \"杨过\", b: \"03级二班\", c: '外语系', key: \"1\"},\n {a: \"小龙女\", b: \"03级二班\", c: '外语系', key: \"2\"},\n {a: \"傻姑\", b: \"03级二班\", c: '外语系', key: \"3\"},\n ]\n })\n } else if (record.a === '05级三班') {\n this.setState({\n children_data: [\n {a: \"金圣叹\", b: \"05级三班\", c: '美术系', key: \"1\"}\n ]\n })\n }\n }\n\n render() {\n return (\n \n
标题: 我是主表
}\n />\n 标题: 我是子表
}\n />\n \n
\n \n \n );\n }\n}\n\n","desc":" 点击分页联动表格"},{"example":,"title":" 表格+搜索","code":"/**\n *\n * @title 表格+搜索\n * @description 搜索刷新表格数据\n *\n *\n * import {Table} from 'tinper-bee';\n */\n\nimport React, {Component} from 'react';\nimport Table from 'tinper-bee';\nimport Icon from \"bee-icon\";\nimport InputGroup from 'bee-input-group';\nimport FormControl from 'bee-form-control';\n\n\nclass Search extends Component {\n state = {\n searchValue: \"\",\n empty: false\n };\n\n /**\n * 搜索\n */\n handleSearch = () => {\n let {onSearch} = this.props;\n this.setState({\n empty: true\n })\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\nconst columns9 = [\n {\n title: \"用户名\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200\n },\n {\n title: \"操作\",\n dataIndex: \"\",\n key: \"d\",\n render() {\n return 一些操作;\n }\n }\n];\n\nconst userData = [\n {a: \"令狐冲\", b: \"男\", c: 41, key: \"1\"},\n {a: \"杨过\", b: \"男\", c: 67, key: \"2\"},\n {a: \"郭靖\", b: \"男\", c: 25, key: \"3\"}\n];\n\nclass Demo9 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: userData\n };\n }\n\n handleSearch = (value) => {\n if(value === ''){\n return this.setState({\n data: userData\n })\n }\n let regExp = new RegExp(value, 'ig');\n let data = userData.filter((item) => regExp.test(item.a));\n this.setState({\n data\n })\n }\n\n handleEmpty = () => {\n this.setState({\n data: userData\n })\n }\n\n render() {\n return (\n \n
\n \n
\n
\n \n );\n }\n}\n\n\n\n","desc":" 搜索刷新表格数据"}]
class Demo extends Component {
diff --git a/package.json b/package.json
index 09946e2..fbde31c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "bee-table",
- "version": "0.1.2",
+ "version": "0.2.3",
"description": "Table ui component for react",
"keywords": [
"react",
@@ -49,7 +49,6 @@
"bee-pagination": "^0.1.7",
"bee-panel": "latest",
"bee-popconfirm": "^0.2.2",
- "bee-tools": "^0.3.0",
"chai": "^3.5.0",
"console-polyfill": "~0.2.1",
"enzyme": "^2.4.1",