From f8a00fe2e813a2c03e34e5d2706bfda4320344bb Mon Sep 17 00:00:00 2001 From: huyueb <1062887235@qq.com> Date: Thu, 14 Sep 2017 15:45:18 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=8E=92=E5=BA=8F?= =?UTF-8?q?=E5=92=8C=E5=85=A8=E9=80=89=E9=AB=98=E9=98=B6=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=EF=BC=8C=E5=B9=B6=E5=A2=9E=E5=8A=A0=E4=BD=BF=E7=94=A8=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/demolist/Demo13.js | 76 +++++++++++ demo/demolist/Demo2.js | 256 ++++++++++++++++++++----------------- demo/index.js | 2 +- src/lib/multiSelectFunc.js | 149 +++++++++++++++++++++ src/lib/sortFunc.js | 100 +++++++++++++++ src/lib/util.js | 0 6 files changed, 464 insertions(+), 119 deletions(-) create mode 100644 demo/demolist/Demo13.js create mode 100644 src/lib/multiSelectFunc.js create mode 100644 src/lib/sortFunc.js create mode 100644 src/lib/util.js diff --git a/demo/demolist/Demo13.js b/demo/demolist/Demo13.js new file mode 100644 index 0000000..c18e81c --- /dev/null +++ b/demo/demolist/Demo13.js @@ -0,0 +1,76 @@ +/** +* +* @title 全选功能 +* @description 全选功能 +* +*/ + +import React, { Component } from "react"; +import Table from "../../src"; +import Checkbox from "bee-checkbox"; +import multiTable from "../../src/lib/multiSelectFunc.js"; +import sortTable from "../../src/lib/sortFunc.js"; + +const columns13 = [ + { + 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 data13 = [ + { a: "杨过", b: "男", c: 30, key: "2" }, + { a: "令狐冲", b: "男", c: 41, key: "1" }, + { a: "郭靖", b: "男", c: 25, key: "3" } +]; +class Demo13 extends Component { + getCheckedObj = () => { + console.log(this.state); + }; + setCheckedOjb = (data) =>{ + console.log(data) + } + render() { + let multiObj = { + type: "checkbox", + param: "key" + }; + let ComplexTable = multiTable(sortTable(Table)); + return ( +
+ + +
+ ); + } +} +export default Demo13; diff --git a/demo/demolist/Demo2.js b/demo/demolist/Demo2.js index c739a49..773b991 100644 --- a/demo/demolist/Demo2.js +++ b/demo/demolist/Demo2.js @@ -5,180 +5,200 @@ * */ - - -import Button from 'bee-button'; -import React, { Component } from 'react'; -import Table from '../../src'; -import Animate from 'bee-animate'; +import Button from "bee-button"; +import React, { Component } from "react"; +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'; +import Input from "bee-form-control"; +import Popconfirm from "bee-popconfirm"; class EditableCell extends React.Component { state = { value: this.props.value, - editable: false, - } - handleChange = (e) => { + 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(); - } - - } + }; + handleKeydown = event => { + console.log(event.keyCode); + if (event.keyCode == 13) { + this.check(); + } + }; render() { const { value, editable } = this.state; - return (
- { - editable ? -
- - -
- : -
- {value || ' '} - -
- } -
); + return ( +
+ {editable ? ( +
+ + +
+ ) : ( +
+ {value || " "} + +
+ )} +
+ ); } } 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.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, + 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) => { + return value => { const dataSource = [...this.state.dataSource]; dataSource[index][key] = value; this.setState({ dataSource }); }; - } - onDelete = (index) => { + }; + 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`, + address: `100 100 100` }; this.setState({ dataSource: [...dataSource, newData], - count: count + 1, + count: count + 1 }); - } + }; - getBodyWrapper = (body) => { + getBodyWrapper = body => { return ( - + {body.props.children} ); - } + }; render() { const { dataSource } = this.state; const columns = this.columns; - return (
- - - ); + return ( +
+ +
+ + ); } } export default Demo2; - - diff --git a/demo/index.js b/demo/index.js index e710d5a..2ee5ea9 100644 --- a/demo/index.js +++ b/demo/index.js @@ -11,7 +11,7 @@ const CARET = ; const CARETUP = ; -var Demo1 = require("./demolist/Demo1");var Demo10 = require("./demolist/Demo10");var Demo11 = require("./demolist/Demo11");var Demo12 = require("./demolist/Demo12");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 Table from 'bee-table';\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\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\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\n","desc":" 无数据时显示效果展示"},{"example":,"title":" 列排序","code":"/**\n*\n* @title 列排序\n* @description 列排序\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\nimport Icon from \"bee-icon\";\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 defaultProps11 = {\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 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 = defaultProps11;\n\n\n","desc":" 列排序"},{"example":,"title":" 全选功能","code":"/**\n*\n* @title 全选功能\n* @description 全选功能\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\nimport Checkbox from \"bee-checkbox\";\n\nconst columns12 = [\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 data12 = [\n { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nconst defaultProps12 = {\n prefixCls: \"bee-table\",\n multiSelect: {\n type: \"checkbox\",\n param: \"key\"\n }\n};\nclass Demo12 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n checkedAll:false,\n checkedArray: [\n false,\n false,\n false,\n ],\n data: data12\n };\n }\n onAllCheckChange = () => {\n let self = this;\n let checkedArray = [];\n let listData = self.state.data.concat();\n let selIds = [];\n // let id = self.props.multiSelect.param;\n for (var i = 0; i < self.state.checkedArray.length; i++) {\n checkedArray[i] = !self.state.checkedAll;\n }\n // if (self.state.checkedAll) {\n // selIds = [];\n // } else {\n // for (var i = 0; i < listData.length; i++) {\n // selIds[i] = listData[i][id];\n // }\n // }\n self.setState({\n checkedAll: !self.state.checkedAll,\n checkedArray: checkedArray,\n // selIds: selIds\n });\n // self.props.onSelIds(selIds);\n };\n onCheckboxChange = (text, record, index) => {\n let self = this;\n let allFlag = false;\n // let selIds = self.state.selIds;\n // let id = self.props.postId;\n let checkedArray = self.state.checkedArray.concat();\n // if (self.state.checkedArray[index]) {\n // selIds.remove(record[id]);\n // } else {\n // selIds.push(record[id]);\n // }\n checkedArray[index] = !self.state.checkedArray[index];\n for (var i = 0; i < self.state.checkedArray.length; i++) {\n if (!checkedArray[i]) {\n allFlag = false;\n break;\n } else {\n allFlag = true;\n }\n }\n self.setState({\n checkedAll: allFlag,\n checkedArray: checkedArray,\n // selIds: selIds\n });\n // self.props.onSelIds(selIds);\n };\n renderColumnsMultiSelect(columns) {\n const { data,checkedArray } = this.state;\n const { multiSelect } = this.props;\n let select_column = {};\n let indeterminate_bool = false;\n // let indeterminate_bool1 = true;\n if (multiSelect && multiSelect.type === \"checkbox\") {\n let i = checkedArray.length;\n while(i--){\n if(checkedArray[i]){\n indeterminate_bool = true;\n break;\n }\n }\n let defaultColumns = [\n {\n title: (\n \n ),\n key: \"checkbox\",\n dataIndex: \"checkbox\",\n width: \"5%\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n columns = defaultColumns.concat(columns);\n }\n return columns;\n }\n render() {\n let columns = this.renderColumnsMultiSelect(columns12);\n return
;\n }\n}\nDemo12.defaultProps = defaultProps12;\n\n","desc":" 全选功能"},{"example":,"title":" 增删改表格","code":"/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格\n*\n*/\n\n\n\nimport Button from 'bee-button';\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\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\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\n\n\n\n","desc":" 这是带有增删改功能的表格"},{"example":,"title":" 更灵活的表格","code":"/**\n*\n* @title 更灵活的表格\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\n\nimport Button from 'bee-button';\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\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","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 树形数据展示","code":"/**\n*\n* @title 树形数据展示\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\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\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\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","desc":" 固定列到表格的某侧"},{"example":,"title":" 固定表头","code":"/**\n*\n* @title 固定表头\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\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\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\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","desc":" 主表点击子表联动"},{"example":,"title":" 表格+分页","code":"/**\n*\n* @title 表格+分页\n* @description 点击分页联动表格\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\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","desc":" 点击分页联动表格"},{"example":,"title":" 表格+搜索","code":"/**\n*\n* @title 表格+搜索\n* @description 搜索刷新表格数据\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\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,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","desc":" 搜索刷新表格数据"}] +var Demo1 = require("./demolist/Demo1");var Demo10 = require("./demolist/Demo10");var Demo11 = require("./demolist/Demo11");var Demo12 = require("./demolist/Demo12");var Demo13 = require("./demolist/Demo13");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 Table from 'bee-table';\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\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\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\n","desc":" 无数据时显示效果展示"},{"example":,"title":" 列排序","code":"/**\n*\n* @title 列排序\n* @description 列排序\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\nimport Icon from \"bee-icon\";\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 defaultProps11 = {\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 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 = defaultProps11;\n\n\n","desc":" 列排序"},{"example":,"title":" 全选功能","code":"/**\n*\n* @title 全选功能\n* @description 全选功能\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\nimport Checkbox from \"bee-checkbox\";\n\nconst columns12 = [\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 data12 = [\n { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nconst defaultProps12 = {\n prefixCls: \"bee-table\",\n multiSelect: {\n type: \"checkbox\",\n param: \"key\"\n }\n};\nclass Demo12 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n checkedAll:false,\n checkedArray: [\n false,\n false,\n false,\n ],\n data: data12\n };\n }\n onAllCheckChange = () => {\n let self = this;\n let checkedArray = [];\n let listData = self.state.data.concat();\n let selIds = [];\n // let id = self.props.multiSelect.param;\n for (var i = 0; i < self.state.checkedArray.length; i++) {\n checkedArray[i] = !self.state.checkedAll;\n }\n // if (self.state.checkedAll) {\n // selIds = [];\n // } else {\n // for (var i = 0; i < listData.length; i++) {\n // selIds[i] = listData[i][id];\n // }\n // }\n self.setState({\n checkedAll: !self.state.checkedAll,\n checkedArray: checkedArray,\n // selIds: selIds\n });\n // self.props.onSelIds(selIds);\n };\n onCheckboxChange = (text, record, index) => {\n let self = this;\n let allFlag = false;\n // let selIds = self.state.selIds;\n // let id = self.props.postId;\n let checkedArray = self.state.checkedArray.concat();\n // if (self.state.checkedArray[index]) {\n // selIds.remove(record[id]);\n // } else {\n // selIds.push(record[id]);\n // }\n checkedArray[index] = !self.state.checkedArray[index];\n for (var i = 0; i < self.state.checkedArray.length; i++) {\n if (!checkedArray[i]) {\n allFlag = false;\n break;\n } else {\n allFlag = true;\n }\n }\n self.setState({\n checkedAll: allFlag,\n checkedArray: checkedArray,\n // selIds: selIds\n });\n // self.props.onSelIds(selIds);\n };\n renderColumnsMultiSelect(columns) {\n const { data,checkedArray } = this.state;\n const { multiSelect } = this.props;\n let select_column = {};\n let indeterminate_bool = false;\n // let indeterminate_bool1 = true;\n if (multiSelect && multiSelect.type === \"checkbox\") {\n let i = checkedArray.length;\n while(i--){\n if(checkedArray[i]){\n indeterminate_bool = true;\n break;\n }\n }\n let defaultColumns = [\n {\n title: (\n \n ),\n key: \"checkbox\",\n dataIndex: \"checkbox\",\n width: \"5%\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n columns = defaultColumns.concat(columns);\n }\n return columns;\n }\n render() {\n let columns = this.renderColumnsMultiSelect(columns12);\n return
;\n }\n}\nDemo12.defaultProps = defaultProps12;\n\n","desc":" 全选功能"},{"example":,"title":" 全选功能","code":"/**\n*\n* @title 全选功能\n* @description 全选功能\n*\n*/\n\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\nimport Checkbox from \"bee-checkbox\";\nimport multiTable from \"../../src/lib/multiSelectFunc.js\";\nimport sortTable from \"../../src/lib/sortFunc.js\";\n\nconst columns13 = [\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 data13 = [\n { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\nclass Demo13 extends Component {\n getCheckedObj = () => {\n console.log(this.state);\n };\n setCheckedOjb = (data) =>{\n console.log(data)\n }\n render() {\n let multiObj = {\n type: \"checkbox\",\n param: \"key\"\n };\n let ComplexTable = multiTable(sortTable(Table));\n return (\n
\n \n \n
\n );\n }\n}\n\n","desc":" 全选功能"},{"example":,"title":" 增删改表格","code":"/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格\n*\n*/\n\nimport Button from \"bee-button\";\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\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 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\nclass Demo2 extends React.Component {\n constructor(props) {\n super(props);\n this.columns = [\n {\n title: \"姓名\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"30%\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"年龄\",\n dataIndex: \"age\",\n key: \"age\"\n },\n {\n title: \"你懂的\",\n dataIndex: \"address\",\n key: \"address\"\n },\n {\n title: \"操作\",\n dataIndex: \"operation\",\n key: \"operation\",\n render: (text, record, index) => {\n return this.state.dataSource.length > 1 ? (\n \n \n \n ) : null;\n }\n }\n ];\n\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n age: \"18\",\n address: \"96, 77, 89\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n age: \"16\",\n address: \"90, 70, 80\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n age: \"17\",\n address: \"80, 60, 80\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n age: \"20\",\n address: \"120, 60, 90\"\n }\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 }\n}\n\n\n","desc":" 这是带有增删改功能的表格"},{"example":,"title":" 更灵活的表格","code":"/**\n*\n* @title 更灵活的表格\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\n\nimport Button from 'bee-button';\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\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","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 树形数据展示","code":"/**\n*\n* @title 树形数据展示\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\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\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\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","desc":" 固定列到表格的某侧"},{"example":,"title":" 固定表头","code":"/**\n*\n* @title 固定表头\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\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\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\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","desc":" 主表点击子表联动"},{"example":,"title":" 表格+分页","code":"/**\n*\n* @title 表格+分页\n* @description 点击分页联动表格\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\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","desc":" 点击分页联动表格"},{"example":,"title":" 表格+搜索","code":"/**\n*\n* @title 表格+搜索\n* @description 搜索刷新表格数据\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\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,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","desc":" 搜索刷新表格数据"}] class Demo extends Component { diff --git a/src/lib/multiSelectFunc.js b/src/lib/multiSelectFunc.js new file mode 100644 index 0000000..0bd9c2a --- /dev/null +++ b/src/lib/multiSelectFunc.js @@ -0,0 +1,149 @@ +import React, { Component } from "react"; +import Checkbox from "bee-checkbox"; +/** + * multiSelect={ + * type--默认值为checkbox + * param--可以设置返回的选中的数据属性；默认值：null； + * } + * getSelectedDataFunc--function，能获取到选中的数据 + * 使用全选时得注意，data中的key值一定要是唯一值 + */ +module.exports = function multiTable(Table) { + Array.prototype.indexOf = function(val) { + for (var i = 0; i < this.length; i++) { + if (this[i] == val) return i; + } + return -1; + }; + Array.prototype.remove = function(val) { + var index = this.indexOf(val); + if (index > -1) { + this.splice(index, 1); + } + }; + return class BookLoader extends Component { + constructor(props) { + super(props); + this.state = { + checkedAll: false, + checkedObj: {}, + selIds: [], + data: this.props.data + }; + } + onAllCheckChange = () => { + let self = this; + let listData = self.state.data.concat(); + let checkedObj = Object.assign({}, self.state.checkedObj); + let data = self.props.data; + let selIds = []; + let id = self.props.multiSelect.param; + for (var i = 0; i < data.length; i++) { + checkedObj[data[i]["key"]] = !self.state.checkedAll; + } + if (self.state.checkedAll) { + selIds = []; + } else { + for (var i = 0; i < listData.length; i++) { + if (id) { + selIds[i] = listData[i][id]; + } else { + selIds[i] = listData[i]; + } + } + } + self.setState({ + checkedAll: !self.state.checkedAll, + checkedObj: checkedObj, + selIds: selIds + }); + self.props.getSelectedDataFunc(selIds); + }; + onCheckboxChange = (text, record, index) => { + let self = this; + let allFlag = false; + let selIds = self.state.selIds; + let id = self.props.multiSelect.param + ? record[self.props.multiSelect.param] + : record; + let checkedObj = Object.assign({}, self.state.checkedObj); + let checkedArray = Object.keys(checkedObj); + if (checkedObj[record["key"]]) { + selIds.remove(id); + } else { + selIds.push(id); + } + checkedObj[record["key"]] = !checkedObj[record["key"]]; + for (var i = 0; i < checkedArray.length; i++) { + if (!checkedObj[checkedArray[i]]) { + allFlag = false; + break; + } else { + allFlag = true; + } + } + self.setState({ + checkedAll: allFlag, + checkedObj: checkedObj, + selIds: selIds + }); + self.props.getSelectedDataFunc(selIds); + }; + renderColumnsMultiSelect(columns) { + const { data } = this.state; + let checkedObj = Object.assign({}, this.state.checkedObj); + let checkedArray = Object.keys(checkedObj); + let { multiSelect } = this.props; + let select_column = {}; + let indeterminate_bool = false; + if (!multiSelect || !multiSelect.type) { + multiSelect = Object.assign({}, multiSelect, { type: "checkbox" }); + } + if (multiSelect && multiSelect.type === "checkbox") { + let i = checkedArray.length; + while (i--) { + if (checkedObj[checkedArray[i]]) { + indeterminate_bool = true; + break; + } + } + let defaultColumns = [ + { + title: ( + + ), + key: "checkbox", + dataIndex: "checkbox", + width: "5%", + render: (text, record, index) => { + return ( + + ); + } + } + ]; + columns = defaultColumns.concat(columns); + } + return columns; + } + render() { + let { data } = this.props; + let columns = this.renderColumnsMultiSelect(this.props.columns).concat(); + return
; + } + }; +}; diff --git a/src/lib/sortFunc.js b/src/lib/sortFunc.js new file mode 100644 index 0000000..835660a --- /dev/null +++ b/src/lib/sortFunc.js @@ -0,0 +1,100 @@ + +import React, { Component } from 'react'; +import Icon from 'bee-icon'; + +/** + * 参数：prefixCls，默认bee-table,用于设置图标的样式 + * @param {*} Table + */ +export default function sortTable(Table) { + return class Demo11 extends Component { + constructor(props) { + super(props); + this.state = { + sortOrder: "", + data: this.props.data + }; + } + 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 = ""; + } + 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.prefixCls || 'bee-table'; + 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(this.props.columns).concat(); + return ; + } + } +} \ No newline at end of file diff --git a/src/lib/util.js b/src/lib/util.js new file mode 100644 index 0000000..e69de29