76 lines
113 KiB
JavaScript
76 lines
113 KiB
JavaScript
|
||
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 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 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 Demo17 = require("./demolist/Demo17");var Demo18 = require("./demolist/Demo18");var Demo19 = require("./demolist/Demo19");var Demo20 = require("./demolist/Demo20");var Demo21 = require("./demolist/Demo21");var Demo22 = require("./demolist/Demo22");var Demo23 = require("./demolist/Demo23");var Demo24 = require("./demolist/Demo24");var Demo25 = require("./demolist/Demo25");var Demo26 = require("./demolist/Demo26");var Demo27 = require("./demolist/Demo27");var Demo28 = require("./demolist/Demo28");var Demo29 = require("./demolist/Demo29");var Demo30 = require("./demolist/Demo30");var Demo31 = require("./demolist/Demo31");var Demo32 = require("./demolist/Demo32");var Demo34 = require("./demolist/Demo34");var Demo35 = require("./demolist/Demo35");var DemoArray = [{"example":<Demo1 />,"title":" 简单表格、文字过长，两种tip","code":"/**\r\n*\r\n* @title 简单表格、文字过长，两种tip\r\n* 【Tooltip】\r\n* @description\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\n\n\nimport { Table, Tooltip, Button } from 'tinper-bee';\r\n\r\nconst columns = [\r\n {\r\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\r\n fixed:'left',\r\n render: (text, record, index) => {\r\n return (\r\n <Tooltip inverse overlay={text}>\r\n <span tootip={text} style={{\r\n display: \"inline-block\",\r\n width: \"60px\",\r\n textOverflow: \"ellipsis\",\r\n overflow: \"hidden\",\r\n whiteSpace: \"nowrap\",\r\n verticalAlign: \"middle\",\r\n }}>{text}</span>\r\n </Tooltip>\r\n );\r\n }\r\n },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 500},\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n render(text, record, index) {\r\n return (\r\n <div style={{ position: 'relative' }} title={text} >\r\n <a\r\n href=\"javascript:;\"\r\n tooltip={text}\r\n onClick={() => {\r\n alert('这是第' + index + '列，内容为:' + text);\r\n }}\r\n >\r\n 一些操作\r\n </a>\r\n </div>\r\n );\r\n }\r\n }\r\n];\r\n\r\nconst data = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\r\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\r\n];\r\n\r\nclass Demo1 extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n <Table\r\n columns={columns}\r\n data={data}\r\n parentNodeId='parent'\r\n height={43}\r\n headerHeight={42}\r\n onRowClick={(record, index, indent) => {\r\n this.setState({\r\n selectedRowIndex: index\r\n });\r\n }}\r\n />\r\n\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 这是带有增删改功能的表格（此编辑功能未使用render组件）\r\n*\r\n*/\r\n\r\n\nimport React, { Component } from \"react\";\r\nimport { Table, Popconfirm, Input, Icon, Animate, Button } from 'tinper-bee';\r\n\n\n\n\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;\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 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 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":" 这是带有增删改功能的表格（此编辑功能未使用render组件）"},{"example":<Demo3 />,"title":" 表头分组并自定义表头高度","code":"/**\r\n *\r\n * @title 表头分组并自定义表头高度\r\n * @description columns[n] 可以内嵌 children，以渲染分组表头。\r\n * 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响\r\n *\r\n */\r\n\r\n\nimport React, { Component } from \"react\";\r\nimport { Table, Button } from 'tinper-bee';\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst columns = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: 100,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"Other\",\r\n width:600,\r\n children: [\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: 200\r\n },\r\n {\r\n title: \"Address\",\r\n children: [\r\n {\r\n title: \"Street\",\r\n dataIndex: \"street\",\r\n key: \"street\",\r\n width: 200\r\n },\r\n {\r\n title: \"Block\",\r\n children: [\r\n {\r\n title: \"Building\",\r\n dataIndex: \"building\",\r\n key: \"building\",\r\n width: 100\r\n },\r\n {\r\n title: \"Door No.\",\r\n dataIndex: \"number\",\r\n key: \"number\",\r\n width: 100\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Company\",\r\n width:400,\r\n children: [\r\n {\r\n title: \"Company Address\",\r\n dataIndex: \"companyAddress\",\r\n key: \"companyAddress\",\r\n width:200,\r\n },\r\n {\r\n title: \"Company Name\",\r\n dataIndex: \"companyName\",\r\n key: \"companyName\",\r\n width:200,\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Gender\",\r\n dataIndex: \"gender\",\r\n key: \"gender\",\r\n width: 60,\r\n fixed: \"right\"\r\n }\r\n];\r\n\r\nconst data = [];\r\nfor (let i = 0; i < 20; i++) {\r\n data.push({\r\n key: i,\r\n name: \"John Brown\",\r\n age: i + 1,\r\n street: \"Lake Park\",\r\n building: \"C\",\r\n number: 2035,\r\n companyAddress: \"Lake Street 42\",\r\n companyName: \"SoftLake Co\",\r\n gender: \"M\"\r\n });\r\n}\r\n\r\nclass Demo3 extends Component {\r\n render() {\r\n return (\r\n <Table\r\n className={'demo3'}\r\n columns={columns}\r\n data={data}\r\n headerHeight={40} //自定义表头高度\r\n bordered\r\n scroll={{ y: 240 }}\r\n />\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" columns[n] 可以内嵌 children，以渲染分组表头。","scss_code":".demo3{\r\n .u-table-thead th {\r\n padding-top: 0px;\r\n padding-bottom: 0px;\r\n }\r\n}"},{"example":<Demo4 />,"title":" 树形数据展示","code":"/**\r\n*\r\n* @title 树形数据展示\r\n* @description 通过在data中配置children数据，来自动生成树形数据\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table } from 'tinper-bee';\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\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data4,\r\n factoryValue: 0,\r\n selectedRow: new Array(data4.length)//状态同步\r\n }\r\n }\r\n\r\n render() {\r\n return <Table \r\n rowClassName={(record,index,indent)=>{\r\n if (this.state.selectedRow[index]) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n onRowClick={(record,index,indent)=>{\r\n let selectedRow = new Array(this.state.data.length);\r\n selectedRow[index] = true;\r\n this.setState({\r\n factoryValue: record,\r\n selectedRow: selectedRow\r\n });\r\n }}\r\n \r\n columns={columns4} data={data4} />;\r\n }\r\n}\r\n\r\n\r\n","desc":" 通过在data中配置children数据，来自动生成树形数据"},{"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 'tinper-bee';\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: \"address\", dataIndex: \"address\", key: \"address\" }\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: \"110%\", y: 140 }} />;\r\n }\r\n}\r\n\r\n","desc":" 固定列到表格的某侧"},{"example":<Demo6 />,"title":" 固定表头","code":"/**\r\n*\r\n* @title 固定表头\r\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table } from 'tinper-bee';\r\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;;\r\nconst DragColumnTable = dragColumn(Table);\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: \"Address\", dataIndex: \"address\", key: \"1\" }\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 <DragColumnTable columns={columns6} data={data6} scroll={{y: 150 }} dragborder={true} />;\r\n }\r\n}\r\n\r\n","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)"},{"example":<Demo7 />,"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 'tinper-bee';\r\n\r\nconst columns7 = [\r\n { title: \"班级\", dataIndex: \"a\", key: \"a\" },\r\n { title: \"人数\", dataIndex: \"b\", key: \"b\" },\r\n { title: \"班主任\", dataIndex: \"c\", key: \"c\" },\r\n {\r\n title: \"武功级别\",\r\n dataIndex: \"d\",\r\n key: \"d\"\r\n }\r\n];\r\n\r\nconst data7 = [\r\n { a: \"02级一班\", b: \"2\", c: \"欧阳锋\", d: \"大侠\", key: \"1\" },\r\n { a: \"03级二班\", b: \"3\", c: \"归海一刀\", d: \"大侠\", key: \"2\" },\r\n { a: \"05级三班\", b: \"1\", c: \"一拳超人\", d: \"愣头青\", key: \"3\" }\r\n];\r\n\r\nconst columns7_1 = [\r\n { title: \"姓名\", dataIndex: \"a\", key: \"a\" },\r\n { 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\r\n rowclick = (record, index) => {\r\n if (record.a === \"02级一班\") {\r\n this.setState({\r\n children_data: [\r\n { a: \"郭靖\", b: \"02级一班\", c: \"文学系\", key: \"1\" },\r\n { a: \"黄蓉\", b: \"02级一班\", c: \"文学系\", key: \"2\" }\r\n ]\r\n });\r\n } else if (record.a === \"03级二班\") {\r\n this.setState({\r\n children_data: [\r\n { a: \"杨过\", b: \"03级二班\", c: \"外语系\", key: \"1\" },\r\n { a: \"小龙女\", b: \"03级二班\", c: \"外语系\", key: \"2\" },\r\n { a: \"傻姑\", b: \"03级二班\", c: \"外语系\", key: \"3\" }\r\n ]\r\n });\r\n } else if (record.a === \"05级三班\") {\r\n this.setState({\r\n children_data: [{ a: \"金圣叹\", b: \"05级三班\", c: \"美术系\", key: \"1\" }]\r\n });\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <div>\r\n <Table\r\n columns={columns7}\r\n data={data7}\r\n onRowClick={this.rowclick}\r\n title={currentData => <div>标题: 我是主表</div>}\r\n />\r\n <Table\r\n style={{ marginTop: 40 }}\r\n columns={columns7_1}\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\r\n","desc":" 主表点击子表联动"},{"example":<Demo8 />,"title":" 表格+分页","code":"/**\r\n *\r\n * @title 表格+分页\r\n * @description 点击分页联动表格\r\n */\r\n\r\nimport React, { Component } from \"react\";\r\n\r\nimport { Table, Pagination } from 'tinper-bee';\r\n\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: \"d\",\r\n key: \"d\"\r\n }\r\n];\r\n\r\nconst pageData = {\r\n 1: [\r\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\r\n ],\r\n 2: [\r\n { a: \"芙蓉姐姐\", b: \"女\", c: 23, d: \"大侠\", key: \"1\" },\r\n { a: \"芙蓉妹妹\", b: \"女\", c: 23, d: \"内行\", key: \"2\" }\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 data: pageData[1],\r\n activePage: 1\r\n };\r\n }\r\n\r\n handleSelect(eventKey) {\r\n this.setState({\r\n data: pageData[eventKey],\r\n activePage: eventKey\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n <div className=\"demo8\">\r\n <Table columns={columns8} data={this.state.data} />\r\n <Pagination\r\n first\r\n last\r\n prev\r\n next\r\n maxButtons={5}\r\n boundaryLinks\r\n activePage={this.state.activePage}\r\n onSelect={this.handleSelect.bind(this)}\r\n onDataNumSelect={this.dataNumSelect}\r\n showJump={true}\r\n total={100}\r\n dataNum={2}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\n","desc":" 点击分页联动表格","scss_code":".demo8{\r\n .u-table {\r\n margin-bottom: 11px;\r\n }\r\n .u-pagination{\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n}"},{"example":<Demo9 />,"title":" 表格+搜索","code":"/**\r\n *\r\n * @title 表格+搜索\r\n * @description 搜索刷新表格数据\r\n *\r\n *\r\n * import {Table} from 'tinper-bee';\r\n */\r\n\r\nimport React, { Component } from \"react\";\r\n\r\nimport { Table, FormControl, InputGroup, Icon } from 'tinper-bee';\r\n\n\n\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 } = this.props;\r\n this.setState({\r\n empty: true\r\n });\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\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 placeholder=\"请输入用户名\"\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 {\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 },\r\n {\r\n title: \"武功级别\",\r\n dataIndex: \"d\",\r\n key: \"d\"\r\n }\r\n];\r\n\r\nconst userData = [\r\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\r\n];\r\n\r\nclass Demo9 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: userData\r\n };\r\n }\r\n\r\n handleSearch = value => {\r\n if (value === \"\") {\r\n return this.setState({\r\n data: userData\r\n });\r\n }\r\n let regExp = new RegExp(value, \"ig\");\r\n let data = userData.filter(item => regExp.test(item.a));\r\n this.setState({\r\n data\r\n });\r\n };\r\n\r\n handleEmpty = () => {\r\n this.setState({\r\n data: userData\r\n });\r\n };\r\n\r\n render() {\r\n return (\r\n <div>\r\n <div className=\"clearfix\">\r\n <Search onSearch={this.handleSearch} onEmpty={this.handleEmpty} />\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\r\n","desc":" 搜索刷新表格数据"},{"example":<Demo10 />,"title":" 无数据时显示","code":"/**\r\n*\r\n* @title 无数据时显示\r\n* @description 无数据时显示效果展示（可自定义）\r\n *\r\n* import {Table} from 'tinper-bee';\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table } from 'tinper-bee';\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* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称\r\n* @title 列排序\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table, Icon } from 'tinper-bee';\r\n\nimport sort from \"tinper-bee/lib/sort.js\";;\r\nlet ComplexTable = sort(Table, Icon);\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: \"d\",\r\n key: \"d\"\r\n }\r\n];\r\n\r\nconst data11 = [\r\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\r\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\r\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', 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 render() {\r\n\r\n return <ComplexTable columns={columns11} data={this.state.data} />;\r\n }\r\n}\r\nDemo11.defaultProps = defaultProps11;\r\n\r\n\r\n","desc":" column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称"},{"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, Checkbox } from 'tinper-bee';\r\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\r\n\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: \"d\",\r\n key: \"d\"\r\n }\r\n];\r\n\r\nconst data12 = [\r\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\",_checked:true },\r\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" ,_checked:true},\r\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" ,_checked:true}\r\n];\r\n//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常\r\nlet MultiSelectTable = multiSelect(Table, Checkbox);\r\n\r\nclass Demo12 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data12\r\n };\r\n }\r\n getSelectedDataFunc = data => {\r\n console.log(data);\r\n };\r\n \r\n render() {\r\n let multiObj = {\r\n type: \"checkbox\"\r\n };\r\n return (\r\n <MultiSelectTable \r\n columns={columns12} \r\n data={data12} \r\n multiSelect={multiObj}\r\n getSelectedDataFunc={this.getSelectedDataFunc}/>\r\n );\r\n }\r\n}\r\n\r\n","desc":" 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）"},{"example":<Demo13 />,"title":" 多列排序、全选功能、合计","code":"/**\r\n *\r\n * @title 多列排序、全选功能、合计\r\n * @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)\r\n *\r\n */\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table, Icon, Button, Checkbox } from 'tinper-bee';\r\n\n\n\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\r\nimport sort from \"tinper-bee/lib/sort.js\";;\r\nimport sum from \"tinper-bee/lib/sum.js\";;\r\n\r\nconst columns13 = [\r\n {\r\n title: \"名字\",\r\n dataIndex: \"a\",\r\n key: \"a\",\r\n className:'dfasd',\r\n width: 200\r\n },\r\n {\r\n title: \"功力指数\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: 200,\r\n sumCol: true,\r\n sorter: (a, b) => a.c - b.c,\r\n sorterClick:(data,type)=>{//排序的回调函数\r\n //type value is up or down\r\n console.log(\"data\",data);\r\n }\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n sumCol: true,\r\n sorter: (a, b) => a.c - b.c,\r\n sorterClick:(data,type)=>{//排序的回调函数\r\n //type value is up or down\r\n console.log(\"data\",data);\r\n }\r\n },\r\n {\r\n title: \"成绩\",\r\n dataIndex: \"e\",\r\n key: \"e\",\r\n width: 200,\r\n sumCol: true,\r\n sorter: (a, b) => a.c - b.c,\r\n },\r\n {\r\n title: \"武功级别\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n width: 200\r\n }\r\n];\r\n\r\nconst data13 = [\r\n { a: \"杨过\", b: 675, c: 30, d: \"内行\",e:100, key: \"2\" },\r\n { a: \"令狐冲\", b: 43, c: 41, d: \"大侠\",e:90, key: \"1\" },\r\n { a: \"令狐冲1\", b: 43, c: 81, d: \"大侠\", e:120,key: \"4\" },\r\n { a: \"令狐冲2\", b: 43, c: 81, d: \"大侠\", e:130,key: \"5\" },\r\n { a: \"郭靖\", b: 153, c: 25, d: \"大侠\",e:90, key: \"3\" }\r\n];\r\n\r\n\r\n//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常\r\nlet ComplexTable = multiSelect(sum(sort(Table, Icon)), Checkbox);\r\n\r\nclass Demo13 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data13: data13,\r\n selectedRow: this.selectedRow,\r\n selectDisabled: this.selectDisabled\r\n };\r\n }\r\n getSelectedDataFunc = data => {\r\n console.log(data);\r\n };\r\n selectDisabled = (record, index) => {\r\n // console.log(record);\r\n if (index === 1) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n selectedRow = (record, index) => {\r\n // console.log(record);\r\n if (index === 0) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n onClick = () => {\r\n this.setState({\r\n selectedRow: function() {}\r\n });\r\n };\r\n\r\n render() {\r\n let multiObj = {\r\n type: \"checkbox\"\r\n };\r\n let sortObj = {\r\n mode:'multiple'\r\n }\r\n \r\n return (\r\n <div>\r\n <Button className=\"editable-add-btn\" onClick={this.onClick}>\r\n change selectedRow\r\n </Button>\r\n <ComplexTable\r\n selectDisabled={this.state.selectDisabled}\r\n selectedRow={this.state.selectedRow}\r\n columns={columns13}\r\n data={this.state.data13}\r\n multiSelect={multiObj}\r\n sort={sortObj}\r\n getSelectedDataFunc={this.getSelectedDataFunc}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\n","desc":" 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)"},{"example":<Demo14 />,"title":" 编辑态表格","code":"/**\r\n*\r\n* @title 编辑态表格\r\n* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）\r\n*\r\n*/\r\n\r\nimport React from \"react\";\r\nimport { Table, Select, Datepicker, Checkbox, Input, Icon, Form, Button, Tooltip, Animate } from 'tinper-bee';\r\n\n\n\n\n\n\n\n\n\nimport renderInput from \"tinper-bee/lib/InputRender.js\";;\r\nimport renderDate from \"tinper-bee/lib/DateRender.js\";;\r\nimport renderSelect from \"tinper-bee/lib/SelectRender.js\";;\r\n\r\nconst InputRender = renderInput(Form, Input, Icon);\r\nconst DateRender = renderDate(Datepicker, Icon);\r\nconst SelectRender = renderSelect(Select, Icon);\r\n\r\nconst format = \"YYYY-MM-DD\";\r\nconst format2 = \"YYYY-MM\";\r\nconst format3 = \"YYYY-MM-DD HH:mm:ss\";\r\n\r\nconst dateInputPlaceholder = \"选择日期\";\r\nconst dateInputPlaceholder2 = \"选择年月\";\r\nconst dataSource = [\r\n {\r\n key: \"boyuzhou\",\r\n value: \"jack\"\r\n },\r\n {\r\n key: \"renhualiu\",\r\n value: \"lucy\"\r\n },\r\n {\r\n key: \"yuzhao\",\r\n value: \"yiminghe\"\r\n }\r\n];\r\nclass Demo14 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 number: \"10\",\r\n age: \"y\",\r\n address: \"jack\",\r\n datepicker: \"2017-06-12\",\r\n MonthPicker: \"2017-02\"\r\n },\r\n {\r\n key: \"1\",\r\n name: \"落雁\",\r\n number: \"100\",\r\n age: \"y\",\r\n address: \"lucy\",\r\n datepicker: \"2017-06-12\",\r\n MonthPicker: \"2017-02\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"闭月\",\r\n number: \"1000\",\r\n age: \"n\",\r\n address: \"lucy\",\r\n datepicker: \"2017-06-12\",\r\n MonthPicker: \"2017-02\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"羞花\",\r\n number: \"9999\",\r\n age: \"y\",\r\n address: \"lucy\",\r\n datepicker: \"2017-06-12\",\r\n MonthPicker: \"2017-02\"\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: \"150px\",\r\n render: (text, record, index) => (\r\n <InputRender\r\n name=\"name\"\r\n placeholder=\"请输入姓名\"\r\n value={text}\r\n isclickTrigger={true}\r\n check={this.check}\r\n onChange={this.onInputChange(index, \"name\")}\r\n isRequire={true}\r\n method=\"blur\"\r\n errorMessage={\r\n <Tooltip overlay={\"错误提示\"}>\r\n <Icon type=\"uf-exc-c\" className=\"\" />\r\n </Tooltip>\r\n }\r\n />\r\n )\r\n },\r\n {\r\n title: \"货币输入\",\r\n dataIndex: \"number\",\r\n key: \"number\",\r\n width: \"150px\",\r\n render: (text, record, index) => (\r\n <InputRender\r\n format=\"Currency\"\r\n name=\"number\"\r\n placeholder=\"请输入货币\"\r\n value={text}\r\n isclickTrigger={true}\r\n check={this.check}\r\n onChange={this.onInputChange(index, \"number\")}\r\n isRequire={true}\r\n method=\"blur\"\r\n errorMessage={\r\n <Tooltip overlay={\"错误提示\"}>\r\n <Icon type=\"uf-exc-c\" className=\"\" />\r\n </Tooltip>\r\n }\r\n reg={/^[0-9]+$/}\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 <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: \"200px\",\r\n render: (text, record, index) => {\r\n return (\r\n <SelectRender\r\n dataSource={dataSource}\r\n isclickTrigger={true}\r\n value={text}\r\n onChange={this.onSelectChange(index, \"address\")}\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 </SelectRender>\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: (text, record, index) => {\r\n return (\r\n <DateRender\r\n value={text}\r\n isclickTrigger={true}\r\n format={format}\r\n onSelect={this.onDateSelect}\r\n onChange={this.onDateChange}\r\n placeholder={dateInputPlaceholder}\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: (text, record, index) => {\r\n return (\r\n <DateRender\r\n value={text}\r\n type=\"MonthPicker\"\r\n isclickTrigger={true}\r\n format={format2}\r\n onSelect={this.onSelect}\r\n onChange={this.onChange}\r\n placeholder={dateInputPlaceholder2}\r\n />\r\n );\r\n }\r\n }\r\n ];\r\n }\r\n check = (flag, obj) => {\r\n console.log(flag);\r\n console.log(obj);\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 = (index, key) => {\r\n return value => {\r\n console.log(`selected ${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 onDateChange = d => {\r\n console.log(d);\r\n };\r\n onDateSelect = d => {\r\n console.log(d);\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: \"jack\",\r\n datepicker: \"2017-06-12\",\r\n MonthPicker: \"2017-02\"\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 getData = () => {\r\n console.log(this.state.dataSource);\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 <Button\r\n style={{marginLeft:\"5px\"}}\r\n className=\"editable-add-btn\"\r\n type=\"ghost\"\r\n onClick={this.getData}\r\n >\r\n 获取数据\r\n </Button>\r\n <Table\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":" 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）"},{"example":<Demo15 />,"title":" 表格行/列合并","code":"/**\r\n*\r\n* @title 表格行/列合并\r\n* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst renderContent = (value, row, index) => {\r\n const obj = {\r\n children: value,\r\n props: {},\r\n };\r\n if (index === 4) {\r\n obj.props.colSpan = 0;\r\n }\r\n return obj;\r\n};\r\n\r\nconst columns = [{\r\n title: 'Name',\r\n key: \"name\",\r\n dataIndex: 'name',\r\n render: (text, row, index) => {\r\n if (index < 4) {\r\n return <a href=\"#\">{text}</a>;\r\n }\r\n return {\r\n children: <a href=\"#\">{text}</a>,\r\n props: {\r\n colSpan: 5,\r\n },\r\n };\r\n },\r\n}, {\r\n title: 'Age',\r\n key: \"Age\",\r\n dataIndex: 'age',\r\n render: renderContent,\r\n}, {\r\n title: 'Home phone',\r\n colSpan: 2,\r\n key: \"tel\",\r\n dataIndex: 'tel',\r\n render: (value, row, index) => {\r\n const obj = {\r\n children: value,\r\n props: {},\r\n };\r\n if (index === 2) {\r\n obj.props.rowSpan = 2;\r\n }\r\n if (index === 3) {\r\n obj.props.rowSpan = 0;\r\n }\r\n if (index === 4) {\r\n obj.props.colSpan = 0;\r\n }\r\n return obj;\r\n },\r\n}, {\r\n title: 'Phone',\r\n colSpan: 0,\r\n key: \"phone\",\r\n dataIndex: 'phone',\r\n render: renderContent,\r\n}, {\r\n title: 'Address',\r\n key: \"address\",\r\n dataIndex: 'address',\r\n render: renderContent,\r\n}];\r\n\r\nconst data = [{\r\n key: '1',\r\n name: 'John Brown',\r\n age: 32,\r\n tel: '0571-22098909',\r\n phone: 18889898989,\r\n address: 'New York No. 1 Lake Park',\r\n}, {\r\n key: '2',\r\n name: 'Jim Green',\r\n tel: '0571-22098333',\r\n phone: 18889898888,\r\n age: 42,\r\n address: 'London No. 1 Lake Park',\r\n}, {\r\n key: '3',\r\n name: 'Joe Black',\r\n age: 32,\r\n tel: '0575-22098909',\r\n phone: 18900010002,\r\n address: 'Sidney No. 1 Lake Park',\r\n}, {\r\n key: '4',\r\n name: 'Jim Red',\r\n age: 18,\r\n tel: '0575-22098909',\r\n phone: 18900010002,\r\n address: 'London No. 2 Lake Park',\r\n}, {\r\n key: '5',\r\n name: 'Jake White',\r\n age: 18,\r\n tel: '0575-22098909',\r\n phone: 18900010002,\r\n address: 'Dublin No. 2 Lake Park',\r\n}];\r\n\r\nclass Demo15 extends Component {\r\n render() {\r\n return (\r\n <Table columns={columns} data={data}/>\r\n );\r\n }\r\n}\r\n\r\n\r\n\r\n","desc":" 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。"},{"example":<Demo16 />,"title":" 嵌套子表格","code":"/**\r\n*\r\n* @title 嵌套子表格\r\n* @description 通过expandedRowRender参数来实现子表格\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\r\nconst DragColumnTable = dragColumn(Table);\r\nconst columns16 = [\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\", \r\n width:200,\r\n render(text, record, index) {\r\n return (\r\n <a\r\n href=\"#\"\r\n onClick={() => {\r\n alert(\"这是第\" + index + \"列，内容为:\" + text);\r\n }}\r\n >\r\n 一些操作\r\n </a>\r\n );\r\n }\r\n },\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n \r\n];\r\nconst columns17 = [\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n width:200,\r\n render(text, record, index) {\r\n return (\r\n <a\r\n href=\"#\"\r\n onClick={() => {\r\n alert(\"这是第\" + index + \"列，内容为:\" + text);\r\n }}\r\n >\r\n 一些操作\r\n </a>\r\n );\r\n }\r\n },\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];\r\n\r\nconst data16 = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\r\n];\r\n\r\n\r\nclass Demo16 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state={\r\n data_obj:{}\r\n }\r\n }\r\n expandedRowRender = (record, index, indent) => {\r\n let height = 42 * (this.state.data_obj[record.key].length+ 2);\r\n \r\n return (\r\n <Table\r\n columns={columns17}\r\n style={{height:height}}\r\n data={this.state.data_obj[record.key]} \r\n \r\n />\r\n );\r\n };\r\n getData=(expanded, record)=>{\r\n //当点击展开的时候才去请求数据\r\n let new_obj = Object.assign({},this.state.data_obj);\r\n if(expanded){\r\n if(record.key==='1'){\r\n new_obj[record.key] = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\r\n ]\r\n this.setState({\r\n data_obj:new_obj\r\n })\r\n }else{\r\n new_obj[record.key] = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" }\r\n ]\r\n this.setState({\r\n data_obj:new_obj\r\n })\r\n }\r\n }\r\n }\r\n haveExpandIcon=(record, index)=>{\r\n //控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效\r\n if(index == 0){\r\n return true;\r\n }\r\n return false;\r\n }\r\n render() {\r\n return (\r\n <DragColumnTable\r\n columns={columns16}\r\n data={data16}\r\n onExpand={this.getData}\r\n expandedRowRender={this.expandedRowRender}\r\n scroll={{x:true}}\r\n dragborder={true} \r\n draggable={true} \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","desc":" 通过expandedRowRender参数来实现子表格"},{"example":<Demo17 />,"title":" loading属性指定表格是否加载中","code":"/**\r\n*\r\n* @title loading属性指定表格是否加载中\r\n* @description loading可以传boolean或者obj对象，obj为bee-loading组件的参数类型\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table, Button } from 'tinper-bee';\r\n\n\r\nconst columns17 = [\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: \"d\",\r\n key: \"d\",\r\n render(text, record, index) {\r\n return (\r\n <a\r\n href=\"#\"\r\n onClick={() => {\r\n alert('这是第'+index+'列，内容为:'+text);\r\n }}\r\n >\r\n 一些操作\r\n </a>\r\n );\r\n }\r\n }\r\n];\r\n\r\nconst data17 = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\r\n];\r\n\r\nclass Demo17 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n loading : true\r\n }\r\n }\r\n changeLoading = () => {\r\n this.setState({\r\n loading : !this.state.loading\r\n })\r\n }\r\n render() {\r\n return (\r\n <div>\r\n <Button\r\n className=\"editable-add-btn\"\r\n type=\"ghost\"\r\n onClick={this.changeLoading}\r\n >\r\n 切换loading\r\n </Button>\r\n <Table\r\n columns={columns17}\r\n data={data17}\r\n title={currentData => <div>标题: 这是一个标题</div>}\r\n footer={currentData => <div>表尾: 我是小尾巴</div>}\r\n // loading={this.state.loading}或者是boolean\r\n loading={{show:this.state.loading,loadingType:\"line\"}}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" loading可以传boolean或者obj对象，obj为bee-loading组件的参数类型"},{"example":<Demo18 />,"title":" 合并标题后的合计,且支持多字段统计","code":"/**\r\n *\r\n * @title 合并标题后的合计,且支持多字段统计\r\n * @description 合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）\r\n *\r\n */\r\n\r\nimport React, { Component } from \"react\";\r\n\nimport { Table, Button } from 'tinper-bee'; \r\nimport sum from \"tinper-bee/lib/sum.js\";;\r\n \r\nlet ComplexTable = sum(Table);\r\n\r\nconst columns = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: 100,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"Other\",\r\n children: [\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: 200,\r\n sumCol: true,\r\n },\r\n {\r\n title: \"Address\",\r\n children: [\r\n {\r\n title: \"Street\",\r\n dataIndex: \"street\",\r\n key: \"street\",\r\n width: 200\r\n },\r\n {\r\n title: \"Block\",\r\n children: [\r\n {\r\n title: \"Building\",\r\n dataIndex: \"building\",\r\n key: \"building\",\r\n width: 100\r\n },\r\n {\r\n title: \"Door No.\",\r\n dataIndex: \"number\",\r\n key: \"number\",\r\n // width: 100,\r\n sumCol: true,\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n // {\r\n // title: \"Company\",\r\n // children: [\r\n // {\r\n // title: \"Company Address\",\r\n // dataIndex: \"companyAddress\",\r\n // key: \"companyAddress\",\r\n // width: 100,\r\n // },\r\n // {\r\n // title: \"Company Name\",\r\n // dataIndex: \"companyName\",\r\n // key: \"companyName\",\r\n // width: 100,\r\n // }\r\n // ]\r\n // },\r\n {\r\n title: \"Gender\",\r\n dataIndex: \"gender\",\r\n key: \"gender\",\r\n width: 80,\r\n fixed: \"right\"\r\n }\r\n];\r\n\r\nfunction getData(){\r\n const data = [];\r\n for (let i = 0; i < 5; i++) {\r\n data.push({\r\n key: i,\r\n name: \"John Brown\"+i,\r\n age: i + Math.floor(Math.random()*10),\r\n street: \"Lake Park\",\r\n building: \"C\",\r\n number: 20 * Math.floor(Math.random()*10),\r\n companyAddress: \"Lake Street 42\",\r\n companyName: \"SoftLake Co\",\r\n gender: \"M\"\r\n });\r\n }\r\n return data;\r\n}\r\n\r\nclass Demo18 extends Component {\r\n \r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: getData()\r\n };\r\n }\r\n\r\n changeData = ()=>{\r\n this.setState({\r\n data: getData()\r\n });\r\n }\r\n\r\n render() {\r\n const {data} = this.state;\r\n return (\r\n <div>\r\n <Button \r\n className=\"editable-add-btn\"\r\n type=\"ghost\"\r\n onClick={this.changeData}\r\n >\r\n 动态设置数据源\r\n </Button>\r\n\r\n <ComplexTable \r\n columns={columns}\r\n data={data}\r\n bordered\r\n // scroll={{ x: \"130%\", y: 140 }}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\n","desc":" 合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）"},{"example":<Demo19 />,"title":" 编辑态表格","code":"/**\r\n*\r\n* @title 编辑态表格\r\n* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）\r\n*\r\n*/\r\n\r\n\nimport React from \"react\";\r\nimport { Table, Select, Form, Input, Icon, Tooltip, Animate, Button } from 'tinper-bee';\r\n\n\n\n\n\n\nimport renderInput from \"tinper-bee/lib/InputRender.js\";;\r\nimport renderSelect from \"tinper-bee/lib/SelectRender.js\";;\r\n\r\nconst InputRender = renderInput(Form, Input, Icon);\r\nconst SelectRender = renderSelect(Select, Icon);\r\n\r\nconst Option = Select.Option;\r\n\r\nconst dataSource = [\r\n {\r\n key: \"boyuzhou\",\r\n value: \"jack\"\r\n },\r\n {\r\n key: \"renhualiu\",\r\n value: \"lucy\"\r\n },\r\n {\r\n key: \"yuzhao\",\r\n value: \"yiminghe\"\r\n }\r\n];\r\nclass Demo19 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 number: \"10\",\r\n age: \"y\",\r\n address: \"jack\",\r\n datepicker: \"2017-06-12\",\r\n MonthPicker: \"2017-02\"\r\n },\r\n {\r\n key: \"1\",\r\n name: \"落雁\",\r\n number: \"100\",\r\n age: \"y\",\r\n address: \"lucy\",\r\n datepicker: \"2017-06-12\",\r\n MonthPicker: \"2017-02\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"闭月\",\r\n number: \"1000\",\r\n age: \"n\",\r\n address: \"lucy\",\r\n datepicker: \"2017-06-12\",\r\n MonthPicker: \"2017-02\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"羞花\",\r\n number: \"9999\",\r\n age: \"y\",\r\n address: \"lucy\",\r\n datepicker: \"2017-06-12\",\r\n MonthPicker: \"2017-02\"\r\n }\r\n ],\r\n count: 4\r\n };\r\n this.columns = [ \r\n {\r\n title: \"货币输入\",\r\n dataIndex: \"number\",\r\n key: \"number\",\r\n width: \"150px\",\r\n render: (text, record, index) => (\r\n <InputRender\r\n format=\"Currency\"\r\n name=\"name\"\r\n placeholder=\"请输入姓名\"\r\n value={text}\r\n isclickTrigger={true}\r\n check={this.check}\r\n onChange={this.onInputChange(index, \"name\")}\r\n isRequire={true}\r\n method=\"blur\"\r\n errorMessage={\r\n <Tooltip overlay={\"错误提示\"}>\r\n <Icon type=\"uf-exc-c\" className=\"\" />\r\n </Tooltip>\r\n }\r\n reg={/^[0-9]+$/}\r\n />\r\n )\r\n },\r\n \r\n {\r\n title:(<div>下拉框的div</div>),\r\n dataIndex: \"address\",\r\n key: \"address\",\r\n width: \"200px\",\r\n render: (text, record, index) => {\r\n return (\r\n <SelectRender\r\n dataSource={dataSource}\r\n isclickTrigger={true}\r\n value={text}\r\n onChange={this.onSelectChange(index, \"address\")}\r\n onFocus={this.handFocus}\r\n onBlur={this.onBlur}\r\n autofocus\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 </SelectRender>\r\n );\r\n }\r\n }\r\n ];\r\n }\r\n check = (flag, obj) => {\r\n console.log(flag);\r\n console.log(obj);\r\n };\r\n\r\n handFocus = (value,e) => {\r\n console.log(value+` 获取焦点事件`);\r\n };\r\n onBlur = (value,e) => {\r\n console.log(value+` onBlur`);\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\r\n onSelectChange = (index, key) => {\r\n return value => {\r\n console.log(`selected ${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\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: \"jack\",\r\n datepicker: \"2017-06-12\",\r\n MonthPicker: \"2017-02\"\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 getData = () => {\r\n console.log(this.state.dataSource);\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 <Button\r\n style={{marginLeft:\"5px\"}}\r\n className=\"editable-add-btn\"\r\n type=\"ghost\"\r\n onClick={this.getData}\r\n >\r\n 获取数据\r\n </Button>\r\n <Table\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":" 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）"},{"example":<Demo20 />,"title":" 简单表格选中行的背景色、表头表尾","code":"/**\r\n*\r\n* @title 简单表格选中行的背景色、表头表尾\r\n* @description\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\n\n\nimport { Table, Tooltip, Button } from 'tinper-bee';\r\n\r\nconst columns = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width:80 , className:\"rowClassName\"},\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\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 Demo26 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Table\r\n columns={columns}\r\n data={data}\r\n rowClassName={(record,index,indent)=>{\r\n if (this.state.selectedRowIndex == index) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n onRowClick={(record,index,indent)=>{\r\n this.setState({ \r\n selectedRowIndex: index\r\n });\r\n }}\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","desc":""},{"example":<Demo21 />,"title":" 根据列进行过滤","code":"/**\r\n*\r\n* @title 根据列进行过滤\r\n* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table, Popover, Checkbox, Icon } from 'tinper-bee';\r\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\r\nimport sum from \"tinper-bee/lib/sum\";;\r\n\n\n\n\r\nconst data21 = [\r\n { a: \"杨过\", b: \"男\", c: 30,d:'内行',e: \"操作\", key: \"2\" },\r\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠',e: \"操作\", key: \"1\" },\r\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e: \"操作\", key: \"3\" }\r\n];\r\n\r\nconst FilterColumnTable = filterColumn(Table, Popover, Icon);\r\n\r\nconst defaultProps21 = {\r\n prefixCls: \"bee-table\"\r\n};\r\n\r\nclass Demo21 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state ={\r\n columns21: [\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 ifshow:false,\r\n // width: 200,\r\n // sumCol: true,\r\n sorter: (a, b) => a.c - b.c\r\n },\r\n {\r\n title: \"武功级别\",\r\n dataIndex: \"d\",\r\n key: \"d\"\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"e\",\r\n key: \"e\",\r\n render(text, record, index){\r\n return (\r\n <div title={text} >\r\n <a href=\"#\"\r\n tooltip={text}\r\n onClick={() => {\r\n alert('这是第'+index+'列，内容为:'+text);\r\n }}\r\n // style={{\r\n // position: 'absolute',\r\n // top: 5,\r\n // left: 0\r\n // }}\r\n >\r\n 一些操作\r\n </a>\r\n </div>\r\n );\r\n }\r\n }\r\n ]};\r\n }\r\n afterFilter = (optData,columns)=>{\r\n if(optData.key == 'b'){\r\n if(optData.ifshow){\r\n columns[2].ifshow = false;\r\n }else{\r\n columns[2].ifshow = true;\r\n }\r\n this.setState({\r\n columns21 :columns,\r\n showFilterPopover:true\r\n });\r\n }\r\n \r\n }\r\n \r\n render() {\r\n \r\n return <FilterColumnTable columns={this.state.columns21} data={data21} afterFilter={this.afterFilter} showFilterPopover={this.state.showFilterPopover}/>;\r\n }\r\n}\r\nDemo21.defaultProps = defaultProps21;\r\n\r\n\r\n","desc":" 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数"},{"example":<Demo22 />,"title":" 列的拖拽，交换表头的顺序","code":"/**\r\n*\r\n* @title 列的拖拽，交换表头的顺序\r\n* @description 点击列的表头，进行左右拖拽\r\n*/\r\nimport React, { Component } from 'react';\r\nimport { Table, Icon } from 'tinper-bee'; \r\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\r\n\r\n\n\r\nconst columns22 = [\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: 200\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n sumCol: true,\r\n sorter: (a, b) => a.c - b.c\r\n },\r\n {\r\n title: \"武功级别\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n width: 200,\r\n }\r\n];\r\n\r\nconst data22 = [\r\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\r\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\r\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\r\n];\r\n\r\nconst DragColumnTable = dragColumn(Table);\r\n\r\nconst defaultProps22 = {\r\n prefixCls: \"bee-table\"\r\n};\r\n\r\nclass Demo22 extends Component {\r\n constructor(props) {\r\n super(props); \r\n }\r\n \r\n render() {\r\n return <DragColumnTable columns={columns22} data={data22} bordered\r\n \r\n draggable={true} \r\n />;\r\n }\r\n}\r\nDemo22.defaultProps = defaultProps22;\r\n\r\n\r\n","desc":" 点击列的表头，进行左右拖拽"},{"example":<Demo23 />,"title":" 拖拽调整列的宽度","code":"/**\r\n*\r\n* @title 拖拽调整列的宽度\r\n* @description 注：不支持tree结构的表头、合并表头的table【目前支持表头拖拽宽度、交互列一起使用】\r\n*/\r\nimport React, { Component } from 'react';\r\nimport { Table, Icon } from 'tinper-bee'; \r\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\r\n\r\n\n\r\nconst columns23 = [\r\n {\r\n title: \"名字\",\r\n dataIndex: \"a\",\r\n key: \"a\",\r\n width: '200',\r\n fixed:'left'\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: '600'\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: '200',\r\n sumCol: true,\r\n sorter: (a, b) => a.c - b.c\r\n }, \r\n {\r\n title: \"武功级别\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n width: 500,\r\n }\r\n];\r\n\r\nconst data23 = [\r\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\r\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\r\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"31\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"21\" },\r\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"11\" },\r\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"32\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"22\" },\r\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"12\" },\r\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\r\n];\r\n\r\nconst DragColumnTable = dragColumn(Table);\r\n\r\nconst defaultProps23 = {\r\n prefixCls: \"bee-table\"\r\n};\r\n\r\nclass Demo23 extends Component {\r\n constructor(props) {\r\n super(props); \r\n }\r\n\r\n render() {\r\n return <DragColumnTable columns={columns23} data={data23} bordered\r\n dragborder={true} \r\n draggable={true} \r\n scroll={{y:200}}\r\n onDropBorder ={(e,width)=>{\r\n console.log(width+\"--调整列宽后触发事件\",e.target);\r\n }}\r\n />;\r\n }\r\n}\r\nDemo23.defaultProps = defaultProps23;\r\n\r\n\r\n","desc":" 注：不支持tree结构的表头、合并表头的table【目前支持表头拖拽宽度、交互列一起使用】"},{"example":<Demo24 />,"title":" 动态设置固、取消固定列","code":"/**\r\n*\r\n* @title 动态设置固、取消固定列\r\n* @description 动态设置固、取消固定列\r\n* @description 动态固定列设置 一个table动态设置一个方向【fixed: \"left\"，fixed: \"right\"】。\r\n*\r\n*/\r\nimport React, { Component } from 'react';\r\nimport { Table, Dropdown, Menu, Icon } from 'tinper-bee';\r\n\n\n\n\r\n\r\nconst { Item } = Menu;\r\n// const columns24 = [\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: \"address2\", key: \"2\" },\r\n// { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\r\n// { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\r\n// { title: \"Column 24\", dataIndex: \"address\", key: \"24\" },\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\n\r\nconst columns24 = [\r\n {\r\n title: \"名字\",\r\n dataIndex: \"a\",\r\n key: \"a\",\r\n width: 100,\r\n fixed: \"left\",\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: 100,\r\n fixed: \"left\",\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 100, \r\n },\r\n {\r\n title: \"武功级别\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n width: 150 \r\n },\r\n {\r\n title: \"对手\",\r\n dataIndex: \"e\",\r\n key: \"e\",\r\n width: 100 \r\n },\r\n {\r\n title: \"帮派\",\r\n dataIndex: \"f\",\r\n key: \"f\",\r\n width: 100 \r\n },\r\n {\r\n title: \"武功类型\",\r\n dataIndex: \"g\",\r\n key: \"g\",\r\n width: 100 \r\n },\r\n {\r\n title: \"师傅\",\r\n dataIndex: \"k\",\r\n key: \"k\",\r\n // width: 100 \r\n },\r\n {\r\n title: \"攻击系数\",\r\n dataIndex: \"h\",\r\n key: \"h\",\r\n width: 100 \r\n }\r\n];\r\n\r\n\r\nconst data24 = [\r\n { a: \"杨过\", b: \"男\", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: \"1\" },\r\n { a: \"令狐冲\", b: \"男\", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: \"3\" }\r\n]; \r\n \r\nclass Demo24 extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n // let columns = [];\r\n // Object.assign(columns,columns24);\r\n // columns.forEach(da=>da.onHeadCellClick=this.onHeadCellClick);\r\n this.state = {\r\n columns:columns24\r\n }\r\n }\r\n\r\n \r\n onSelect = ({key,item})=>{ \r\n console.log(`${key} selected`); //获取key\r\n let currentObject = item.props.data; //获取选中对象的数据\r\n let {columns} = this.state;\r\n let fixedCols = [];\r\n let nonColums = [];\r\n columns.find(da=>{\r\n if(da.key == key){\r\n da.fixed?delete da.fixed:da.fixed = 'left';\r\n }\r\n da.fixed?fixedCols.push(da):nonColums.push(da);\r\n });\r\n \r\n columns = [...fixedCols,...nonColums]\r\n\r\n this.setState({\r\n columns\r\n });\r\n }\r\n //表头增加下拉菜单\r\n renderColumnsDropdown(columns) {\r\n const icon ='uf-arrow-down';\r\n \r\n return columns.map((originColumn,index) => {\r\n let column = Object.assign({}, originColumn);\r\n let menuInfo = [], title='锁定';\r\n if(originColumn.fixed){\r\n title = '解锁'\r\n }\r\n menuInfo.push({\r\n info:title,\r\n key:originColumn.key,\r\n index:index\r\n });\r\n const menu = (\r\n <Menu onSelect={this.onSelect} >{\r\n menuInfo.map(da=>{ return <Item key={da.key} data={da} >{da.info}</Item> })\r\n }\r\n </Menu>)\r\n column.title = (\r\n <span className='title-con drop-menu'>\r\n {column.title}\r\n <Dropdown\r\n trigger={['click']} \r\n overlay={menu}\r\n animation=\"slide-up\"\r\n >\r\n <Icon type={icon}/>\r\n </Dropdown> \r\n \r\n </span>\r\n );\r\n return column;\r\n });\r\n \r\n }\r\n\r\n render() {\r\n let {columns} = this.state;\r\n columns = this.renderColumnsDropdown(columns);\r\n return <div className=\"demo24\">\r\n <Table columns={columns} data={data24} scroll={{ x: \"110%\", y: 240 }}/>\r\n </div>;\r\n }\r\n}\r\n\r\n","desc":" 动态设置固、取消固定列","scss_code":"th{\r\n .drop-menu{\r\n .uf{\r\n font-size: 12px;\r\n visibility: hidden;\r\n margin-left: 15px;\r\n }\r\n \r\n \r\n }\r\n &:hover{\r\n .uf{\r\n visibility: visible;\r\n }\r\n }\r\n\r\n}\r\n\r\n"},{"example":<Demo25 />,"title":" 根据列进行过滤、拖拽交换列综合使用案例","code":"/**\r\n* @title 根据列进行过滤、拖拽交换列综合使用案例\r\n* @description 新增属性【checkMinSize 当前表格显示最少列数 】 1. 当所有列都设置了width属性后，需要给table增加checkMinSize属性 2. 所有列不设置width。\r\n*/\r\n\r\n/**注：\r\n * 在使用过滤列的时候，如果每一列都设置了width属性，勾选的时候回出现重复列问题。当表格的宽度小于合计宽度的时候，就会出现此问题。 \r\n * 必须有个别列不设置width属性，即可避免此问题。\r\n */\r\nimport React, { Component } from 'react';\r\nimport { Table, Popover, Checkbox, Icon } from 'tinper-bee';\r\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\r\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\r\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\r\n\r\nimport sum from \"tinper-bee/lib/sum\";;\r\n\n\n\n\r\n //Cloumns1\r\nfunction getCloumns(){\r\n const column = [\r\n {\r\n title: \"序号\",\r\n dataIndex: \"index\",\r\n key: \"index\",\r\n width: 100, \r\n },\r\n {\r\n title: \"订单编号\",\r\n dataIndex: \"orderCode\",\r\n key: \"orderCode\",\r\n width: 100, \r\n },\r\n {\r\n title: \"供应商名称\",\r\n dataIndex: \"supplierName\",\r\n key: \"supplierName\",\r\n width: 100\r\n },\r\n {\r\n title: \"类型\",\r\n dataIndex: \"type_name\",\r\n key: \"type_name\",\r\n width: 100\r\n },\r\n {\r\n title: \"采购组织\",\r\n dataIndex: \"purchasing\",\r\n key: \"purchasing\",\r\n width: 100\r\n },\r\n {\r\n title: \"采购组\",\r\n dataIndex: \"purchasingGroup\",\r\n key: \"purchasingGroup\",\r\n width: 300\r\n },\r\n {\r\n title: \"凭证日期\",\r\n dataIndex: \"voucherDate\",\r\n key: \"voucherDate\",\r\n width: 100,\r\n \r\n },\r\n {\r\n title: \"审批状态\",\r\n dataIndex: \"approvalState_name\",\r\n key: \"approvalState_name\",\r\n width: 100\r\n },\r\n {\r\n title: \"确认状态\",\r\n dataIndex: \"confirmState_name\",\r\n key: \"confirmState_name\",\r\n width: 100\r\n }, \r\n {\r\n title: \"关闭状态\",\r\n dataIndex: \"closeState_name\",\r\n key: \"closeState_name\",\r\n width: 100\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n width:100,\r\n fixed: \"right\",\r\n render(text, record, index) {\r\n return (\r\n <div className='operation-btn'>\r\n <a href=\"#\"\r\n tooltip={text}\r\n onClick={() => {\r\n alert('这是第'+index+'列，内容为:'+text);\r\n }}\r\n >\r\n 一些操作\r\n </a>\r\n </div>\r\n )\r\n }\r\n }\r\n ];\r\n return column;\r\n}\r\n\r\nconst dataList = [ \r\n { \r\n index: 1, \r\n orderCode:\"2343\", \r\n supplierName: \"xxx\",\r\n type_name: \"123\",\r\n purchasing:'内行', \r\n purchasingGroup:\"323\",\r\n voucherDate:\"kkkk\",\r\n approvalState_name:\"vvvv\",\r\n confirmState_name:\"aaaa\",\r\n closeState_name:\"vnnnnn\",\r\n d:\"操作\",\r\n key: \"1\"\r\n }, \r\n { \r\n index: 2, \r\n _checked:true,\r\n orderCode:\"222\", \r\n supplierName: \"22xxx\",\r\n type_name: \"1223\",\r\n purchasing:'内行2', \r\n purchasingGroup:\"3223\",\r\n voucherDate:\"222kk\",\r\n approvalState_name:\"22vvvv\",\r\n confirmState_name:\"2aaaa\",\r\n closeState_name:\"2vnnnnn\",\r\n d:\"2操作\",\r\n key: \"2\"\r\n },\r\n { \r\n index: 3, \r\n orderCode:\"222\", \r\n supplierName: \"22xxx\",\r\n _disabled:true,\r\n type_name: \"1223\",\r\n purchasing:'内行2', \r\n purchasingGroup:\"3223\",\r\n voucherDate:\"222kk\",\r\n approvalState_name:\"22vvvv\",\r\n confirmState_name:\"2aaaa\",\r\n closeState_name:\"2vnnnnn\",\r\n d:\"3操作\",\r\n key: \"3\"\r\n },\r\n { \r\n index: 4, \r\n orderCode:\"222\", \r\n supplierName: \"22xxx\",\r\n type_name: \"1223\",\r\n purchasing:'内行2', \r\n purchasingGroup:\"3223\",\r\n voucherDate:\"222kk\",\r\n approvalState_name:\"22vvvv\",\r\n confirmState_name:\"2aaaa\",\r\n closeState_name:\"2vnnnnn\",\r\n d:\"4操作\",\r\n key: \"4\"\r\n },\r\n]\r\n\r\nconst DragColumnTable = filterColumn(dragColumn(multiSelect(Table, Checkbox)),Popover);\r\n\r\nconst defaultProps25 = {\r\n prefixCls: \"bee-table\"\r\n};\r\n\r\nclass Demo25 extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n getSelectedDataFunc=(data)=>{\r\n console.log(\"data\",data);\r\n }\r\n \r\n getCloumnsScroll=(columns)=>{\r\n let sum = 0;\r\n columns.forEach((da)=>{\r\n sum += da.width;\r\n })\r\n console.log(\"sum\",sum);\r\n return (sum);\r\n }\r\n\r\n selectedRow=(record, index)=>{\r\n\r\n }\r\n\r\n render() {\r\n let columns = getCloumns();\r\n \r\n return <div className=\"demo25\">\r\n <DragColumnTable \r\n columns={columns}\r\n data={dataList} \r\n getSelectedDataFunc={this.getSelectedDataFunc}\r\n \r\n checkMinSize={7}\r\n draggable={true}\r\n multiSelect={{type: \"checkbox\"}}\r\n scroll={{x:true, y: 100}}\r\n selectedRow={this.selectedRow}\r\n // scroll={{x:this.getCloumnsScroll(columns), y: 150}}\r\n />\r\n </div>\r\n }\r\n}\r\nDemo25.defaultProps = defaultProps25;\r\n\r\n\r\n","desc":" 新增属性【checkMinSize 当前表格显示最少列数 】 1. 当所有列都设置了width属性后，需要给table增加checkMinSize属性 2. 所有列不设置width。"},{"example":<Demo26 />,"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 'tinper-bee';\r\n\r\n\r\nconst columns26 = [\r\n { title: \"姓名\", width: 180, dataIndex: \"name\", key: \"name\", filterType: \"text\", filterDropdown: \"show\" },\r\n { title: \"年龄\", width: 150, dataIndex: \"age\", key: \"age\", filterType: \"dropdown\", filterDropdown: \"show\" },\r\n { title: \"日期\", width: 200, dataIndex: \"date\", key: \"date\", filterType: \"date\", filterDropdown: \"show\", format: \"YYYY-MM-DD\" },\r\n { title: \"居住地址\", width: 150, dataIndex: \"address\", key: \"address\", filterType: \"dropdown\", filterDropdown: \"show\" },\r\n { title: \"备注\", dataIndex: \"mark\", key: \"mark\" }\r\n];\r\n\r\nconst data26 = [\r\n {\r\n key: \"1\",\r\n name: \"John Brown\",\r\n age: 32,\r\n date: \"2018-09-19\",\r\n address: \"朝阳区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"朝阳区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"东城区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"4\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"东城区\",\r\n mark: \"无\"\r\n }, {\r\n key: \"5\",\r\n name: \"John Brown\",\r\n age: 32,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"6\",\r\n name: \"Jim Green\",\r\n age: 48,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"7\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"8\",\r\n name: \"Jim Green\",\r\n age: 38,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n }\r\n];\r\n\r\nclass Demo26 extends Component {\r\n handlerFilterChange = (key, val, condition) => {\r\n console.log('参数：key=', key, ' value=', val, 'condition=', condition);\r\n }\r\n\r\n handlerFilterClear = (key) => {\r\n console.log('清除条件', key);\r\n }\r\n render() {\r\n return <Table\r\n onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()\r\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\r\n filterDelay={500}//输入文本多少ms触发回调函数，默认300ms\r\n filterable={true}//是否开启过滤数据功能\r\n bordered\r\n columns={columns26}\r\n data={data26} />;\r\n }\r\n}\r\n\r\n","desc":" 可以根据输入项目以及判断条件对表格内的数据进行过滤"},{"example":<Demo27 />,"title":" 组合过滤和其他功能使用","code":"/**\r\n*\r\n* @title 组合过滤和其他功能使用\r\n* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等\r\n*\r\n*/\r\n\r\n/**\r\n * @description \r\n */\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table, Dropdown, Menu, Icon, Checkbox } from 'tinper-bee';\r\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\r\nimport sort from \"tinper-bee/lib/sort\";;\r\n\n\n\n\n\r\n\r\nconst { Item } = Menu;\r\nconst SubMenu = Menu.SubMenu;\r\nconst MenuItemGroup = Menu.ItemGroup;\r\n\r\n\r\nconst dataList = [\r\n { \"key\": \"1\", value: \"库存明细\", id: \"a\" },\r\n { \"key\": \"2\", value: \"订单明细\", id: \"v\" },\r\n { \"key\": \"3\", value: \"发货明细\", id: \"c\" }\r\n]\r\n\r\nconst data27 = [\r\n {\r\n key: \"1\",\r\n name: \"John Brown\",\r\n age: 32,\r\n date: \"2018-09-19\",\r\n address: \"朝阳区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"朝阳区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"东城区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"4\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"东城区\",\r\n mark: \"无\"\r\n }, {\r\n key: \"5\",\r\n name: \"John Brown\",\r\n age: 32,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"6\",\r\n name: \"Jim Green\",\r\n age: 48,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"7\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"8\",\r\n name: \"Jim Green\",\r\n age: 38,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n }\r\n];\r\n\r\n\r\nconst MultiSelectTable = multiSelect(Table, Checkbox);\r\nconst ComplexTable = sort(MultiSelectTable, Icon);\r\nclass Demo27 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n dropdownvalue: []\r\n }\r\n }\r\n handlerFilterChange = (key, val, condition) => {\r\n console.log('参数：key=', key, ' value=', val, 'condition=', condition);\r\n }\r\n\r\n handlerFilterClear = (key) => {\r\n console.log('清除条件', key);\r\n }\r\n getSelectedDataFunc = data => {\r\n console.log(data);\r\n }\r\n onClick = (item) => {\r\n console.log(item);\r\n }\r\n\r\n render() {\r\n const menu1 = (\r\n <Menu onClick={this.onClick} style={{ width: 240 }} mode=\"vertical\" >\r\n <SubMenu key=\"sub1\" title={<span><span>组织 1</span></span>}>\r\n <MenuItemGroup title=\"Item 1\">\r\n <Menu.Item key=\"1\">选项 1</Menu.Item>\r\n <Menu.Item key=\"2\">选项 2</Menu.Item>\r\n </MenuItemGroup>\r\n <MenuItemGroup title=\"Iteom 2\">\r\n <Menu.Item key=\"3\">选项 3</Menu.Item>\r\n <Menu.Item key=\"4\">选项 4</Menu.Item>\r\n </MenuItemGroup>\r\n </SubMenu>\r\n </Menu>)\r\n let multiObj = {\r\n type: \"checkbox\"\r\n };\r\n let columns27 = [\r\n {\r\n title: \"\", width: 40, dataIndex: \"key\", key: \"key\", render: (text, record, index) => {\r\n return <Dropdown\r\n trigger={['click']}\r\n overlay={menu1}\r\n animation=\"slide-up\"\r\n >\r\n <Icon style={{ \"visibility\": \"hidden\" }} type=\"uf-eye\" />\r\n </Dropdown>\r\n }\r\n },\r\n {\r\n title: \"姓名\",\r\n width: 180,\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n filterType: \"text\",//输入框类型\r\n filterDropdown: \"show\",//显示条件\r\n filterDropdownType: \"string\"//字符条件\r\n },\r\n {\r\n title: \"年龄\",\r\n width: 180,\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n filterType: \"number\",//输入框类型\r\n filterDropdown: \"show\",//显示条件\r\n filterDropdownType: \"number\"//字符条件\r\n },\r\n {\r\n title: \"日期\",\r\n width: 190,\r\n dataIndex: \"date\",\r\n key: \"date\",\r\n filterType: \"date\",//输入框类型\r\n filterDropdown: \"show\",//显示条件\r\n filterDropdownType: \"string\"//字符条件\r\n },\r\n {\r\n title: \"时间范围\",\r\n width: 290,\r\n dataIndex: \"mark\",\r\n key: \"mark\",\r\n filterType: \"daterange\",//输入框类型\r\n filterDropdown: \"show\",//显示条件\r\n filterDropdownType: \"number\"//字符条件\r\n },\r\n {\r\n title: \"地址\",\r\n width: 100,\r\n dataIndex: \"address\",\r\n key: \"address\",\r\n filterType: \"dropdown\",//输入框类型\r\n filterDropdown: \"show\",//显示条件\r\n filterDropdownType: \"number\"//字符条件\r\n }\r\n ];\r\n return <ComplexTable\r\n onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()\r\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\r\n filterDelay={500}//输入文本多少ms触发回调函数，默认500ms\r\n filterable={true}//是否开启过滤数据功能\r\n getSelectedDataFunc={this.getSelectedDataFunc}\r\n bordered\r\n multiSelect={multiObj}\r\n columns={columns27}\r\n data={data27} />;\r\n }\r\n}\r\n\r\n","desc":" 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等"},{"example":<Demo28 />,"title":" 列排序,后端排序","code":"/**\r\n*\r\n* @title 列排序,后端排序\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table, Icon } from 'tinper-bee';\r\n\nimport sort from \"tinper-bee/lib/sort.js\";;\r\nlet ComplexTable = sort(Table, Icon);\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: \"d\",\r\n key: \"d\"\r\n },\r\n {\r\n title: \"分数\",\r\n dataIndex: \"e\",\r\n key: \"e\",\r\n sorter: (a, b) => a.c - b.c\r\n },\r\n];\r\n\r\nconst data11 = [\r\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', e:139,key: \"2\" },\r\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', e:109, key: \"1\" },\r\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', e:159, key: \"3\" }\r\n];\r\n\r\nconst defaultProps = {\r\n prefixCls: \"bee-table\"\r\n};\r\nclass Demo28 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 /**\r\n * 后端获取数据\r\n */\r\n sortFun = (sortParam)=>{\r\n console.info(sortParam);\r\n //将参数传递给后端排序\r\n }\r\n render() {\r\n let sortObj = {\r\n mode:'multiple',\r\n backSource:true,\r\n sortFun:this.sortFun\r\n }\r\n return <ComplexTable columns={columns11} data={this.state.data} sort={sortObj}/>;\r\n }\r\n}\r\nDemo28.defaultProps = defaultProps;\r\n\r\n\r\n","desc":""},{"example":<Demo29 />,"title":" 从弹出框内显示过滤行并且设置可选下拉条件","code":"/**\r\n*\r\n* @title 从弹出框内显示过滤行并且设置可选下拉条件\r\n* @description 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table, Button, Modal } from 'tinper-bee';\r\n\n\n\r\n\r\nconst columns29 = [\r\n {\r\n title: \"姓名\",\r\n width: 180,\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n filterType: \"text\",\r\n filterDropdown: \"show\",\r\n filterDropdownIncludeKeys: ['LIKE', 'EQ']\r\n },\r\n {\r\n title: \"年龄\",\r\n width: 170,\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n filterType: \"number\",\r\n filterDropdown: \"show\",\r\n filterDropdownType: \"number\",\r\n filterDropdownIncludeKeys: ['EQ'],\r\n filterInputNumberOptions: {\r\n max: 200,\r\n min: 0,\r\n step: 1,\r\n precision: 0\r\n }\r\n },\r\n {\r\n title: \"日期\",\r\n width: 200,\r\n dataIndex: \"date\",\r\n key: \"date\",\r\n filterType: \"date\",\r\n filterDropdown: \"show\",\r\n format: \"YYYY-MM-DD\"\r\n }\r\n];\r\n\r\nconst data29 = [\r\n {\r\n key: \"1\",\r\n name: \"John Brown\",\r\n age: 32,\r\n date: \"2018-09-19\",\r\n address: \"朝阳区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"朝阳区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"东城区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"4\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"东城区\",\r\n mark: \"无\"\r\n }, {\r\n key: \"5\",\r\n name: \"John Brown\",\r\n age: 32,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"6\",\r\n name: \"Jim Green\",\r\n age: 48,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"7\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"8\",\r\n name: \"Jim Green\",\r\n age: 38,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n }\r\n];\r\n\r\nclass Demo29 extends Component {\r\n constructor() {\r\n super();\r\n this.state = {\r\n show: false\r\n }\r\n this.close = this.close.bind(this);\r\n this.open = this.open.bind(this);\r\n }\r\n handlerFilterChange = (key, val, condition) => {\r\n console.log('参数：key=', key, ' value=', val, 'condition=', condition);\r\n }\r\n\r\n handlerFilterClear = (key) => {\r\n console.log('清除条件', key);\r\n }\r\n close() {\r\n this.setState({\r\n show: false\r\n });\r\n }\r\n open() {\r\n this.setState({\r\n show: true\r\n });\r\n }\r\n render() {\r\n return (<div><Modal\r\n show={this.state.show}\r\n onHide={this.close}\r\n autoFocus={false}\r\n enforceFocus={false}\r\n >\r\n <Modal.Header closeButton>\r\n <Modal.Title>过滤行</Modal.Title>\r\n </Modal.Header>\r\n <Modal.Body>\r\n <Table\r\n onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()\r\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\r\n filterDelay={500}//输入文本多少ms触发回调函数，默认300ms\r\n filterable={true}//是否开启过滤数据功能\r\n bordered\r\n columns={columns29}\r\n data={data29} />\r\n </Modal.Body>\r\n </Modal>\r\n <Button colors=\"primary\" onClick={this.open}>显示表格</Button>\r\n </div>)\r\n }\r\n}\r\n\r\n","desc":" 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件"},{"example":<Demo30 />,"title":" 大数据加载","code":"/**\r\n*\r\n* @title 大数据加载\r\n* 【Tooltip】\r\n* @description\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\n\nimport { Table, Tooltip } from 'tinper-bee';\r\nimport BigData from \"tinper-bee/lib/bigData\";;\r\nconst BigDataTable = BigData(Table);\r\nconst columns = [\r\n {\r\n title:'序号',\r\n dataIndex:'index',\r\n width:'50',\r\n render:(text,record,index)=>{\r\n return index\r\n }\r\n },\r\n {\r\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\r\n render: (text, record, index) => {\r\n return (\r\n <Tooltip inverse overlay={text}>\r\n <span tootip={text} style={{\r\n display: \"inline-block\",\r\n width: \"80px\",\r\n textOverflow: \"ellipsis\",\r\n overflow: \"hidden\",\r\n whiteSpace: \"nowrap\",\r\n verticalAlign: \"middle\",\r\n }}>{text}</span>\r\n </Tooltip>\r\n );\r\n }\r\n },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\r\n\r\n];\r\n\r\nconst data = [ ...new Array(10000) ].map((e, i) => {\r\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\r\n if(i%3==0){\r\n rs.b = '女';\r\n }\r\n return rs;\r\n })\r\n\r\n\r\nclass Demo30 extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <BigDataTable\r\n columns={columns}\r\n data={data}\r\n scroll={{y:300}}\r\n height={40}\r\n onRowClick={(record, index, indent) => {\r\n console.log('currentIndex--'+index);\r\n }}\r\n />\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\n","desc":"","scss_code":".big-data tr td {\r\n // height: 48px;\r\n}"},{"example":<Demo31 />,"title":" 含有嵌套子表格的大数据场景","code":"/**\r\n*\r\n* @title 含有嵌套子表格的大数据场景\r\n* @description 通过expandedRowRender参数来实现子表格\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport BigData from \"tinper-bee/lib/bigData\";;\r\nconst BigDataTable = BigData(Table);\r\nconst outColumns = [\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\", \r\n width:200,\r\n render(text, record, index) {\r\n return (\r\n <a\r\n href=\"#\"\r\n onClick={() => {\r\n alert(\"这是第\" + index + \"列，内容为:\" + text);\r\n }}\r\n >\r\n 一些操作\r\n </a>\r\n );\r\n }\r\n },\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n \r\n];\r\nconst innerColumns = [\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n width:200,\r\n render(text, record, index) {\r\n return (\r\n <a\r\n href=\"#\"\r\n onClick={() => {\r\n alert(\"这是第\" + index + \"列，内容为:\" + text);\r\n }}\r\n >\r\n {'一些操作'+index}\r\n </a>\r\n );\r\n }\r\n },\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];\r\n\r\nconst data16 = [ ...new Array(10000) ].map((e, i) => {\r\n return { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\r\n })\r\n\r\n\r\n\r\n\r\n\r\nclass Demo31 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state={\r\n data_obj:{\r\n 0:[\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\r\n ],\r\n 1: [\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\r\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\r\n ],\r\n }\r\n }\r\n }\r\n expandedRowRender = (record, index, indent) => {\r\n let height = 200;\r\n let innderData = [ ...new Array(100) ].map((e, i) => {\r\n return { a: index+\"-\"+ i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: index+\"-\"+ i };\r\n })\r\n return (\r\n <Table\r\n \r\n columns={innerColumns}\r\n scroll={{y:height}}\r\n data={innderData} \r\n\r\n />\r\n );\r\n };\r\n getData=(expanded, record)=>{\r\n //当点击展开的时候才去请求数据\r\n let new_obj = Object.assign({},this.state.data_obj);\r\n if(expanded){\r\n if(record.key==='1'){\r\n new_obj[record.key] = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\r\n ]\r\n this.setState({\r\n data_obj:new_obj\r\n })\r\n }else{\r\n new_obj[record.key] = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\r\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\r\n ]\r\n this.setState({\r\n data_obj:new_obj\r\n })\r\n }\r\n }\r\n }\r\n haveExpandIcon=(record, index)=>{\r\n //控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效\r\n if(index == 0){\r\n return true;\r\n }\r\n return false;\r\n }\r\n render() {\r\n return (\r\n <BigDataTable\r\n columns={outColumns}\r\n data={data16}\r\n onExpand={this.getData}\r\n expandedRowRender={this.expandedRowRender}\r\n scroll={{y:350}}\r\n // defaultExpandedRowKeys={[0,1]}\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","desc":" 通过expandedRowRender参数来实现子表格"},{"example":<Demo32 />,"title":" 大数据加载下的复杂Table","code":"/**\r\n*\r\n* @title 大数据加载下的复杂Table\r\n*\r\n* @description\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\n\n\n\n\nimport { Table, Popover, Icon, Checkbox, Tooltip } from 'tinper-bee';\r\nimport BigData from \"tinper-bee/lib/bigData\";;\r\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\r\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\r\n\r\nlet ComplexTable = filterColumn(multiSelect(BigData(Table), Checkbox), Popover, Icon);\r\n\r\nconst columns = [\r\n {\r\n title:'序号',\r\n dataIndex:'index',\r\n width:'50',\r\n render:(text,record,index)=>{\r\n return index\r\n }\r\n },\r\n {\r\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\r\n render: (text, record, index) => {\r\n return (\r\n <Tooltip inverse overlay={text}>\r\n <span tootip={text} style={{\r\n display: \"inline-block\",\r\n width: \"80px\",\r\n textOverflow: \"ellipsis\",\r\n overflow: \"hidden\",\r\n whiteSpace: \"nowrap\",\r\n verticalAlign: \"middle\",\r\n }}>{text}</span>\r\n </Tooltip>\r\n );\r\n }\r\n },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\r\n];\r\n\r\nconst data = [ ...new Array(10000) ].map((e, i) => {\r\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\r\n if(i%3==0){\r\n rs.b = '女';\r\n }\r\n return rs;\r\n })\r\n\r\n\r\nclass Demo32 extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n getSelectedDataFunc = data => {\r\n console.log(data);\r\n };\r\n\r\n render() {\r\n return (\r\n <ComplexTable\r\n columns={columns}\r\n data={data}\r\n parentNodeId='parent'\r\n scroll={{y:300}}\r\n height={40}\r\n bordered\r\n onRowClick={(record, index, indent) => {\r\n this.setState({\r\n selectedRowIndex: index\r\n });\r\n }}\r\n getSelectedDataFunc={this.getSelectedDataFunc}/>\r\n\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":""},{"example":<Demo34 />,"title":" 树状结构的大数据场景","code":"/**\r\n*\r\n* @title 树状结构的大数据场景\r\n* 【Tooltip】\r\n* @description\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\n\nimport { Table, Tooltip } from 'tinper-bee';\r\nimport BigData from \"tinper-bee/lib/bigData\";;\r\nconst BigDataTable = BigData(Table);\r\nconst columns = [\r\n {\r\n title:'序号',\r\n dataIndex:'index',\r\n width:'150',\r\n render:(text,record,index)=>{\r\n return index\r\n }\r\n },\r\n {\r\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\r\n render: (text, record, index) => {\r\n return (\r\n <Tooltip inverse overlay={text}>\r\n <span tootip={text} style={{\r\n display: \"inline-block\",\r\n width: \"80px\",\r\n textOverflow: \"ellipsis\",\r\n overflow: \"hidden\",\r\n whiteSpace: \"nowrap\",\r\n verticalAlign: \"middle\",\r\n }}>{text}</span>\r\n </Tooltip>\r\n );\r\n }\r\n },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\r\n];\r\n\r\nconst data = [ ...new Array(1000) ].map((e, i) => {\r\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\r\n if(i%3==0){\r\n rs.b = '女';\r\n rs.children = [];\r\n for(let subi=0;subi<3;subi++){\r\n rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});\r\n }\r\n }else{\r\n rs.children = [];\r\n for(let subi=0;subi<3;subi++){\r\n rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});\r\n }\r\n }\r\n return rs;\r\n })\r\n\r\n\r\nclass Demo30 extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n onExpandedRowsChange = (params)=>{\r\n console.log(params);\r\n }\r\n onExpand = (expandKeys)=>{\r\n console.log('expand---'+expandKeys);\r\n }\r\n render() {\r\n return (\r\n <BigDataTable\r\n columns={columns}\r\n data={data}\r\n parentNodeId='parent'\r\n scroll={{y:300}}\r\n height={40}\r\n onRowClick={(record, index, indent) => {\r\n console.log('currentIndex--'+index);\r\n }}\r\n />\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":""},{"example":<Demo35 />,"title":" hover呼出菜单栏","code":"/**\r\n*\r\n* @title hover呼出菜单栏\r\n* @description\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\n\n\nimport { Table, Tooltip, Button } from 'tinper-bee';\r\n\r\nconst columns = [\r\n {\r\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 80, className: \"rowClassName\",\r\n fixed:'left',\r\n render: (text, record, index) => {\r\n return (\r\n <Tooltip inverse overlay={text}>\r\n <span tootip={text} style={{\r\n display: \"inline-block\",\r\n width: \"60px\",\r\n textOverflow: \"ellipsis\",\r\n overflow: \"hidden\",\r\n whiteSpace: \"nowrap\",\r\n verticalAlign: \"middle\",\r\n }}>{text}</span>\r\n </Tooltip>\r\n );\r\n }\r\n },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 300 },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n render(text, record, index) {\r\n return (\r\n <div style={{ position: 'relative' }} title={text} >\r\n <a\r\n href=\"javascript:;\"\r\n tooltip={text}\r\n onClick={() => {\r\n alert('这是第' + index + '列，内容为:' + text);\r\n }}\r\n >\r\n 一些操作\r\n </a>\r\n </div>\r\n );\r\n }\r\n }\r\n];\r\n\r\nconst data = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\r\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\r\n];\r\n\r\nclass Demo35 extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n\r\n delFun=()=>{\r\n // console.log('click'+this.currentIndex);\r\n let {data} = this.state;\r\n data.splice(this.currentIndex,1);\r\n this.setState({\r\n data\r\n });\r\n }\r\n onRowHover=(index,record)=>{\r\n this.currentIndex = index;\r\n this.currentRecord = record;\r\n }\r\n getHoverContent=()=>{\r\n return <div className=\"opt-btns\"><Button colors=\"primary\" size=\"sm\" onClick={this.delFun}>删除</Button> </div>\r\n }\r\n render() {\r\n return (\r\n \r\n <Table\r\n columns={columns}\r\n data={data}\r\n parentNodeId='parent'\r\n height={43}\r\n headerHeight={42}\r\n hoverContent={this.getHoverContent}\r\n onRowHover={this.onRowHover}\r\n onRowClick={(record, index, indent) => {\r\n this.setState({\r\n selectedRowIndex: index\r\n });\r\n }}\r\n />\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":"","scss_code":""}]
|
||
|
||
|
||
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, scss_code } = this.props;
|
||
let caret = this.state.open ? CARETUP : CARET;
|
||
let text = this.state.open ? "隐藏代码" : "查看代码";
|
||
|
||
const header = (
|
||
<div>
|
||
{example}
|
||
<Button style={{"marginTop": "10px"}} shape="block" onClick={ this.handleClick }>
|
||
{ caret }
|
||
{ text }
|
||
</Button>
|
||
</div>
|
||
);
|
||
return (
|
||
<Col md={12} >
|
||
<h3>{ title }</h3>
|
||
<p>{ desc }</p>
|
||
<Panel copyable collapsible headerContent expanded={ this.state.open } colors='bordered' header={ header } footerStyle = {{padding: 0}}>
|
||
<pre><code className="hljs javascript">{ code }</code></pre>
|
||
{ !!scss_code ? <pre><code className="hljs css">{ scss_code }</code></pre> : null }
|
||
</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} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
|
||
)
|
||
|
||
})}
|
||
</Row>
|
||
)
|
||
}
|
||
}
|
||
|
||
ReactDOM.render(<DemoGroup/>, document.getElementById('tinperBeeDemo'));
|