diff --git a/demo/TableDemo.scss b/demo/TableDemo.scss index 8407021..46d630d 100644 --- a/demo/TableDemo.scss +++ b/demo/TableDemo.scss @@ -76,3 +76,47 @@ position: absolute; } } + +.bee-table-column-sorter { + position: relative; + margin-left: 4px; + display: inline-block; + width: 14px; + height: 1em; + vertical-align: middle; + text-align: center; + & > .bee-table-column-sorter-down, + & > .bee-table-column-sorter-up { + line-height: 6px; + display: block; + width: 14px; + cursor: pointer; + } +} +.bee-table-column-sorter-down.on .uf-triangle-down, +.bee-table-column-sorter-down.on .uf-triangle-up, +.bee-table-column-sorter-up.on .uf-triangle-down, +.bee-table-column-sorter-up.on .uf-triangle-up { + color: #108ee9; +} +.bee-table-column-sorter .uf-triangle-down, .bee-table-column-sorter .uf-triangle-up { + -webkit-filter: none; + filter: none; + font-size: 12px; +} +.bee-table-column-sorter .uf-triangle-down, .bee-table-column-sorter .uf-triangle-up { + display: inline-block; + padding: 0; + font-size: 12px; + font-size: 8px\9; + -webkit-transform: scale(.66666667) rotate(0deg); + -ms-transform: scale(.66666667) rotate(0deg); + transform: scale(.66666667) rotate(0deg); + -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)"; + zoom: 1; + line-height: 4px; + height: 4px; + color: #999; + -webkit-transition: all .3s; + transition: all .3s; +} \ No newline at end of file diff --git a/demo/demolist/Demo1.js b/demo/demolist/Demo1.js index 5855df3..5b7b81f 100644 --- a/demo/demolist/Demo1.js +++ b/demo/demolist/Demo1.js @@ -5,10 +5,6 @@ * */ -import React, { Component } from 'react'; -import ReactDOM from 'react-dom'; -import Table from '../../src'; - const columns = [ { title: '用户名', dataIndex: 'a', key: 'a', width: 100 }, @@ -27,7 +23,7 @@ const data = [ { a: '郭靖', b: '男', c: 25, key: '3' }, ]; -class Demo1 extends Component { +export class Demo1 extends Component { render () { return ( 这里没有数据！ - class Demo10 extends Component { + export class Demo10 extends Component { render() { return
; } } - export default Demo10; - diff --git a/demo/demolist/Demo11.js b/demo/demolist/Demo11.js new file mode 100644 index 0000000..65ae0e6 --- /dev/null +++ b/demo/demolist/Demo11.js @@ -0,0 +1,142 @@ +/** +* +* @title 列排序 +* @description 列排序 +* +*/ + +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: "", + key: "d", + render() { + return 一些操作; + } + } +]; + +const data11 = [ + { a: "杨过", b: "男", c: 30, key: "2" }, + { a: "令狐冲", b: "男", c: 41, key: "1" }, + { a: "郭靖", b: "男", c: 25, key: "3" } +]; + +const defaultProps = { + prefixCls: "bee-table" +}; +class Demo11 extends Component { + constructor(props) { + super(props); + this.state = { + sortOrder: "", + data: data11 + }; + } + toggleSortOrder(order, column) { + let { sortOrder, data, oldData } = this.state; + let ascend_sort = function(key) { + return function(a, b) { + return a.key - b.key; + }; + }; + let descend_sort = function(key) { + return function(a, b) { + return b.key - a.key; + }; + }; + if (sortOrder === order) { + // 切换为未排序状态 + order = ""; + } + debugger; + console.log(oldData); + if (!oldData) { + oldData = data.concat(); + } + if (order === "ascend") { + data = data.sort(function(a, b) { + return column.sorter(a, b); + }); + } else if (order === "descend") { + data = data.sort(function(a, b) { + return column.sorter(b, a); + }); + } else { + data = oldData.concat(); + } + this.setState({ + sortOrder: order, + data: data, + oldData: oldData + }); + } + renderColumnsDropdown(columns) { + const { sortOrder } = this.state; + const { prefixCls } = this.props; + + return columns.map(originColumn => { + let column = Object.assign({}, originColumn); + let sortButton; + if (column.sorter) { + const isAscend = sortOrder === "ascend"; + const isDescend = sortOrder === "descend"; + sortButton = ( +
+ this.toggleSortOrder("ascend", column)} + > + + + this.toggleSortOrder("descend", column)} + > + + +
+ ); + } + column.title = ( + + {column.title} + {sortButton} + + ); + return column; + }); + } + render() { + let columns = this.renderColumnsDropdown(columns11); + return
; + } +} +Demo11.defaultProps = defaultProps; + +export default Demo11; diff --git a/demo/demolist/Demo2.js b/demo/demolist/Demo2.js index 0e0fbb1..b341266 100644 --- a/demo/demolist/Demo2.js +++ b/demo/demolist/Demo2.js @@ -5,13 +5,6 @@ * */ -import React, { Component } from 'react'; -import Button from 'bee-button'; -import Table from '../../src'; -import Animate from 'bee-animate'; -import Icon from "bee-icon"; -import Input from 'bee-form-control'; -import Popconfirm from 'bee-popconfirm'; class EditableCell extends React.Component { state = { @@ -69,7 +62,7 @@ class EditableCell extends React.Component { } } -export default class Demo2 extends React.Component { +export class Demo2 extends React.Component { constructor(props) { super(props); this.columns = [{ diff --git a/demo/demolist/Demo3.js b/demo/demolist/Demo3.js index 01b281a..cf24d93 100644 --- a/demo/demolist/Demo3.js +++ b/demo/demolist/Demo3.js @@ -5,13 +5,6 @@ * */ -import React, { Component } from 'react'; -import Button from 'bee-button'; -import Table from '../../src'; -import Animate from 'bee-animate'; -import Icon from "bee-icon"; -import Input from 'bee-form-control'; -import Popconfirm from 'bee-popconfirm'; const { ColumnGroup, Column } = Table; @@ -19,7 +12,7 @@ const data3 = [ { a: '北京', b: '北京', c: '250', d: 2, key: '1' }, ]; -class Demo3 extends Component { +export class Demo3 extends Component { render () { return ( @@ -59,5 +52,3 @@ class Demo3 extends Component { ) } } - -export default Demo3; diff --git a/demo/demolist/Demo4.js b/demo/demolist/Demo4.js index ac7c35f..411b98e 100644 --- a/demo/demolist/Demo4.js +++ b/demo/demolist/Demo4.js @@ -5,10 +5,6 @@ * */ -import React, { Component } from 'react'; -import Table from '../../src'; - - const columns4 = [ { @@ -94,10 +90,8 @@ const data4 = [ address: "Sidney No. 1 Lake Park" } ]; -class Demo4 extends Component { +export class Demo4 extends Component { render() { return
; } } - -export default Demo4; diff --git a/demo/demolist/Demo5.js b/demo/demolist/Demo5.js index 68b9d9c..4d822bc 100644 --- a/demo/demolist/Demo5.js +++ b/demo/demolist/Demo5.js @@ -5,9 +5,6 @@ * */ -import React, { Component } from 'react'; -import Table from '../../src'; - const columns5 = [ @@ -56,10 +53,8 @@ const data5 = [ } ]; -class Demo5 extends Component { +export class Demo5 extends Component { render() { return
; } } - -export default Demo5; diff --git a/demo/demolist/Demo6.js b/demo/demolist/Demo6.js index 3b1c119..c7ba37b 100644 --- a/demo/demolist/Demo6.js +++ b/demo/demolist/Demo6.js @@ -5,9 +5,6 @@ * */ -import React, { Component } from 'react'; -import Table from '../../src'; - const columns6 = [ @@ -78,10 +75,8 @@ const data6 = [ } ]; -class Demo6 extends Component { +export class Demo6 extends Component { render() { return
; } -} - -export default Demo6; \ No newline at end of file +} \ No newline at end of file diff --git a/demo/demolist/Demo7.js b/demo/demolist/Demo7.js index 361856f..f043f78 100644 --- a/demo/demolist/Demo7.js +++ b/demo/demolist/Demo7.js @@ -5,10 +5,6 @@ * */ -import React, { Component } from 'react'; -import Table from '../../src'; - - const columns7 = [ { title: "用户名", dataIndex: "a", key: "a"}, @@ -36,7 +32,7 @@ const columns7_1 = [ { title: "系别", dataIndex: "c", key: "c"} ]; -class Demo7 extends Component { +export class Demo7 extends Component { constructor(props){ super(props); this.state = { @@ -85,5 +81,3 @@ class Demo7 extends Component { } } -export default Demo7; - diff --git a/demo/demolist/Demo8.js b/demo/demolist/Demo8.js index caf3f2c..bbd3a9f 100644 --- a/demo/demolist/Demo8.js +++ b/demo/demolist/Demo8.js @@ -5,11 +5,6 @@ * */ -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 }, @@ -24,7 +19,7 @@ const columns8 = [ } ]; -class Demo8 extends Component { +export class Demo8 extends Component { constructor(props) { super(props); this.state = { @@ -73,6 +68,4 @@ class Demo8 extends Component { ); } -} - -export default Demo8; \ No newline at end of file +} \ No newline at end of file diff --git a/demo/demolist/Demo9.js b/demo/demolist/Demo9.js index f60f44f..a22ddd2 100644 --- a/demo/demolist/Demo9.js +++ b/demo/demolist/Demo9.js @@ -5,13 +5,6 @@ * */ -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 = { @@ -99,7 +92,7 @@ const columns9 = [ } ]; -class Demo9 extends Component { +export class Demo9 extends Component { constructor(props) { super(props); this.state = { @@ -129,5 +122,3 @@ class Demo9 extends Component { } } -export default Demo9; - diff --git a/demo/index.js b/demo/index.js index 63ad7f8..a293d21 100644 --- a/demo/index.js +++ b/demo/index.js @@ -18,7 +18,968 @@ 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 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\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\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\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 );\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';\nimport Pagination from 'bee-pagination';\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\n","desc":" 点击分页联动表格"},{"example":,"title":" 表格+搜索","code":"/**\n*\n* @title 表格+搜索\n* @description 搜索刷新表格数据\n*\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\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\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\n\n\n","desc":" 搜索刷新表格数据"}] +/** +* +* @title 简单表格 +* @description +* +*/ + + +const columns = [ + { 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 data = [ + { a: '令狐冲', b: '男', c: 41, key: '1' }, + { a: '杨过', b: '男', c: 67, key: '2' }, + { a: '郭靖', b: '男', c: 25, key: '3' }, +]; + +export class Demo1 extends Component { + render () { + return ( +
标题: 这是一个标题
} + footer={currentData =>
表尾: 我是小尾巴
} + /> + ) + } +} + +/** +* +* @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 = () => 这里没有数据！ + + export class Demo10 extends Component { + render() { + return
; + } + } + +/** +* +* @title 列排序 +* @description 列排序 +* +*/ + +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: "", + key: "d", + render() { + return 一些操作; + } + } +]; + +const data11 = [ + { a: "杨过", b: "男", c: 30, key: "2" }, + { a: "令狐冲", b: "男", c: 41, key: "1" }, + { a: "郭靖", b: "男", c: 25, key: "3" } +]; + +const defaultProps = { + prefixCls: "bee-table" +}; +class Demo11 extends Component { + constructor(props) { + super(props); + this.state = { + sortOrder: "", + data: data11 + }; + } + toggleSortOrder(order, column) { + let { sortOrder, data, oldData } = this.state; + let ascend_sort = function(key) { + return function(a, b) { + return a.key - b.key; + }; + }; + let descend_sort = function(key) { + return function(a, b) { + return b.key - a.key; + }; + }; + if (sortOrder === order) { + // 切换为未排序状态 + order = ""; + } + debugger; + console.log(oldData); + if (!oldData) { + oldData = data.concat(); + } + if (order === "ascend") { + data = data.sort(function(a, b) { + return column.sorter(a, b); + }); + } else if (order === "descend") { + data = data.sort(function(a, b) { + return column.sorter(b, a); + }); + } else { + data = oldData.concat(); + } + this.setState({ + sortOrder: order, + data: data, + oldData: oldData + }); + } + renderColumnsDropdown(columns) { + const { sortOrder } = this.state; + const { prefixCls } = this.props; + + return columns.map(originColumn => { + let column = Object.assign({}, originColumn); + let sortButton; + if (column.sorter) { + const isAscend = sortOrder === "ascend"; + const isDescend = sortOrder === "descend"; + sortButton = ( +
+ this.toggleSortOrder("ascend", column)} + > + + + this.toggleSortOrder("descend", column)} + > + + +
+ ); + } + column.title = ( + + {column.title} + {sortButton} + + ); + return column; + }); + } + render() { + let columns = this.renderColumnsDropdown(columns11); + return
; + } +} +Demo11.defaultProps = defaultProps; + +export default Demo11; +/** +* +* @title 增删改表格 +* @description 这是带有增删改功能的表格 +* +*/ + + +class EditableCell extends React.Component { + state = { + value: this.props.value, + editable: false, + } + handleChange = (e) => { + const value = e.target.value; + 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) => { + console.log(event.keyCode); + if(event.keyCode == 13){ + this.check(); + } + + } + render() { + const { value, editable } = this.state; + return (
+ { + editable ? +
+ + +
+ : +
+ {value || ' '} + +
+ } +
); + } +} + +export class Demo2 extends React.Component { + constructor(props) { + super(props); + this.columns = [{ + title: '姓名', + dataIndex: 'name', + key:'name', + width: '30%', + render: (text, record, index) => ( + + ), + }, { + 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 ? + ( + + + + ) : 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, + }); + } + + getBodyWrapper = (body) => { + return ( + + {body.props.children} + + ); + } + render() { + const { dataSource } = this.state; + const columns = this.columns; + return (
+ +
+ ); + } +} + + +/** +* +* @title 更灵活的表格 +* @description 手写表格的头组件来达到更灵活的配置表格 +* +*/ + + +const { ColumnGroup, Column } = Table; + +const data3 = [ + { a: '北京', b: '北京', c: '250', d: 2, key: '1' }, +]; + +export class Demo3 extends Component { + render () { + return ( + +
+ + + + + + { + return ( + + ); + }} + /> +
+ ) + } +} +/** +* +* @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" + } +]; +export 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" + } +]; + +export 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" + } +]; + +export 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"} +]; + +export 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 一些操作; + } + } +]; + +export 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} + + + + + + ); + } +} + +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 一些操作; + } + } +]; + +export 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\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\nexport class Demo1 extends Component {\n render () {\n return (\n
标题: 这是一个标题
}\n footer={currentData =>
表尾: 我是小尾巴
}\n />\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 export class Demo10 extends Component {\n render() {\n return
;\n }\n }\n\n","desc":" 无数据时显示效果展示"},{"example":,"title":" 列排序","code":"/**\n*\n* @title 列排序\n* @description 列排序\n*\n*/\n\nconst columns11 = [\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 sorter: (a, b) => a.c - b.c\n },\n {\n title: \"操作\",\n dataIndex: \"\",\n key: \"d\",\n render() {\n return 一些操作;\n }\n }\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nconst defaultProps = {\n prefixCls: \"bee-table\"\n};\nclass Demo11 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n toggleSortOrder(order, column) {\n let { sortOrder, data, oldData } = this.state;\n let ascend_sort = function(key) {\n return function(a, b) {\n return a.key - b.key;\n };\n };\n let descend_sort = function(key) {\n return function(a, b) {\n return b.key - a.key;\n };\n };\n if (sortOrder === order) {\n // 切换为未排序状态\n order = \"\";\n }\n debugger;\n console.log(oldData);\n if (!oldData) {\n oldData = data.concat();\n }\n if (order === \"ascend\") {\n data = data.sort(function(a, b) {\n return column.sorter(a, b);\n });\n } else if (order === \"descend\") {\n data = data.sort(function(a, b) {\n return column.sorter(b, a);\n });\n } else {\n data = oldData.concat();\n }\n this.setState({\n sortOrder: order,\n data: data,\n oldData: oldData\n });\n }\n renderColumnsDropdown(columns) {\n const { sortOrder } = this.state;\n const { prefixCls } = this.props;\n\n return columns.map(originColumn => {\n let column = Object.assign({}, originColumn);\n let sortButton;\n if (column.sorter) {\n const isAscend = sortOrder === \"ascend\";\n const isDescend = sortOrder === \"descend\";\n sortButton = (\n
\n this.toggleSortOrder(\"ascend\", column)}\n >\n \n \n this.toggleSortOrder(\"descend\", column)}\n >\n \n \n
\n );\n }\n column.title = (\n \n {column.title}\n {sortButton}\n \n );\n return column;\n });\n }\n render() {\n let columns = this.renderColumnsDropdown(columns11);\n return
;\n }\n}\nDemo11.defaultProps = defaultProps;\n\nexport default Demo11;\n","desc":" 列排序"},{"example":,"title":" 增删改表格","code":"/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格\n*\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\nexport class 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\n\n","desc":" 这是带有增删改功能的表格"},{"example":,"title":" 更灵活的表格","code":"/**\n*\n* @title 更灵活的表格\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\n\nconst { ColumnGroup, Column } = Table;\n\nconst data3 = [\n { a: '北京', b: '北京', c: '250', d: 2, key: '1' },\n];\n\nexport class 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\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];\nexport class Demo4 extends Component {\n render() {\n return ;\n }\n}\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 固定列","code":"/**\n*\n* @title 固定列\n* @description 固定列到表格的某侧\n*\n*/\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\nexport class Demo5 extends Component {\n render() {\n return
;\n }\n}\n","desc":" 固定列到表格的某侧"},{"example":,"title":" 固定表头","code":"/**\n*\n* @title 固定表头\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。\n*\n*/\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\nexport class Demo6 extends Component {\n render() {\n return
;\n }\n}","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。"},{"example":,"title":" 主子表","code":"/**\n*\n* @title 主子表\n* @description 主表点击子表联动\n*\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\nexport class 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\n","desc":" 主表点击子表联动"},{"example":,"title":" 表格+分页","code":"/**\n*\n* @title 表格+分页\n* @description 点击分页联动表格\n*\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\nexport class 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}","desc":" 点击分页联动表格"},{"example":,"title":" 表格+搜索","code":"/**\n*\n* @title 表格+搜索\n* @description 搜索刷新表格数据\n*\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\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\nexport class 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\n","desc":" 搜索刷新表格数据"}] class Demo extends Component {