diff --git a/demo/demolist/Demo15.js b/demo/demolist/Demo15.js
index 6195d7b..18c8193 100644
--- a/demo/demolist/Demo15.js
+++ b/demo/demolist/Demo15.js
@@ -12,19 +12,21 @@ import Animate from "bee-animate";
import Icon from "bee-icon";
import Input from "bee-form-control";
import Checkbox from "bee-checkbox";
-import Select from 'bee-select';
+import Select from "bee-select";
import Popconfirm from "bee-popconfirm";
import InputRender from "../../src/render/InputRender.js";
+import DateRender from "../../src/render/DateRender.js";
+import SelectRender from "../../src/render/SelectRender.js";
//日期控件引入
-import DatePicker from 'bee-datepicker';
-import MonthPicker,{ WeekPicker, RangePicker } from 'bee-datepicker';
+import DatePicker from "bee-datepicker";
+import MonthPicker, { WeekPicker, RangePicker } from "bee-datepicker";
-const format = 'YYYY-MM-DD';
-const format2 = 'YYYY-MM';
+const format = "YYYY-MM-DD";
+const format2 = "YYYY-MM";
-const dateInputPlaceholder = '选择日期';
-const dateInputPlaceholder2 = '选择年月';
+const dateInputPlaceholder = "选择日期";
+const dateInputPlaceholder2 = "选择年月";
class Demo15 extends React.Component {
constructor(props) {
@@ -63,12 +65,12 @@ class Demo15 extends React.Component {
title: "姓名",
dataIndex: "name",
key: "name",
- width: "10%",
+ width: "100px",
render: (text, record, index) => (
<InputRender
value={text}
isclickTrigger={true}
- onChange={this.onCellChange(index, "name")}
+ onChange={this.onInputChange(index, "name")}
/>
)
},
@@ -76,7 +78,7 @@ class Demo15 extends React.Component {
title: "年龄",
dataIndex: "age",
key: "age",
- width: "10%",
+ width: "100px",
render: (text, record, index) => (
<Checkbox
checked={record.age}
@@ -88,13 +90,13 @@ class Demo15 extends React.Component {
title: "你懂的",
dataIndex: "address",
key: "address",
- width: "10%",
+ width: "200px",
render: (text, record, index) => {
return (
- <Select
- defaultValue="lucy"
- style={{ width: 100, marginRight: 6 }}
- onChange={this.handleChange}
+ <SelectRender
+ isclickTrigger={true}
+ value="lucy"
+ onChange={this.onSelectChange}
>
<Option value="jack">boyuzhou</Option>
<Option value="lucy">renhualiu</Option>
@@ -102,69 +104,59 @@ class Demo15 extends React.Component {
Disabled
</Option>
<Option value="yiminghe">yuzhao</Option>
- </Select>
+ </SelectRender>
);
}
},
- { title: '日期', dataIndex: 'datepicker', key: 'datepicker', width: "10%",
- render:()=>{
- return(
- <DatePicker
+ {
+ title: "日期",
+ dataIndex: "datepicker",
+ key: "datepicker",
+ width: "200px",
+ render: () => {
+ return (
+ <DatePicker
format={format}
-
onSelect={this.onSelect}
-
onChange={this.onChange}
-
- placeholder = {dateInputPlaceholder}>
- </DatePicker>
- )
+ placeholder={dateInputPlaceholder}
+ />
+ );
}
},
- { title: '年月', dataIndex: 'MonthPicker', key: 'MonthPicker', width: "10%",
- render:()=>{
- return(
- <MonthPicker
+ {
+ title: "年月",
+ dataIndex: "MonthPicker",
+ key: "MonthPicker",
+ width: "200px",
+ render: () => {
+ return (
+ <MonthPicker
format={format2}
-
onSelect={this.onSelect}
-
onChange={this.onChange}
-
- placeholder = {dateInputPlaceholder2}>
- </MonthPicker>
- )
+ placeholder={dateInputPlaceholder2}
+ />
+ );
}
},
- { title: '周', dataIndex: 'WeekPicker', key: 'WeekPicker', width: "10%",
- render:()=>{
- return(
- <WeekPicker placeholder="选择周"/>
- )
- }
- },
- { title: '日期范围', dataIndex: 'RangePicker', key: 'RangePicker', width: "10%",
- render:()=>{
- return(
- <RangePicker
-
- format={format}
-
- onSelect={this.onSelect}
-
- onChange={this.onChange}
-
- placeholder={'选择年月'}
-
- />
- )
+ {
+ title: "周",
+ dataIndex: "WeekPicker",
+ key: "WeekPicker",
+ render: () => {
+ return <WeekPicker placeholder="选择周" />;
}
}
-
];
}
- handleChange = value => {
- console.log(`selected ${value}`);
+
+ onInputChange = (index, key) => {
+ return value => {
+ const dataSource = [...this.state.dataSource];
+ dataSource[index][key] = value;
+ this.setState({ dataSource });
+ };
};
onCheckChange = (index, key) => {
return value => {
@@ -173,12 +165,8 @@ class Demo15 extends React.Component {
this.setState({ dataSource });
};
};
- onCellChange = (index, key) => {
- return value => {
- const dataSource = [...this.state.dataSource];
- dataSource[index][key] = value;
- this.setState({ dataSource });
- };
+ onSelectChange = value => {
+ console.log(`selected ${value}`);
};
onDelete = index => {
return () => {
@@ -212,13 +200,13 @@ class Demo15 extends React.Component {
</Animate>
);
};
-
- onSelect = (d) =>{
- console.log(d)
+
+ onSelect = d => {
+ console.log(d);
};
- onChange = (d) => {
- console.log(d)
+ onChange = d => {
+ console.log(d);
};
render() {
diff --git a/demo/demolist/Demo7.js b/demo/demolist/Demo7.js
index 163ea6a..197db6a 100644
--- a/demo/demolist/Demo7.js
+++ b/demo/demolist/Demo7.js
@@ -5,16 +5,13 @@
*
*/
-
-import React, { Component } from 'react';
-import Table from '../../src';
-
-
+import React, { Component } from "react";
+import Table from "../../src";
const columns7 = [
- { title: "用户名", dataIndex: "a", key: "a"},
- { id: "123", title: "性别", dataIndex: "b", key: "b"},
- { title: "年龄", dataIndex: "c", key: "c"},
+ { title: "用户名", dataIndex: "a", key: "a" },
+ { id: "123", title: "性别", dataIndex: "b", key: "b" },
+ { title: "年龄", dataIndex: "c", key: "c" },
{
title: "操作",
dataIndex: "",
@@ -26,47 +23,41 @@ const columns7 = [
];
const data7 = [
- { a: "令狐冲", b: "男", c: 41, key: "1" },
- { a: "杨过", b: "男", c: 67, key: "2" },
- { a: "郭靖", b: "男", c: 25, key: "3" }
+ { a: "令狐冲", b: "01班", c: "文学系", key: "1" },
+ { a: "杨过", b: "01班", c: "外语系", key: "2" },
+ { a: "郭靖", b: "02班", c: "美术系", key: "3" }
];
const columns7_1 = [
- { title: "用户名", dataIndex: "a", key: "a"},
- { id: "123", title: "班级", dataIndex: "b", key: "b"},
- { title: "系别", dataIndex: "c", key: "c"}
+ { title: "用户名", dataIndex: "a", key: "a" },
+ { id: "123", title: "班级", dataIndex: "b", key: "b" },
+ { title: "系别", dataIndex: "c", key: "c" }
];
class Demo7 extends Component {
- constructor(props){
+ constructor(props) {
super(props);
this.state = {
- children_data : []
- }
+ children_data: []
+ };
}
rowclick = (record, index) => {
- console.log(record)
- console.log(index)
- if(record.a === '令狐冲'){
+ console.log(record);
+ console.log(index);
+ if (record.a === "令狐冲") {
this.setState({
- children_data: [
- { a: "令狐冲", b: "01班", c: '文学系', key: "1" },
- ]
- })
- }else if(record.a === '杨过'){
+ children_data: [{ a: "令狐冲", b: "男", c: 41, key: "1" }]
+ });
+ } else if (record.a === "杨过") {
this.setState({
- children_data: [
- { a: "杨过", b: "01班", c: '外语系', key: "2" },
- ]
- })
- }else if(record.a === '郭靖'){
+ children_data: [{ a: "杨过", b: "男", c: 67, key: "2" }]
+ });
+ } else if (record.a === "郭靖") {
this.setState({
- children_data: [
- { a: "郭靖", b: "02班", c: '美术系', key: "3" }
- ]
- })
+ children_data: [{ a: "郭靖", b: "男", c: 25, key: "3" }]
+ });
}
- }
+ };
render() {
return (
<div>
@@ -86,4 +77,4 @@ class Demo7 extends Component {
}
}
-export default Demo7;
\ No newline at end of file
+export default Demo7;
diff --git a/demo/index.js b/demo/index.js
deleted file mode 100644
index 2e01d5e..0000000
--- a/demo/index.js
+++ /dev/null
@@ -1,78 +0,0 @@
-
-import { Con, Row, Col } from 'bee-layout';
-import { Panel } from 'bee-panel';
-import Button from 'bee-button';
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-
-
-const CARET = <i className="uf uf-arrow-down"></i>;
-
-const CARETUP = <i className="uf uf-arrow-up"></i>;
-
-
-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":<Demo1 />,"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 <a href=\"#\">一些操作</a>;\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 <Table\r\n columns={columns}\r\n data={data}\r\n title={currentData => <div>标题: 这是一个标题</div>}\r\n footer={currentData => <div>表尾: 我是小尾巴</div>}\r\n />\r\n )\r\n }\r\n}\r\n\r\n\r\n\r\n","desc":""},{"example":<Demo10 />,"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 = () => <span>这里没有数据！</span>\r\n \r\n class Demo10 extends Component {\r\n render() {\r\n return <Table columns={columns10} data={data10} emptyText={emptyFunc} />;\r\n }\r\n }\r\n\r\n","desc":" 无数据时显示效果展示"},{"example":<Demo11 />,"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 <a href=\"#\">一些操作</a>;\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 <div className={`${prefixCls}-column-sorter`}>\r\n <span\r\n className={`${prefixCls}-column-sorter-up ${isAscend\r\n ? \"on\"\r\n : \"off\"}`}\r\n title=\"↑\"\r\n onClick={() => this.toggleSortOrder(\"ascend\", column)}\r\n >\r\n <Icon type=\"uf-triangle-up\" />\r\n </span>\r\n <span\r\n className={`${prefixCls}-column-sorter-down ${isDescend\r\n ? \"on\"\r\n : \"off\"}`}\r\n title=\"↓\"\r\n onClick={() => this.toggleSortOrder(\"descend\", column)}\r\n >\r\n <Icon type=\"uf-triangle-down\" />\r\n </span>\r\n </div>\r\n );\r\n }\r\n column.title = (\r\n <span>\r\n {column.title}\r\n {sortButton}\r\n </span>\r\n );\r\n return column;\r\n });\r\n }\r\n render() {\r\n let columns = this.renderColumnsDropdown(columns11);\r\n return <Table columns={columns} data={this.state.data} />;\r\n }\r\n}\r\nDemo11.defaultProps = defaultProps11;\r\n\r\n\r\n","desc":" 列排序"},{"example":<Demo12 />,"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 <a href=\"#\">一些操作</a>;\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 <Checkbox\r\n className=\"table-checkbox\"\r\n checked={this.state.checkedAll}\r\n indeterminate={indeterminate_bool&&!this.state.checkedAll}\r\n onChange={this.onAllCheckChange}\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 <Checkbox\r\n className=\"table-checkbox\"\r\n checked={this.state.checkedArray[index]}\r\n onChange={this.onCheckboxChange.bind(this, text, record, index)}\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 <Table columns={columns} data={data12} />;\r\n }\r\n}\r\nDemo12.defaultProps = defaultProps12;\r\n\r\n","desc":" 全选功能"},{"example":<Demo13 />,"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 <a href=\"#\">一些操作</a>;\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 <div>\r\n <ComplexTable\r\n columns={columns13}\r\n data={data13}\r\n multiSelect={multiObj}\r\n getSelectedDataFunc={this.getSelectedDataFunc}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\n","desc":" 列排序、全选功能、合计"},{"example":<Demo14 />,"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 <a href=\"#\">一些操作</a>;\r\n }\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n render(data) {\r\n return <a href=\"#\">一些操作</a>;\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 <Table\r\n columns={columns14}\r\n data={data14}\r\n heji={true}\r\n title={currentData => <div>标题: 这是一个标题</div>}\r\n footer={currentData => (\r\n <Table\r\n showHeader={false}\r\n columns={columns14_}\r\n data={data14_}\r\n heji={true}\r\n />\r\n )}\r\n />\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":""},{"example":<Demo15 />,"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\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: \"10%\",\r\n render: (text, record, index) => (\r\n <InputRender\r\n value={text}\r\n isclickTrigger={true}\r\n onChange={this.onCellChange(index, \"name\")}\r\n />\r\n )\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: \"10%\",\r\n render: (text, record, index) => (\r\n <Checkbox\r\n checked={record.age}\r\n onChange={this.onCheckChange(index, \"age\")}\r\n />\r\n )\r\n },\r\n {\r\n title: \"你懂的\",\r\n dataIndex: \"address\",\r\n key: \"address\",\r\n width: \"10%\",\r\n render: (text, record, index) => {\r\n return (\r\n <Select\r\n defaultValue=\"lucy\"\r\n style={{ width: 100, marginRight: 6 }}\r\n onChange={this.handleChange}\r\n >\r\n <Option value=\"jack\">boyuzhou</Option>\r\n <Option value=\"lucy\">renhualiu</Option>\r\n <Option value=\"disabled\" disabled>\r\n Disabled\r\n </Option>\r\n <Option value=\"yiminghe\">yuzhao</Option>\r\n </Select>\r\n );\r\n }\r\n },\r\n { title: '日期', dataIndex: 'datepicker', key: 'datepicker', width: \"10%\",\r\n render:()=>{\r\n return(\r\n <DatePicker\r\n format={format}\r\n \r\n onSelect={this.onSelect}\r\n \r\n onChange={this.onChange}\r\n \r\n placeholder = {dateInputPlaceholder}>\r\n </DatePicker>\r\n ) \r\n }\r\n },\r\n { title: '年月', dataIndex: 'MonthPicker', key: 'MonthPicker', width: \"10%\",\r\n render:()=>{\r\n return(\r\n <MonthPicker\r\n format={format2}\r\n \r\n onSelect={this.onSelect}\r\n \r\n onChange={this.onChange}\r\n \r\n placeholder = {dateInputPlaceholder2}>\r\n </MonthPicker>\r\n ) \r\n }\r\n },\r\n { title: '周', dataIndex: 'WeekPicker', key: 'WeekPicker', width: \"10%\",\r\n render:()=>{\r\n return(\r\n <WeekPicker placeholder=\"选择周\"/>\r\n ) \r\n }\r\n },\r\n { title: '日期范围', dataIndex: 'RangePicker', key: 'RangePicker', width: \"10%\",\r\n render:()=>{\r\n return(\r\n <RangePicker\r\n \r\n format={format}\r\n\r\n onSelect={this.onSelect}\r\n\r\n onChange={this.onChange}\r\n\r\n placeholder={'选择年月'}\r\n\r\n />\r\n ) \r\n }\r\n }\r\n \r\n ];\r\n }\r\n handleChange = value => {\r\n console.log(`selected ${value}`);\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 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 <Animate\r\n transitionName=\"move\"\r\n component=\"tbody\"\r\n className={body.props.className}\r\n >\r\n {body.props.children}\r\n </Animate>\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 <div>\r\n <Button\r\n className=\"editable-add-btn\"\r\n type=\"ghost\"\r\n onClick={this.handleAdd}\r\n >\r\n 添加\r\n </Button>\r\n <Table\r\n bordered\r\n data={dataSource}\r\n columns={columns}\r\n getBodyWrapper={this.getBodyWrapper}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 这是带有增删改功能的表格"},{"example":<Demo16 />,"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 <a href=\"#\">一些操作</a>;\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 <SumTable\r\n columns={columns14}\r\n data={data14}\r\n title={\"我是表头\"}\r\n />\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":""},{"example":<Demo2 />,"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 <div className=\"editable-cell\">\r\n {editable ? (\r\n <div className=\"editable-cell-input-wrapper\">\r\n <Input\r\n value={value}\r\n onChange={this.handleChange}\r\n onKeyDown={this.handleKeydown}\r\n />\r\n <Icon\r\n type=\"uf-correct\"\r\n className=\"editable-cell-icon-check\"\r\n onClick={this.check}\r\n />\r\n </div>\r\n ) : (\r\n <div className=\"editable-cell-text-wrapper\">\r\n {value || \" \"}\r\n <Icon\r\n type=\"uf-pencil\"\r\n className=\"editable-cell-icon\"\r\n onClick={this.edit}\r\n />\r\n </div>\r\n )}\r\n </div>\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 <EditableCell\r\n value={text}\r\n onChange={this.onCellChange(index, \"name\")}\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 <Popconfirm content=\"确认删除?\" id=\"aa\" onClose={this.onDelete(index)}>\r\n <Icon type=\"uf-del\" />\r\n </Popconfirm>\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 <Animate\r\n transitionName=\"move\"\r\n component=\"tbody\"\r\n className={body.props.className}\r\n >\r\n {body.props.children}\r\n </Animate>\r\n );\r\n };\r\n render() {\r\n const { dataSource } = this.state;\r\n const columns = this.columns;\r\n return (\r\n <div>\r\n <Button\r\n className=\"editable-add-btn\"\r\n type=\"ghost\"\r\n onClick={this.handleAdd}\r\n >\r\n 添加\r\n </Button>\r\n <Table\r\n bordered\r\n data={dataSource}\r\n columns={columns}\r\n getBodyWrapper={this.getBodyWrapper}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 这是带有增删改功能的表格"},{"example":<Demo3 />,"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 <Table data={data3}>\r\n <ColumnGroup title=\"地址\">\r\n <Column\r\n title=\"省\"\r\n dataIndex=\"a\"\r\n key=\"a\"\r\n width={100}\r\n />\r\n <Column\r\n id=\"123\"\r\n title=\"市\"\r\n dataIndex=\"b\"\r\n key=\"b\"\r\n width={100}\r\n />\r\n </ColumnGroup>\r\n <Column\r\n title=\"数量\"\r\n dataIndex=\"c\"\r\n key=\"c\"\r\n width={200}\r\n />\r\n <Column\r\n title=\"操作\"\r\n dataIndex=\"\"\r\n key=\"d\"\r\n render={(text, record, index) => {\r\n return (\r\n <Button size=\"sm\" colors=\"info\" style={{ minWidth: 50 }}>增加</Button>\r\n );\r\n }}\r\n />\r\n </Table>\r\n )\r\n }\r\n}\r\n\r\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":<Demo4 />,"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 <Table columns={columns4} data={data4} />;\r\n }\r\n}\r\n\r\n\r\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":<Demo5 />,"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 <Table columns={columns5} data={data5} scroll={{ x: 1500 }} />;\r\n }\r\n}\r\n\r\n","desc":" 固定列到表格的某侧"},{"example":<Demo6 />,"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 <Table columns={columns6} data={data6} scroll={{ y: 150 }} />;\r\n }\r\n}\r\n\r\n","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。"},{"example":<Demo7 />,"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\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 <a href=\"#\">一些操作</a>;\r\n }\r\n }\r\n];\r\n\r\nconst data7 = [\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\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: [\r\n { a: \"令狐冲\", b: \"01班\", c: '文学系', key: \"1\" },\r\n ]\r\n })\r\n }else if(record.a === '杨过'){\r\n this.setState({\r\n children_data: [\r\n { a: \"杨过\", b: \"01班\", c: '外语系', key: \"2\" },\r\n ]\r\n })\r\n }else if(record.a === '郭靖'){\r\n this.setState({\r\n children_data: [\r\n { a: \"郭靖\", b: \"02班\", c: '美术系', key: \"3\" }\r\n ]\r\n })\r\n }\r\n }\r\n render() {\r\n return (\r\n <div>\r\n <Table\r\n columns={columns7_1}\r\n data={data7}\r\n onRowClick={this.rowclick}\r\n title={currentData => <div>标题: 我是主表</div>}\r\n />\r\n <Table\r\n columns={columns7}\r\n data={this.state.children_data}\r\n title={currentData => <div>标题: 我是子表</div>}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\n","desc":" 主表点击子表联动"},{"example":<Demo8 />,"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 <a href=\"#\">一些操作</a>;\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 <div>\r\n <Table columns={columns8} data={this.state.data8} />\r\n <Pagination\r\n\t \tfirst\r\n\t \tlast\r\n\t \tprev\r\n\t \tnext\r\n\t \tboundaryLinks\r\n\t\t items={2}\r\n\t\t maxButtons={5}\r\n\t\t activePage={this.state.activePage}\r\n\t\t onSelect={this.handleSelect.bind(this)} />\r\n </div>\r\n );\r\n }\r\n}\r\n","desc":" 点击分页联动表格"},{"example":<Demo9 />,"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 <InputGroup simple className=\"search-component\">\r\n <FormControl\r\n onChange={this.handleChange}\r\n value={this.state.searchValue}\r\n onKeyDown={this.handleKeyDown}\r\n type=\"text\"\r\n />\r\n {this.state.empty\r\n ? <Icon\r\n type=\"uf-close-c\"\r\n onClick={this.emptySearch}\r\n className=\"empty-search\"\r\n />\r\n : null}\r\n\r\n <InputGroup.Button onClick={this.handleSearch} shape=\"border\">\r\n <Icon type=\"uf-search\" />\r\n </InputGroup.Button>\r\n </InputGroup>\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 <a href=\"#\">一些操作</a>;\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 <div>\r\n <div className=\"clearfix\">\r\n <Search handleToChange={this.handleSearchToTable}/>\r\n </div>\r\n <Table columns={columns9} data={this.state.data} />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\n","desc":" 搜索刷新表格数据"}]
-
-
-class Demo extends Component {
- constructor(props){
- super(props);
- this.state = {
- open: false
- }
- this.handleClick = this.handleClick.bind(this);
- }
- handleClick() {
- this.setState({ open: !this.state.open })
- }
-
- render () {
- const { title, example, code, desc } = this.props;
- let caret = this.state.open ? CARETUP : CARET;
- let text = this.state.open ? "隐藏代码" : "查看代码";
-
- const footer = (
- <Button shape="block" onClick={ this.handleClick }>
- { caret }
- { text }
- </Button>
- );
- const header = (
- <Row>
- <Col md={12}>
- { example }
- </Col>
- </Row>
- );
- return (
- <Col md={12} >
- <h3>{ title }</h3>
- <p>{ desc }</p>
- <Panel collapsible headerContent expanded={ this.state.open } colors='bordered' header={ header } footer={footer} footerStyle = {{padding: 0}}>
- <pre><code className="hljs javascript">{ code }</code></pre>
- </Panel>
- </Col>
- )
- }
-}
-
-class DemoGroup extends Component {
- constructor(props){
- super(props)
- }
- render () {
- return (
- <Row>
- {DemoArray.map((child,index) => {
-
- return (
- <Demo example= {child.example} title= {child.title} code= {child.code} desc= {child.desc} key= {index}/>
- )
-
- })}
- </Row>
- )
- }
-}
-
-ReactDOM.render(<DemoGroup/>, document.getElementById('tinperBeeDemo'));
diff --git a/src/render/DateRender.js b/src/render/DateRender.js
index e69de29..fb410b9 100644
--- a/src/render/DateRender.js
+++ b/src/render/DateRender.js
@@ -0,0 +1,67 @@
+import React, { Component } from "react";
+import Icon from "bee-icon";
+import DatePicker from "bee-datepicker";
+
+export default class DateRender extends Component {
+ state = {
+ value: this.props.value,
+ editable: false
+ };
+ handleChange = e => {
+ debugger;
+ const value = e.target.value;
+ this.setState({ value });
+ };
+ check = () => {
+ this.setState({ editable: false });
+ if (this.props.onChange) {
+ this.props.onChange(this.state.value);
+ }
+ };
+ edit = () => {
+ this.setState({ editable: true });
+ };
+ handleKeydown = event => {
+ console.log(event.keyCode);
+ if (event.keyCode == 13) {
+ this.check();
+ }
+ };
+ render() {
+ const { value, editable } = this.state;
+ let { isclickTrigger } = this.props;
+ let cellContent = "";
+ if (editable) {
+ cellContent = isclickTrigger ? (
+ <div className="editable-cell-input-wrapper">
+ <DatePicker onChange={this.handleChange} />
+ </div>
+ ) : (
+ <div className="editable-cell-input-wrapper">
+ <DatePicker {...this.props} onChange={this.handleChange}/>
+ <Icon
+ type="uf-correct"
+ className="editable-cell-icon-check"
+ onClick={this.check}
+ />
+ </div>
+ );
+ } else {
+ cellContent = isclickTrigger ? (
+ <div className="editable-cell-text-wrapper" onClick={this.edit}>
+ {value || " "}
+ </div>
+ ) : (
+ <div className="editable-cell-text-wrapper">
+ {value || " "}
+ <Icon
+ type="uf-pencil"
+ className="editable-cell-icon"
+ onClick={this.edit}
+ />
+ </div>
+ );
+ }
+ return <div className="editable-cell">{cellContent}</div>;
+ }
+}
diff --git a/src/render/InputRender.js b/src/render/InputRender.js
index 9271670..36379e8 100644
--- a/src/render/InputRender.js
+++ b/src/render/InputRender.js
@@ -8,7 +8,7 @@ export default class InputRender extends Component {
editable: false
};
handleChange = e => {
- const value = e.target.value;
+ const value = e;
this.setState({ value });
};
check = () => {
@@ -21,7 +21,6 @@ export default class InputRender extends Component {
this.setState({ editable: true });
};
handleKeydown = event => {
- console.log(event.keyCode);
if (event.keyCode == 13) {
this.check();
}
diff --git a/src/render/SelectRender.js b/src/render/SelectRender.js
new file mode 100644
index 0000000..a4f00d1
--- /dev/null
+++ b/src/render/SelectRender.js
@@ -0,0 +1,84 @@
+import React, { Component } from "react";
+import Icon from "bee-icon";
+import Select from "bee-select";
+
+export default class SelectRender extends Component {
+ state = {
+ value: this.props.value,
+ editable: false
+ };
+ handleChange = e => {
+ const value = e;
+ let self = this;
+ if (self.props.onChange) {
+ self.props.onChange(value);
+ }
+ this.setState({ value: value });
+ setTimeout(function() {
+ self.setState({ editable: false });
+ }, 0);
+ };
+ check = () => {
+ this.setState({ editable: false });
+ if (this.props.onChange) {
+ this.props.onChange(this.state.value);
+ }
+ };
+ edit = () => {
+ this.setState({ editable: true });
+ };
+ render() {
+ const { value, editable } = this.state;
+ let { isclickTrigger } = this.props;
+ let cellContent = "";
+ if (editable) {
+ cellContent = isclickTrigger ? (
+ <div className="editable-cell-input-wrapper">
+ <Select
+ {...this.props}
+ value={this.state.value}
+ onChange={this.handleChange}
+ >
+ {this.props.children}
+ </Select>
+ <Icon
+ type="uf-correct"
+ className="editable-cell-icon-check"
+ onClick={this.check}
+ />
+ </div>
+ ) : (
+ <div className="editable-cell-input-wrapper">
+ <Select
+ {...this.props}
+ value={this.state.value}
+ onChange={this.handleChange}
+ >
+ {this.props.children}
+ </Select>
+ <Icon
+ type="uf-correct"
+ className="editable-cell-icon-check"
+ onClick={this.check}
+ />
+ </div>
+ );
+ } else {
+ cellContent = isclickTrigger ? (
+ <div className="editable-cell-text-wrapper" onClick={this.edit}>
+ {value || " "}
+ </div>
+ ) : (
+ <div className="editable-cell-text-wrapper">
+ {value || " "}
+ <Icon
+ type="uf-pencil"
+ className="editable-cell-icon"
+ onClick={this.edit}
+ />
+ </div>
+ );
+ }
+ return <div className="editable-cell">{cellContent}</div>;
+ }
+}