From 06e0091561a790376982872a3bbf2a799fb3f211 Mon Sep 17 00:00:00 2001 From: huyueb <1062887235@qq.com> Date: Wed, 27 Sep 2017 16:15:45 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0=E6=97=A5=E6=9C=9F?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=89=88=E6=9C=AC=E5=92=8C=E6=8F=90=E5=8F=96?= =?UTF-8?q?dateRender=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/TableDemo.scss | 2 ++ demo/demolist/Demo15.js | 73 +++++++++++++++++++++++++------------- demo/index.js | 2 +- package.json | 2 +- src/Table.scss | 4 +-- src/render/DateRender.js | 29 ++++++++++++--- src/render/SelectRender.js | 9 +++-- 7 files changed, 83 insertions(+), 38 deletions(-) diff --git a/demo/TableDemo.scss b/demo/TableDemo.scss index 6853398..2db08f8 100644 --- a/demo/TableDemo.scss +++ b/demo/TableDemo.scss @@ -24,11 +24,13 @@ .editable-cell-text-wrapper { padding: 5px 24px 5px 5px; + height: 30px; } .editable-cell-icon, .editable-cell-icon-check { position: absolute; + top: 0; right: 0; width: 20px; cursor: pointer; diff --git a/demo/demolist/Demo15.js b/demo/demolist/Demo15.js index 18c8193..0f0e7f4 100644 --- a/demo/demolist/Demo15.js +++ b/demo/demolist/Demo15.js @@ -24,6 +24,7 @@ import MonthPicker, { WeekPicker, RangePicker } from "bee-datepicker"; const format = "YYYY-MM-DD"; const format2 = "YYYY-MM"; +const format3 = "YYYY-MM-DD HH:mm:ss"; const dateInputPlaceholder = "选择日期"; const dateInputPlaceholder2 = "选择年月"; @@ -37,25 +38,37 @@ class Demo15 extends React.Component { key: "0", name: "沉鱼", age: "y", - address: "96, 77, 89" + address: "96, 77, 89", + datepicker: "2017-06-12", + MonthPicker: "2017-02", + TimePicker: "2017-09-15 15:24:48" }, { key: "1", name: "落雁", age: "y", - address: "90, 70, 80" + address: "90, 70, 80", + datepicker: "2017-06-12", + MonthPicker: "2017-02", + TimePicker: "2017-09-15 15:24:48" }, { key: "2", name: "闭月", age: "n", - address: "80, 60, 80" + address: "80, 60, 80", + datepicker: "2017-06-12", + MonthPicker: "2017-02", + TimePicker: "2017-09-15 15:24:48" }, { key: "3", name: "羞花", age: "y", - address: "120, 60, 90" + address: "120, 60, 90", + datepicker: "2017-06-12", + MonthPicker: "2017-02", + TimePicker: "2017-09-15 15:24:48" } ], count: 4 @@ -109,16 +122,18 @@ class Demo15 extends React.Component { } }, { - title: "日期", + title: "年月日", dataIndex: "datepicker", key: "datepicker", width: "200px", - render: () => { + render: (text, record, index) => { return ( - ); @@ -129,9 +144,11 @@ class Demo15 extends React.Component { dataIndex: "MonthPicker", key: "MonthPicker", width: "200px", - render: () => { + render: (text, record, index) => { return ( - { - return ; + title: "日期", + dataIndex: "TimePicker", + key: "TimePicker", + render: (text, record, index) => { + return ( + + ); } } ]; @@ -168,6 +194,12 @@ class Demo15 extends React.Component { onSelectChange = value => { console.log(`selected ${value}`); }; + onDateChange = d => { + console.log(d); + }; + onDateSelect = d => { + console.log(d); + }; onDelete = index => { return () => { const dataSource = [...this.state.dataSource]; @@ -200,15 +232,6 @@ class Demo15 extends React.Component { ); }; - - onSelect = d => { - console.log(d); - }; - - onChange = d => { - console.log(d); - }; - render() { const { dataSource } = this.state; const columns = this.columns; diff --git a/demo/index.js b/demo/index.js index 3654d7d..033f53a 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 Demo13 = require("./demolist/Demo13");var Demo14 = require("./demolist/Demo14");var Demo15 = require("./demolist/Demo15");var Demo16 = require("./demolist/Demo16");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":"/**\r\n*\r\n* @title 简单表格\r\n* @description\r\n*\r\n*/\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns = [\r\n { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },\r\n { id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },\r\n { title: '年龄', dataIndex: 'c', key: 'c', width: 200 },\r\n {\r\n title: '操作', dataIndex: '', key: 'd', render() {\r\n return 一些操作;\r\n },\r\n },\r\n];\r\n\r\nconst data = [\r\n { a: '令狐冲', b: '男', c: 41, key: '1' },\r\n { a: '杨过', b: '男', c: 67, key: '2' },\r\n { a: '郭靖', b: '男', c: 25, key: '3' },\r\n];\r\n\r\nclass Demo1 extends Component {\r\n render () {\r\n return (\r\n
标题: 这是一个标题
}\r\n footer={currentData =>
表尾: 我是小尾巴
}\r\n />\r\n )\r\n }\r\n}\r\n\r\n\r\n\r\n","desc":""},{"example":,"title":" 无数据时显示","code":"/**\r\n*\r\n* @title 无数据时显示\r\n* @description 无数据时显示效果展示\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns10 = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"40%\"\r\n },\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: \"30%\"\r\n },\r\n {\r\n title: \"Address\",\r\n dataIndex: \"address\",\r\n key: \"address\"\r\n }\r\n ];\r\n \r\n const data10 = [\r\n \r\n ];\r\n\r\n const emptyFunc = () => 这里没有数据！\r\n \r\n class Demo10 extends Component {\r\n render() {\r\n return ;\r\n }\r\n }\r\n\r\n","desc":" 无数据时显示效果展示"},{"example":,"title":" 列排序","code":"/**\r\n*\r\n* @title 列排序\r\n* @description 列排序\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Icon from \"bee-icon\";\r\n\r\nconst columns11 = [\r\n {\r\n title: \"名字\",\r\n dataIndex: \"a\",\r\n key: \"a\",\r\n width: 100\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: 100\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n sorter: (a, b) => a.c - b.c\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"\",\r\n key: \"d\",\r\n render() {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\n\r\nconst data11 = [\r\n { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\n\r\nconst defaultProps11 = {\r\n prefixCls: \"bee-table\"\r\n};\r\nclass Demo11 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n sortOrder: \"\",\r\n data: data11\r\n };\r\n }\r\n toggleSortOrder=(order, column)=> {\r\n let { sortOrder, data, oldData } = this.state;\r\n let ascend_sort = function(key) {\r\n return function(a, b) {\r\n return a.key - b.key;\r\n };\r\n };\r\n let descend_sort = function(key) {\r\n return function(a, b) {\r\n return b.key - a.key;\r\n };\r\n };\r\n if (sortOrder === order) {\r\n // 切换为未排序状态\r\n order = \"\";\r\n }\r\n if (!oldData) {\r\n oldData = data.concat();\r\n }\r\n if (order === \"ascend\") {\r\n data = data.sort(function(a, b) {\r\n return column.sorter(a, b);\r\n });\r\n } else if (order === \"descend\") {\r\n data = data.sort(function(a, b) {\r\n return column.sorter(b, a);\r\n });\r\n } else {\r\n data = oldData.concat();\r\n }\r\n this.setState({\r\n sortOrder: order,\r\n data: data,\r\n oldData: oldData\r\n });\r\n }\r\n renderColumnsDropdown(columns) {\r\n const { sortOrder } = this.state;\r\n const { prefixCls } = this.props;\r\n\r\n return columns.map(originColumn => {\r\n let column = Object.assign({}, originColumn);\r\n let sortButton;\r\n if (column.sorter) {\r\n const isAscend = sortOrder === \"ascend\";\r\n const isDescend = sortOrder === \"descend\";\r\n sortButton = (\r\n
\r\n this.toggleSortOrder(\"ascend\", column)}\r\n >\r\n \r\n \r\n this.toggleSortOrder(\"descend\", column)}\r\n >\r\n \r\n \r\n
\r\n );\r\n }\r\n column.title = (\r\n \r\n {column.title}\r\n {sortButton}\r\n \r\n );\r\n return column;\r\n });\r\n }\r\n render() {\r\n let columns = this.renderColumnsDropdown(columns11);\r\n return
;\r\n }\r\n}\r\nDemo11.defaultProps = defaultProps11;\r\n\r\n\r\n","desc":" 列排序"},{"example":,"title":" 全选功能","code":"/**\r\n*\r\n* @title 全选功能\r\n* @description 全选功能\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Checkbox from \"bee-checkbox\";\r\n\r\nconst columns12 = [\r\n {\r\n title: \"名字\",\r\n dataIndex: \"a\",\r\n key: \"a\",\r\n width: 100\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: 100\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n sorter: (a, b) => a.c - b.c\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"\",\r\n key: \"d\",\r\n render() {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\n\r\nconst data12 = [\r\n { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\n\r\nconst defaultProps12 = {\r\n prefixCls: \"bee-table\",\r\n multiSelect: {\r\n type: \"checkbox\",\r\n param: \"key\"\r\n }\r\n};\r\nclass Demo12 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n checkedAll:false,\r\n checkedArray: [\r\n false,\r\n false,\r\n false,\r\n ],\r\n data: data12\r\n };\r\n }\r\n onAllCheckChange = () => {\r\n let self = this;\r\n let checkedArray = [];\r\n let listData = self.state.data.concat();\r\n let selIds = [];\r\n // let id = self.props.multiSelect.param;\r\n for (var i = 0; i < self.state.checkedArray.length; i++) {\r\n checkedArray[i] = !self.state.checkedAll;\r\n }\r\n // if (self.state.checkedAll) {\r\n // selIds = [];\r\n // } else {\r\n // for (var i = 0; i < listData.length; i++) {\r\n // selIds[i] = listData[i][id];\r\n // }\r\n // }\r\n self.setState({\r\n checkedAll: !self.state.checkedAll,\r\n checkedArray: checkedArray,\r\n // selIds: selIds\r\n });\r\n // self.props.onSelIds(selIds);\r\n };\r\n onCheckboxChange = (text, record, index) => {\r\n let self = this;\r\n let allFlag = false;\r\n // let selIds = self.state.selIds;\r\n // let id = self.props.postId;\r\n let checkedArray = self.state.checkedArray.concat();\r\n // if (self.state.checkedArray[index]) {\r\n // selIds.remove(record[id]);\r\n // } else {\r\n // selIds.push(record[id]);\r\n // }\r\n checkedArray[index] = !self.state.checkedArray[index];\r\n for (var i = 0; i < self.state.checkedArray.length; i++) {\r\n if (!checkedArray[i]) {\r\n allFlag = false;\r\n break;\r\n } else {\r\n allFlag = true;\r\n }\r\n }\r\n self.setState({\r\n checkedAll: allFlag,\r\n checkedArray: checkedArray,\r\n // selIds: selIds\r\n });\r\n // self.props.onSelIds(selIds);\r\n };\r\n renderColumnsMultiSelect(columns) {\r\n const { data,checkedArray } = this.state;\r\n const { multiSelect } = this.props;\r\n let select_column = {};\r\n let indeterminate_bool = false;\r\n // let indeterminate_bool1 = true;\r\n if (multiSelect && multiSelect.type === \"checkbox\") {\r\n let i = checkedArray.length;\r\n while(i--){\r\n if(checkedArray[i]){\r\n indeterminate_bool = true;\r\n break;\r\n }\r\n }\r\n let defaultColumns = [\r\n {\r\n title: (\r\n \r\n ),\r\n key: \"checkbox\",\r\n dataIndex: \"checkbox\",\r\n width: \"5%\",\r\n render: (text, record, index) => {\r\n return (\r\n \r\n );\r\n }\r\n }\r\n ];\r\n columns = defaultColumns.concat(columns);\r\n }\r\n return columns;\r\n }\r\n render() {\r\n let columns = this.renderColumnsMultiSelect(columns12);\r\n return
;\r\n }\r\n}\r\nDemo12.defaultProps = defaultProps12;\r\n\r\n","desc":" 全选功能"},{"example":,"title":" 列排序、全选功能、合计","code":"/**\r\n*\r\n* @title 列排序、全选功能、合计\r\n* @description 列排序、全选功能、合计\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\nimport Checkbox from \"bee-checkbox\";\r\nimport multiSelect from \"../../src/lib/multiSelect.js\";\r\nimport sort from \"../../src/lib/sort.js\";\r\nimport Sum from \"../../src/lib/sum.js\";\r\n\r\nconst columns13 = [\r\n {\r\n title: \"名字\",\r\n dataIndex: \"a\",\r\n key: \"a\",\r\n width: 100\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: 100\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n sorter: (a, b) => a.c - b.c\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"\",\r\n key: \"d\",\r\n render() {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\n\r\nconst data13 = [\r\n { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\nclass Demo13 extends Component {\r\n getSelectedDataFunc = (data) =>{\r\n console.log(data)\r\n }\r\n render() {\r\n let multiObj = {\r\n type: \"checkbox\",\r\n param: \"key\"\r\n };\r\n let ComplexTable = multiSelect(Sum(sort(Table)));\r\n return (\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n","desc":" 列排序、全选功能、合计"},{"example":,"title":" 合计表格","code":"/**\r\n*\r\n* @title 合计表格\r\n* @description\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\n\r\nconst columns14 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n heji: true,\r\n render(data) {\r\n return 一些操作;\r\n }\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n render(data) {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\nconst columns14_ = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n heji: true\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\"\r\n }\r\n];\r\n\r\nconst data14 = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" },\r\n { a: \"合计\", d: \"11\", key: \"31\" }\r\n];\r\n\r\nconst data14_ = [\r\n { a: \"郭靖\", b: \"男\", c: 25,d:11, key: \"3\" }\r\n];\r\n\r\nclass Demo14 extends Component {\r\n render() {\r\n return (\r\n
标题: 这是一个标题
}\r\n footer={currentData => (\r\n \r\n )}\r\n />\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":""},{"example":,"title":" edittype表格","code":"/**\r\n*\r\n* @title edittype表格\r\n* @description 这是带有增删改功能的表格\r\n*\r\n*/\r\n\r\nimport Button from \"bee-button\";\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\nimport Animate from \"bee-animate\";\r\nimport Icon from \"bee-icon\";\r\nimport Input from \"bee-form-control\";\r\nimport Checkbox from \"bee-checkbox\";\r\nimport Select from \"bee-select\";\r\nimport Popconfirm from \"bee-popconfirm\";\r\nimport InputRender from \"../../src/render/InputRender.js\";\r\nimport DateRender from \"../../src/render/DateRender.js\";\r\nimport SelectRender from \"../../src/render/SelectRender.js\";\r\n\r\n//日期控件引入\r\nimport DatePicker from \"bee-datepicker\";\r\nimport MonthPicker, { WeekPicker, RangePicker } from \"bee-datepicker\";\r\n\r\nconst format = \"YYYY-MM-DD\";\r\nconst format2 = \"YYYY-MM\";\r\n\r\nconst dateInputPlaceholder = \"选择日期\";\r\nconst dateInputPlaceholder2 = \"选择年月\";\r\n\r\nclass Demo15 extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n dataSource: [\r\n {\r\n key: \"0\",\r\n name: \"沉鱼\",\r\n age: \"y\",\r\n address: \"96, 77, 89\"\r\n },\r\n {\r\n key: \"1\",\r\n name: \"落雁\",\r\n age: \"y\",\r\n address: \"90, 70, 80\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"闭月\",\r\n age: \"n\",\r\n address: \"80, 60, 80\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"羞花\",\r\n age: \"y\",\r\n address: \"120, 60, 90\"\r\n }\r\n ],\r\n count: 4\r\n };\r\n this.columns = [\r\n {\r\n title: \"姓名\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"100px\",\r\n render: (text, record, index) => (\r\n \r\n )\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: \"100px\",\r\n render: (text, record, index) => (\r\n \r\n )\r\n },\r\n {\r\n title: \"你懂的\",\r\n dataIndex: \"address\",\r\n key: \"address\",\r\n width: \"200px\",\r\n render: (text, record, index) => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n },\r\n {\r\n title: \"日期\",\r\n dataIndex: \"datepicker\",\r\n key: \"datepicker\",\r\n width: \"200px\",\r\n render: () => {\r\n return (\r\n \r\n );\r\n }\r\n },\r\n {\r\n title: \"年月\",\r\n dataIndex: \"MonthPicker\",\r\n key: \"MonthPicker\",\r\n width: \"200px\",\r\n render: () => {\r\n return (\r\n \r\n );\r\n }\r\n },\r\n {\r\n title: \"周\",\r\n dataIndex: \"WeekPicker\",\r\n key: \"WeekPicker\",\r\n render: () => {\r\n return ;\r\n }\r\n }\r\n ];\r\n }\r\n\r\n onInputChange = (index, key) => {\r\n return value => {\r\n const dataSource = [...this.state.dataSource];\r\n dataSource[index][key] = value;\r\n this.setState({ dataSource });\r\n };\r\n };\r\n onCheckChange = (index, key) => {\r\n return value => {\r\n const dataSource = [...this.state.dataSource];\r\n dataSource[index][key] = value;\r\n this.setState({ dataSource });\r\n };\r\n };\r\n onSelectChange = value => {\r\n console.log(`selected ${value}`);\r\n };\r\n onDelete = index => {\r\n return () => {\r\n const dataSource = [...this.state.dataSource];\r\n dataSource.splice(index, 1);\r\n this.setState({ dataSource });\r\n };\r\n };\r\n handleAdd = () => {\r\n const { count, dataSource } = this.state;\r\n const newData = {\r\n key: count,\r\n name: `凤姐 ${count}`,\r\n age: 32,\r\n address: `100 100 100`\r\n };\r\n this.setState({\r\n dataSource: [...dataSource, newData],\r\n count: count + 1\r\n });\r\n };\r\n\r\n getBodyWrapper = body => {\r\n return (\r\n \r\n {body.props.children}\r\n \r\n );\r\n };\r\n\r\n onSelect = d => {\r\n console.log(d);\r\n };\r\n\r\n onChange = d => {\r\n console.log(d);\r\n };\r\n\r\n render() {\r\n const { dataSource } = this.state;\r\n const columns = this.columns;\r\n return (\r\n
\r\n \r\n 添加\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 这是带有增删改功能的表格"},{"example":,"title":" 合计test","code":"/**\r\n*\r\n* @title 合计test\r\n* @description\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\nimport Sum from \"../../src/lib/sum.js\";\r\n\r\nconst columns14 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n heji: true\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n render(data) {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\n\r\n//合计表头\r\n// const columns14_ = [\r\n// { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n// { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n// {\r\n// title: \"年龄\",\r\n// dataIndex: \"c\",\r\n// key: \"c\",\r\n// width: 200,\r\n// heji: true\r\n// },\r\n// {\r\n// title: \"操作\",\r\n// dataIndex: \"d\",\r\n// key: \"d\"\r\n// }\r\n// ];\r\n\r\nconst data14 = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" },\r\n];\r\n\r\n//合计数据\r\n// const data14_ = [\r\n// { a: \"郭靖\", b: \"男\", c: 25,d:11, key: \"3\" }\r\n// ];\r\n\r\nclass Demo16 extends Component {\r\n \r\n render() {\r\n //使用高阶组件\r\n let SumTable = Sum(Table);\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":""},{"example":,"title":" 增删改表格","code":"/**\r\n*\r\n* @title 增删改表格\r\n* @description 这是带有增删改功能的表格\r\n*\r\n*/\r\n\r\nimport Button from \"bee-button\";\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\nimport Animate from \"bee-animate\";\r\nimport Icon from \"bee-icon\";\r\nimport Input from \"bee-form-control\";\r\nimport Popconfirm from \"bee-popconfirm\";\r\n\r\nclass EditableCell extends React.Component {\r\n state = {\r\n value: this.props.value,\r\n editable: false\r\n };\r\n handleChange = e => {\r\n const value = e.target.value;\r\n this.setState({ value });\r\n };\r\n check = () => {\r\n this.setState({ editable: false });\r\n if (this.props.onChange) {\r\n this.props.onChange(this.state.value);\r\n }\r\n };\r\n edit = () => {\r\n this.setState({ editable: true });\r\n };\r\n handleKeydown = event => {\r\n console.log(event.keyCode);\r\n if (event.keyCode == 13) {\r\n this.check();\r\n }\r\n };\r\n render() {\r\n const { value, editable } = this.state;\r\n return (\r\n
\r\n {editable ? (\r\n
\r\n \r\n \r\n
\r\n ) : (\r\n
\r\n {value || \" \"}\r\n \r\n
\r\n )}\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass Demo2 extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.columns = [\r\n {\r\n title: \"姓名\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"30%\",\r\n render: (text, record, index) => (\r\n \r\n )\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"age\",\r\n key: \"age\"\r\n },\r\n {\r\n title: \"你懂的\",\r\n dataIndex: \"address\",\r\n key: \"address\"\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"operation\",\r\n key: \"operation\",\r\n render: (text, record, index) => {\r\n return this.state.dataSource.length > 1 ? (\r\n \r\n \r\n \r\n ) : null;\r\n }\r\n }\r\n ];\r\n\r\n this.state = {\r\n dataSource: [\r\n {\r\n key: \"0\",\r\n name: \"沉鱼\",\r\n age: \"18\",\r\n address: \"96, 77, 89\"\r\n },\r\n {\r\n key: \"1\",\r\n name: \"落雁\",\r\n age: \"16\",\r\n address: \"90, 70, 80\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"闭月\",\r\n age: \"17\",\r\n address: \"80, 60, 80\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"羞花\",\r\n age: \"20\",\r\n address: \"120, 60, 90\"\r\n }\r\n ],\r\n count: 4\r\n };\r\n }\r\n onCellChange = (index, key) => {\r\n return value => {\r\n const dataSource = [...this.state.dataSource];\r\n dataSource[index][key] = value;\r\n this.setState({ dataSource });\r\n };\r\n };\r\n onDelete = index => {\r\n return () => {\r\n const dataSource = [...this.state.dataSource];\r\n dataSource.splice(index, 1);\r\n this.setState({ dataSource });\r\n };\r\n };\r\n handleAdd = () => {\r\n const { count, dataSource } = this.state;\r\n const newData = {\r\n key: count,\r\n name: `凤姐 ${count}`,\r\n age: 32,\r\n address: `100 100 100`\r\n };\r\n this.setState({\r\n dataSource: [...dataSource, newData],\r\n count: count + 1\r\n });\r\n };\r\n\r\n getBodyWrapper = body => {\r\n return (\r\n \r\n {body.props.children}\r\n \r\n );\r\n };\r\n render() {\r\n const { dataSource } = this.state;\r\n const columns = this.columns;\r\n return (\r\n
\r\n \r\n 添加\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 这是带有增删改功能的表格"},{"example":,"title":" 更灵活的表格","code":"/**\r\n*\r\n* @title 更灵活的表格\r\n* @description 手写表格的头组件来达到更灵活的配置表格\r\n*\r\n*/\r\n\r\n\r\nimport Button from 'bee-button';\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst data3 = [\r\n { a: '北京', b: '北京', c: '250', d: 2, key: '1' },\r\n];\r\n\r\nclass Demo3 extends Component {\r\n render () {\r\n return (\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n {\r\n return (\r\n \r\n );\r\n }}\r\n />\r\n
\r\n )\r\n }\r\n}\r\n\r\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 树形数据展示","code":"/**\r\n*\r\n* @title 树形数据展示\r\n* @description 手写表格的头组件来达到更灵活的配置表格\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns4 = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"40%\"\r\n },\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: \"30%\"\r\n },\r\n {\r\n title: \"Address\",\r\n dataIndex: \"address\",\r\n key: \"address\"\r\n }\r\n];\r\n\r\nconst data4 = [\r\n {\r\n key: 1,\r\n name: \"John Brown sr.\",\r\n age: 60,\r\n address: \"New York No. 1 Lake Park\",\r\n children: [\r\n {\r\n key: 11,\r\n name: \"John Brown\",\r\n age: 42,\r\n address: \"New York No. 2 Lake Park\"\r\n },\r\n {\r\n key: 12,\r\n name: \"John Brown jr.\",\r\n age: 30,\r\n address: \"New York No. 3 Lake Park\",\r\n children: [\r\n {\r\n key: 121,\r\n name: \"Jimmy Brown\",\r\n age: 16,\r\n address: \"New York No. 3 Lake Park\"\r\n }\r\n ]\r\n },\r\n {\r\n key: 13,\r\n name: \"Jim Green sr.\",\r\n age: 72,\r\n address: \"London No. 1 Lake Park\",\r\n children: [\r\n {\r\n key: 131,\r\n name: \"Jim Green\",\r\n age: 42,\r\n address: \"London No. 2 Lake Park\",\r\n children: [\r\n {\r\n key: 1311,\r\n name: \"Jim Green jr.\",\r\n age: 25,\r\n address: \"London No. 3 Lake Park\"\r\n },\r\n {\r\n key: 1312,\r\n name: \"Jimmy Green sr.\",\r\n age: 18,\r\n address: \"London No. 4 Lake Park\"\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n key: 2,\r\n name: \"Joe Black\",\r\n age: 32,\r\n address: \"Sidney No. 1 Lake Park\"\r\n }\r\n];\r\nclass Demo4 extends Component {\r\n render() {\r\n return ;\r\n }\r\n}\r\n\r\n\r\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 固定列","code":"/**\r\n*\r\n* @title 固定列\r\n* @description 固定列到表格的某侧\r\n*\r\n*/\r\n\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\n\r\nconst columns5 = [\r\n {\r\n title: \"Full Name\",\r\n width: 100,\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n fixed: \"left\"\r\n },\r\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\r\n { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\r\n { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\r\n { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\r\n { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\r\n { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\r\n { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\r\n { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\r\n { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\r\n];\r\n\r\nconst data5 = [\r\n {\r\n key: \"1\",\r\n name: \"John Brown\",\r\n age: 32,\r\n address: \"New York Park\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"4\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n }\r\n];\r\n\r\nclass Demo5 extends Component {\r\n render() {\r\n return
;\r\n }\r\n}\r\n\r\n","desc":" 固定列到表格的某侧"},{"example":,"title":" 固定表头","code":"/**\r\n*\r\n* @title 固定表头\r\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns6 = [\r\n {\r\n title: \"Full Name\",\r\n width: 100,\r\n dataIndex: \"name\",\r\n key: \"name\"\r\n },\r\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\r\n { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\r\n { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\r\n { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\r\n { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\r\n { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\r\n { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\r\n { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\r\n { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\r\n];\r\n\r\nconst data6 = [\r\n {\r\n key: \"1\",\r\n name: \"John Brown\",\r\n age: 32,\r\n address: \"New York Park\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"4\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },{\r\n key: \"11\",\r\n name: \"John Brown\",\r\n age: 32,\r\n address: \"New York Park\"\r\n },\r\n {\r\n key: \"12\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"13\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"14\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n }\r\n];\r\n\r\nclass Demo6 extends Component {\r\n render() {\r\n return
;\r\n }\r\n}\r\n\r\n","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。"},{"example":,"title":" 主子表","code":"/**\r\n*\r\n* @title 主子表\r\n* @description 主表点击子表联动\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\n\r\nconst columns7 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\" },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\" },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\" },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"\",\r\n key: \"d\",\r\n render() {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\n\r\nconst data7 = [\r\n { a: \"令狐冲\", b: \"01班\", c: \"文学系\", key: \"1\" },\r\n { a: \"杨过\", b: \"01班\", c: \"外语系\", key: \"2\" },\r\n { a: \"郭靖\", b: \"02班\", c: \"美术系\", key: \"3\" }\r\n];\r\n\r\nconst columns7_1 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\" },\r\n { id: \"123\", title: \"班级\", dataIndex: \"b\", key: \"b\" },\r\n { title: \"系别\", dataIndex: \"c\", key: \"c\" }\r\n];\r\n\r\nclass Demo7 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n children_data: []\r\n };\r\n }\r\n rowclick = (record, index) => {\r\n console.log(record);\r\n console.log(index);\r\n if (record.a === \"令狐冲\") {\r\n this.setState({\r\n children_data: [{ a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" }]\r\n });\r\n } else if (record.a === \"杨过\") {\r\n this.setState({\r\n children_data: [{ a: \"杨过\", b: \"男\", c: 67, key: \"2\" }]\r\n });\r\n } else if (record.a === \"郭靖\") {\r\n this.setState({\r\n children_data: [{ a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }]\r\n });\r\n }\r\n };\r\n render() {\r\n return (\r\n
\r\n
标题: 我是主表
}\r\n />\r\n
标题: 我是子表
}\r\n />\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 主表点击子表联动"},{"example":,"title":" 表格+分页","code":"/**\r\n*\r\n* @title 表格+分页\r\n* @description 点击分页联动表格\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Pagination from \"bee-pagination\";\r\n\r\n\r\nconst columns8 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"\",\r\n key: \"d\",\r\n render() {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\n\r\nclass Demo8 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data8: [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n ],\r\n activePage: 1\r\n };\r\n }\r\n handleSelect(eventKey) {\r\n if(eventKey === 1){\r\n this.setState({\r\n data8: [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n ],\r\n activePage: eventKey\r\n });\r\n }else{\r\n this.setState({\r\n data8: [\r\n { a: \"芙蓉姐姐\", b: \"女\", c: 23, key: \"1\" }\r\n ],\r\n activePage: eventKey\r\n });\r\n }\r\n \r\n }\r\n render() {\r\n return (\r\n
\r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\n","desc":" 点击分页联动表格"},{"example":,"title":" 表格+搜索","code":"/**\r\n*\r\n* @title 表格+搜索\r\n* @description 搜索刷新表格数据\r\n*\r\n*/\r\n\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Icon from \"bee-icon\";\r\nimport InputGroup from 'bee-input-group';\r\nimport FormControl from 'bee-form-control';\r\n\r\n\r\nclass Search extends Component {\r\n state = {\r\n searchValue: \"\",\r\n empty: false\r\n };\r\n\r\n /**\r\n * 搜索\r\n */\r\n handleSearch = () => {\r\n let { onSearch,handleToChange } = this.props;\r\n handleToChange && handleToChange();\r\n onSearch && onSearch(this.state.searchValue);\r\n };\r\n\r\n /**\r\n * 捕获回车\r\n * @param e\r\n */\r\n handleKeyDown = e => {\r\n if (e.keyCode === 13) {\r\n this.handleSearch();\r\n }\r\n };\r\n\r\n /**\r\n * 输入框改变\r\n * @param e\r\n */\r\n handleChange = e => {\r\n this.setState({\r\n searchValue: e.target.value\r\n });\r\n };\r\n\r\n /**\r\n * 清空输入框\r\n */\r\n emptySearch = () => {\r\n let { onEmpty } = this.props;\r\n this.setState({\r\n searchValue: \"\",\r\n empty: false\r\n });\r\n onEmpty && onEmpty();\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.state.empty\r\n ? \r\n : null}\r\n\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst columns9 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"\",\r\n key: \"d\",\r\n render() {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\n\r\nclass Demo9 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n ]\r\n };\r\n }\r\n handleSearchToTable=()=>{\r\n this.setState({\r\n data: [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" }\r\n ]\r\n })\r\n }\r\n render() {\r\n return (\r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\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 Demo14 = require("./demolist/Demo14");var Demo15 = require("./demolist/Demo15");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 multiSelect from \"../../src/lib/multiSelect.js\";\nimport sort from \"../../src/lib/sort.js\";\nimport Sum from \"../../src/lib/sum.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 getSelectedDataFunc = (data) =>{\n console.log(data)\n }\n render() {\n let multiObj = {\n type: \"checkbox\",\n param: \"key\"\n };\n let ComplexTable = multiSelect(Sum(sort(Table)));\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 Table from \"../../src\";\n\nconst columns14 = [\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n heji: true,\n render(data) {\n return 一些操作;\n }\n },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n render(data) {\n return 一些操作;\n }\n }\n];\nconst columns14_ = [\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n heji: true\n },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data14 = [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" },\n { a: \"合计\", d: \"11\", key: \"31\" }\n];\n\nconst data14_ = [\n { a: \"郭靖\", b: \"男\", c: 25,d:11, key: \"3\" }\n];\n\nclass Demo14 extends Component {\n render() {\n return (\n
标题: 这是一个标题
}\n footer={currentData => (\n \n )}\n />\n );\n }\n}\n\n\n","desc":""},{"example":,"title":" edittype表格","code":"/**\n*\n* @title edittype表格\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 Checkbox from \"bee-checkbox\";\nimport Select from \"bee-select\";\nimport Popconfirm from \"bee-popconfirm\";\nimport InputRender from \"../../src/render/InputRender.js\";\nimport DateRender from \"../../src/render/DateRender.js\";\nimport SelectRender from \"../../src/render/SelectRender.js\";\n\n//日期控件引入\nimport DatePicker from \"bee-datepicker\";\nimport MonthPicker, { WeekPicker, RangePicker } from \"bee-datepicker\";\n\nconst format = \"YYYY-MM-DD\";\nconst format2 = \"YYYY-MM\";\nconst format3 = \"YYYY-MM-DD HH:mm:ss\";\n\nconst dateInputPlaceholder = \"选择日期\";\nconst dateInputPlaceholder2 = \"选择年月\";\n\nclass Demo15 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n age: \"y\",\n address: \"96, 77, 89\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n TimePicker: \"2017-09-15 15:24:48\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n age: \"y\",\n address: \"90, 70, 80\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n TimePicker: \"2017-09-15 15:24:48\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n age: \"n\",\n address: \"80, 60, 80\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n TimePicker: \"2017-09-15 15:24:48\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n age: \"y\",\n address: \"120, 60, 90\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n TimePicker: \"2017-09-15 15:24:48\"\n }\n ],\n count: 4\n };\n this.columns = [\n {\n title: \"姓名\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"100px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"年龄\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"100px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"你懂的\",\n dataIndex: \"address\",\n key: \"address\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n \n \n \n \n \n );\n }\n },\n {\n title: \"年月日\",\n dataIndex: \"datepicker\",\n key: \"datepicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n },\n {\n title: \"年月\",\n dataIndex: \"MonthPicker\",\n key: \"MonthPicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n },\n {\n title: \"日期\",\n dataIndex: \"TimePicker\",\n key: \"TimePicker\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n }\n\n onInputChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onCheckChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onSelectChange = value => {\n console.log(`selected ${value}`);\n };\n onDateChange = d => {\n console.log(d);\n };\n onDateSelect = d => {\n console.log(d);\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\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\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\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: \"01班\", c: \"文学系\", key: \"1\" },\n { a: \"杨过\", b: \"01班\", c: \"外语系\", key: \"2\" },\n { a: \"郭靖\", b: \"02班\", c: \"美术系\", 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: [{ a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" }]\n });\n } else if (record.a === \"杨过\") {\n this.setState({\n children_data: [{ a: \"杨过\", b: \"男\", c: 67, key: \"2\" }]\n });\n } else if (record.a === \"郭靖\") {\n this.setState({\n children_data: [{ a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }]\n });\n }\n };\n render() {\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 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/package.json b/package.json index 7009dd5..a3afec5 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "bee-animate": "latest", "bee-button": "latest", "bee-checkbox": "^0.2.4", - "bee-datepicker": "^0.1.3", + "bee-datepicker": "^0.1.7", "bee-form-control": "^0.1.8", "bee-icon": "0.0.5", "bee-input-group": "^0.1.12", diff --git a/src/Table.scss b/src/Table.scss index 5f79da1..709b4ff 100644 --- a/src/Table.scss +++ b/src/Table.scss @@ -93,8 +93,8 @@ $table-move-in-color: $bg-color-base; } &-footer { - padding: $vertical-padding $horizontal-padding; - border-bottom: 1px solid $table-border-color; + // padding: $vertical-padding $horizontal-padding; + // border-bottom: 1px solid $table-border-color; } &-placeholder { diff --git a/src/render/DateRender.js b/src/render/DateRender.js index fb410b9..53c9461 100644 --- a/src/render/DateRender.js +++ b/src/render/DateRender.js @@ -1,6 +1,7 @@ import React, { Component } from "react"; import Icon from "bee-icon"; import DatePicker from "bee-datepicker"; +import moment from "moment"; export default class DateRender extends Component { state = { @@ -8,9 +9,15 @@ export default class DateRender extends Component { editable: false }; handleChange = e => { - debugger; - const value = e.target.value; + let { format } = this.props || "YYYY-MM-DD"; + const value = e.format(format); this.setState({ value }); + if (this.props.onChange) { + this.props.onChange(this.state.value); + } + setTimeout(() => { + this.setState({ editable: false }); + }, 0); }; check = () => { this.setState({ editable: false }); @@ -31,14 +38,28 @@ export default class DateRender extends Component { const { value, editable } = this.state; let { isclickTrigger } = this.props; let cellContent = ""; + let date_value = moment(value); if (editable) { cellContent = isclickTrigger ? (
- + +
) : (
- + { const value = e; - let self = this; - if (self.props.onChange) { - self.props.onChange(value); + if (this.props.onChange) { + this.props.onChange(value); } this.setState({ value: value }); - setTimeout(function() { - self.setState({ editable: false }); + setTimeout(()=> { + this.setState({ editable: false }); }, 0); }; check = () => {