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