From 63e5afdb783a02d5cf2621ec8180798055d5946c Mon Sep 17 00:00:00 2001 From: zhanghy7 Date: Mon, 25 Sep 2017 15:36:23 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E7=A4=BA=E4=BE=8B=E4=B8=AD?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=90=84=E7=B1=BB=E6=97=A5=E6=9C=9F=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/lib/multiSelect.js | 175 +++++++++++++++++++++++++++++++++ build/lib/sort.js | 147 +++++++++++++++++++++++++++ build/lib/util.js | 1 + build/render/CheckboxRender.js | 104 ++++++++++++++++++++ build/render/DateRender.js | 1 + build/render/InputRender.js | 121 +++++++++++++++++++++++ build/render/RadioRender.js | 1 + demo/demolist/Demo15.js | 63 +++++++++--- demo/index.js | 2 +- 9 files changed, 601 insertions(+), 14 deletions(-) create mode 100644 build/lib/multiSelect.js create mode 100644 build/lib/sort.js create mode 100644 build/lib/util.js create mode 100644 build/render/CheckboxRender.js create mode 100644 build/render/DateRender.js create mode 100644 build/render/InputRender.js create mode 100644 build/render/RadioRender.js diff --git a/build/lib/multiSelect.js b/build/lib/multiSelect.js new file mode 100644 index 0000000..533a2e9 --- /dev/null +++ b/build/lib/multiSelect.js @@ -0,0 +1,175 @@ +"use strict"; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _beeCheckbox = require("bee-checkbox"); + +var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } + +/** + * multiSelect={ + * type--默认值为checkbox + * param--可以设置返回的选中的数据属性；默认值：null； + * } + * getSelectedDataFunc--function，能获取到选中的数据 + * 使用全选时得注意，data中的key值一定要是唯一值 + */ +module.exports = function multiSelect(Table) { + Array.prototype.indexOf = function (val) { + for (var i = 0; i < this.length; i++) { + if (this[i] == val) return i; + } + return -1; + }; + Array.prototype.remove = function (val) { + var index = this.indexOf(val); + if (index > -1) { + this.splice(index, 1); + } + }; + return function (_Component) { + _inherits(BookLoader, _Component); + + function BookLoader(props) { + _classCallCheck(this, BookLoader); + + var _this = _possibleConstructorReturn(this, _Component.call(this, props)); + + _this.onAllCheckChange = function () { + var self = _this; + var listData = self.state.data.concat(); + var checkedObj = _extends({}, self.state.checkedObj); + var data = self.props.data; + var selIds = []; + var id = self.props.multiSelect.param; + for (var i = 0; i < data.length; i++) { + checkedObj[data[i]["key"]] = !self.state.checkedAll; + } + if (self.state.checkedAll) { + selIds = []; + } else { + for (var i = 0; i < listData.length; i++) { + if (id) { + selIds[i] = listData[i][id]; + } else { + selIds[i] = listData[i]; + } + } + } + self.setState({ + checkedAll: !self.state.checkedAll, + checkedObj: checkedObj, + selIds: selIds + }); + self.props.getSelectedDataFunc(selIds); + }; + + _this.onCheckboxChange = function (text, record, index) { + var self = _this; + var allFlag = false; + var selIds = self.state.selIds; + var id = self.props.multiSelect ? self.props.multiSelect.param ? record[self.props.multiSelect.param] : record : record; + var checkedObj = _extends({}, self.state.checkedObj); + var checkedArray = Object.keys(checkedObj); + var getSelectedDataFunc = self.props.getSelectedDataFunc; + + if (checkedObj[record["key"]]) { + selIds.remove(id); + } else { + selIds.push(id); + } + checkedObj[record["key"]] = !checkedObj[record["key"]]; + for (var i = 0; i < checkedArray.length; i++) { + if (!checkedObj[checkedArray[i]]) { + allFlag = false; + break; + } else { + allFlag = true; + } + } + self.setState({ + checkedAll: allFlag, + checkedObj: checkedObj, + selIds: selIds + }); + if (typeof getSelectedDataFunc === 'function') { + getSelectedDataFunc(selIds); + } + }; + + _this.state = { + checkedAll: false, + checkedObj: {}, + selIds: [], + data: _this.props.data + }; + return _this; + } + + BookLoader.prototype.renderColumnsMultiSelect = function renderColumnsMultiSelect(columns) { + var _this2 = this; + + var data = this.state.data; + + var checkedObj = _extends({}, this.state.checkedObj); + var checkedArray = Object.keys(checkedObj); + var multiSelect = this.props.multiSelect; + + var select_column = {}; + var indeterminate_bool = false; + if (!multiSelect || !multiSelect.type) { + multiSelect = _extends({}, multiSelect, { type: "checkbox" }); + } + if (multiSelect && multiSelect.type === "checkbox") { + var i = checkedArray.length; + while (i--) { + if (checkedObj[checkedArray[i]]) { + indeterminate_bool = true; + break; + } + } + var defaultColumns = [{ + title: _react2["default"].createElement(_beeCheckbox2["default"], { + className: "table-checkbox", + checked: this.state.checkedAll, + indeterminate: indeterminate_bool && !this.state.checkedAll, + onChange: this.onAllCheckChange + }), + key: "checkbox", + dataIndex: "checkbox", + width: "5%", + render: function render(text, record, index) { + return _react2["default"].createElement(_beeCheckbox2["default"], { + className: "table-checkbox", + checked: checkedObj[record.key], + onChange: _this2.onCheckboxChange.bind(_this2, text, record, index) + }); + } + }]; + columns = defaultColumns.concat(columns); + } + return columns; + }; + + BookLoader.prototype.render = function render() { + var columns = this.renderColumnsMultiSelect(this.props.columns).concat(); + return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns })); + }; + + return BookLoader; + }(_react.Component); +}; \ No newline at end of file diff --git a/build/lib/sort.js b/build/lib/sort.js new file mode 100644 index 0000000..e6267dd --- /dev/null +++ b/build/lib/sort.js @@ -0,0 +1,147 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +exports["default"] = sort; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _beeIcon = require('bee-icon'); + +var _beeIcon2 = _interopRequireDefault(_beeIcon); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } + +/** + * 参数：prefixCls，默认bee-table,用于设置图标的样式 + * @param {*} Table + */ +function sort(Table) { + return function (_Component) { + _inherits(Demo11, _Component); + + function Demo11(props) { + _classCallCheck(this, Demo11); + + var _this = _possibleConstructorReturn(this, _Component.call(this, props)); + + _this.toggleSortOrder = function (order, column) { + var _this$state = _this.state, + sortOrder = _this$state.sortOrder, + data = _this$state.data, + oldData = _this$state.oldData; + + var ascend_sort = function ascend_sort(key) { + return function (a, b) { + return a.key - b.key; + }; + }; + var descend_sort = function descend_sort(key) { + return function (a, b) { + return b.key - a.key; + }; + }; + if (sortOrder === order) { + // 切换为未排序状态 + order = ""; + } + if (!oldData) { + oldData = data.concat(); + } + if (order === "ascend") { + data = data.sort(function (a, b) { + return column.sorter(a, b); + }); + } else if (order === "descend") { + data = data.sort(function (a, b) { + return column.sorter(b, a); + }); + } else { + data = oldData.concat(); + } + _this.setState({ + sortOrder: order, + data: data, + oldData: oldData + }); + }; + + _this.state = { + sortOrder: "", + data: _this.props.data + }; + return _this; + } + + Demo11.prototype.renderColumnsDropdown = function renderColumnsDropdown(columns) { + var _this2 = this; + + var sortOrder = this.state.sortOrder; + + var prefixCls = this.props.prefixCls || 'bee-table'; + return columns.map(function (originColumn) { + var column = _extends({}, originColumn); + var sortButton = void 0; + if (column.sorter) { + var isAscend = sortOrder === "ascend"; + var isDescend = sortOrder === "descend"; + sortButton = _react2["default"].createElement( + 'div', + { className: prefixCls + '-column-sorter' }, + _react2["default"].createElement( + 'span', + { + className: prefixCls + '-column-sorter-up ' + (isAscend ? "on" : "off"), + title: '\u2191', + onClick: function onClick() { + return _this2.toggleSortOrder("ascend", column); + } + }, + _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-triangle-up' }) + ), + _react2["default"].createElement( + 'span', + { + className: prefixCls + '-column-sorter-down ' + (isDescend ? "on" : "off"), + title: '\u2193', + onClick: function onClick() { + return _this2.toggleSortOrder("descend", column); + } + }, + _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-triangle-down' }) + ) + ); + } + column.title = _react2["default"].createElement( + 'span', + null, + column.title, + sortButton + ); + return column; + }); + }; + + Demo11.prototype.render = function render() { + var columns = this.renderColumnsDropdown(this.props.columns).concat(); + return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns, data: this.state.data })); + }; + + return Demo11; + }(_react.Component); +} +module.exports = exports['default']; \ No newline at end of file diff --git a/build/lib/util.js b/build/lib/util.js new file mode 100644 index 0000000..9a390c3 --- /dev/null +++ b/build/lib/util.js @@ -0,0 +1 @@ +"use strict"; \ No newline at end of file diff --git a/build/render/CheckboxRender.js b/build/render/CheckboxRender.js new file mode 100644 index 0000000..25e06f4 --- /dev/null +++ b/build/render/CheckboxRender.js @@ -0,0 +1,104 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _beeIcon = require("bee-icon"); + +var _beeIcon2 = _interopRequireDefault(_beeIcon); + +var _beeCheckbox = require("bee-checkbox"); + +var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } + +var CheckboxRender = function (_Component) { + _inherits(CheckboxRender, _Component); + + function CheckboxRender() { + var _temp, _this, _ret; + + _classCallCheck(this, CheckboxRender); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = { + value: _this.props.value, + editable: false + }, _this.handleChange = function (e) { + var value = e.target.value; + _this.setState({ value: value }); + }, _this.check = function () { + _this.setState({ editable: false }); + if (_this.props.onChange) { + _this.props.onChange(_this.state.value); + } + }, _this.edit = function () { + _this.setState({ editable: true }); + }, _this.handleKeydown = function (event) { + console.log(event.keyCode); + if (event.keyCode == 13) { + _this.check(); + } + }, _temp), _possibleConstructorReturn(_this, _ret); + } + + CheckboxRender.prototype.render = function render() { + var _state = this.state, + value = _state.value, + editable = _state.editable; + var isclickTrigger = this.props.isclickTrigger; + + var cellContent = ""; + if (editable) { + cellContent = _react2["default"].createElement( + "div", + { className: "editable-cell-input-wrapper" }, + _react2["default"].createElement(_beeCheckbox2["default"], { + onChange: this.handleChange, + onKeyDown: this.handleKeydown, + onBlur: this.check, + autoFocus: true, + value: value + }) + ); + } else { + cellContent = _react2["default"].createElement( + "div", + { className: "editable-cell-text-wrapper" }, + value || " ", + _react2["default"].createElement(_beeIcon2["default"], { + type: "uf-pencil", + className: "editable-cell-icon", + onClick: this.edit + }) + ); + } + return _react2["default"].createElement( + "div", + { className: "editable-cell" }, + cellContent + ); + }; + + return CheckboxRender; +}(_react.Component); + +exports["default"] = CheckboxRender; +module.exports = exports["default"]; \ No newline at end of file diff --git a/build/render/DateRender.js b/build/render/DateRender.js new file mode 100644 index 0000000..9a390c3 --- /dev/null +++ b/build/render/DateRender.js @@ -0,0 +1 @@ +"use strict"; \ No newline at end of file diff --git a/build/render/InputRender.js b/build/render/InputRender.js new file mode 100644 index 0000000..b997edd --- /dev/null +++ b/build/render/InputRender.js @@ -0,0 +1,121 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _beeIcon = require("bee-icon"); + +var _beeIcon2 = _interopRequireDefault(_beeIcon); + +var _beeFormControl = require("bee-form-control"); + +var _beeFormControl2 = _interopRequireDefault(_beeFormControl); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } + +var InputRender = function (_Component) { + _inherits(InputRender, _Component); + + function InputRender() { + var _temp, _this, _ret; + + _classCallCheck(this, InputRender); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = { + value: _this.props.value, + editable: false + }, _this.handleChange = function (e) { + var value = e.target.value; + _this.setState({ value: value }); + }, _this.check = function () { + _this.setState({ editable: false }); + if (_this.props.onChange) { + _this.props.onChange(_this.state.value); + } + }, _this.edit = function () { + _this.setState({ editable: true }); + }, _this.handleKeydown = function (event) { + console.log(event.keyCode); + if (event.keyCode == 13) { + _this.check(); + } + }, _temp), _possibleConstructorReturn(_this, _ret); + } + + InputRender.prototype.render = function render() { + var _state = this.state, + value = _state.value, + editable = _state.editable; + var isclickTrigger = this.props.isclickTrigger; + + var cellContent = ""; + if (editable) { + cellContent = isclickTrigger ? _react2["default"].createElement( + "div", + { className: "editable-cell-input-wrapper" }, + _react2["default"].createElement(_beeFormControl2["default"], { + onChange: this.handleChange, + onKeyDown: this.handleKeydown, + onBlur: this.check, + autoFocus: true, + value: value + }) + ) : _react2["default"].createElement( + "div", + { className: "editable-cell-input-wrapper" }, + _react2["default"].createElement(_beeFormControl2["default"], { + value: value, + onChange: this.handleChange, + onKeyDown: this.handleKeydown + }), + _react2["default"].createElement(_beeIcon2["default"], { + type: "uf-correct", + className: "editable-cell-icon-check", + onClick: this.check + }) + ); + } else { + cellContent = isclickTrigger ? _react2["default"].createElement( + "div", + { className: "editable-cell-text-wrapper", onClick: this.edit }, + value || " " + ) : _react2["default"].createElement( + "div", + { className: "editable-cell-text-wrapper" }, + value || " ", + _react2["default"].createElement(_beeIcon2["default"], { + type: "uf-pencil", + className: "editable-cell-icon", + onClick: this.edit + }) + ); + } + return _react2["default"].createElement( + "div", + { className: "editable-cell" }, + cellContent + ); + }; + + return InputRender; +}(_react.Component); + +exports["default"] = InputRender; +module.exports = exports["default"]; \ No newline at end of file diff --git a/build/render/RadioRender.js b/build/render/RadioRender.js new file mode 100644 index 0000000..9a390c3 --- /dev/null +++ b/build/render/RadioRender.js @@ -0,0 +1 @@ +"use strict"; \ No newline at end of file diff --git a/demo/demolist/Demo15.js b/demo/demolist/Demo15.js index 05bbb4c..c94c27e 100644 --- a/demo/demolist/Demo15.js +++ b/demo/demolist/Demo15.js @@ -18,12 +18,15 @@ import InputRender from "../../src/render/InputRender.js"; //日期控件引入 import DatePicker from 'bee-datepicker'; +import MonthPicker,{ WeekPicker, RangePicker } from 'bee-datepicker'; import zhCN from 'rc-calendar/lib/locale/zh_CN'; import enUS from 'rc-calendar/lib/locale/en_US'; const format = 'YYYY-MM-DD'; +const format2 = 'YYYY-MM'; const dateInputPlaceholder = '选择日期'; +const dateInputPlaceholder2 = '选择年月'; class Demo15 extends React.Component { constructor(props) { @@ -62,7 +65,7 @@ class Demo15 extends React.Component { title: "姓名", dataIndex: "name", key: "name", - width: "30%", + width: "10%", render: (text, record, index) => ( ( { return ( \r\n );\r\n }\r\n },\r\n { title: '日期', dataIndex: 'datepicker', key: 'datepicker', width: 200,\r\n render:()=>{\r\n return(\r\n \r\n \r\n ) \r\n }\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"operation\",\r\n key: \"operation\",\r\n render: (text, record, index) => {\r\n return this.state.dataSource.length > 1 ? (\r\n \r\n \r\n \r\n ) : null;\r\n }\r\n }\r\n ];\r\n }\r\n handleChange = value => {\r\n console.log(`selected ${value}`);\r\n };\r\n onCheckChange = (index, key) => {\r\n return value => {\r\n const dataSource = [...this.state.dataSource];\r\n dataSource[index][key] = value;\r\n this.setState({ dataSource });\r\n };\r\n };\r\n onCellChange = (index, key) => {\r\n return value => {\r\n const dataSource = [...this.state.dataSource];\r\n dataSource[index][key] = value;\r\n this.setState({ dataSource });\r\n };\r\n };\r\n onDelete = index => {\r\n return () => {\r\n const dataSource = [...this.state.dataSource];\r\n dataSource.splice(index, 1);\r\n this.setState({ dataSource });\r\n };\r\n };\r\n handleAdd = () => {\r\n const { count, dataSource } = this.state;\r\n const newData = {\r\n key: count,\r\n name: `凤姐 ${count}`,\r\n age: 32,\r\n address: `100 100 100`\r\n };\r\n this.setState({\r\n dataSource: [...dataSource, newData],\r\n count: count + 1\r\n });\r\n };\r\n\r\n getBodyWrapper = body => {\r\n return (\r\n \r\n {body.props.children}\r\n \r\n );\r\n };\r\n \r\n onSelect = (d) =>{\r\n console.log(d)\r\n };\r\n\r\n onChange = (d) => {\r\n console.log(d)\r\n };\r\n\r\n render() {\r\n const { dataSource } = this.state;\r\n const columns = this.columns;\r\n return (\r\n
\r\n \r\n 添加\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 这是带有增删改功能的表格"},{"example":,"title":" 增删改表格","code":"/**\r\n*\r\n* @title 增删改表格\r\n* @description 这是带有增删改功能的表格\r\n*\r\n*/\r\n\r\nimport Button from \"bee-button\";\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\nimport Animate from \"bee-animate\";\r\nimport Icon from \"bee-icon\";\r\nimport Input from \"bee-form-control\";\r\nimport Popconfirm from \"bee-popconfirm\";\r\n\r\nclass EditableCell extends React.Component {\r\n state = {\r\n value: this.props.value,\r\n editable: false\r\n };\r\n handleChange = e => {\r\n const value = e.target.value;\r\n this.setState({ value });\r\n };\r\n check = () => {\r\n this.setState({ editable: false });\r\n if (this.props.onChange) {\r\n this.props.onChange(this.state.value);\r\n }\r\n };\r\n edit = () => {\r\n this.setState({ editable: true });\r\n };\r\n handleKeydown = event => {\r\n console.log(event.keyCode);\r\n if (event.keyCode == 13) {\r\n this.check();\r\n }\r\n };\r\n render() {\r\n const { value, editable } = this.state;\r\n return (\r\n
\r\n {editable ? (\r\n
\r\n \r\n \r\n
\r\n ) : (\r\n
\r\n {value || \" \"}\r\n \r\n
\r\n )}\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass Demo2 extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.columns = [\r\n {\r\n title: \"姓名\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"30%\",\r\n render: (text, record, index) => (\r\n \r\n )\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"age\",\r\n key: \"age\"\r\n },\r\n {\r\n title: \"你懂的\",\r\n dataIndex: \"address\",\r\n key: \"address\"\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"operation\",\r\n key: \"operation\",\r\n render: (text, record, index) => {\r\n return this.state.dataSource.length > 1 ? (\r\n \r\n \r\n \r\n ) : null;\r\n }\r\n }\r\n ];\r\n\r\n this.state = {\r\n dataSource: [\r\n {\r\n key: \"0\",\r\n name: \"沉鱼\",\r\n age: \"18\",\r\n address: \"96, 77, 89\"\r\n },\r\n {\r\n key: \"1\",\r\n name: \"落雁\",\r\n age: \"16\",\r\n address: \"90, 70, 80\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"闭月\",\r\n age: \"17\",\r\n address: \"80, 60, 80\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"羞花\",\r\n age: \"20\",\r\n address: \"120, 60, 90\"\r\n }\r\n ],\r\n count: 4\r\n };\r\n }\r\n onCellChange = (index, key) => {\r\n return value => {\r\n const dataSource = [...this.state.dataSource];\r\n dataSource[index][key] = value;\r\n this.setState({ dataSource });\r\n };\r\n };\r\n onDelete = index => {\r\n return () => {\r\n const dataSource = [...this.state.dataSource];\r\n dataSource.splice(index, 1);\r\n this.setState({ dataSource });\r\n };\r\n };\r\n handleAdd = () => {\r\n const { count, dataSource } = this.state;\r\n const newData = {\r\n key: count,\r\n name: `凤姐 ${count}`,\r\n age: 32,\r\n address: `100 100 100`\r\n };\r\n this.setState({\r\n dataSource: [...dataSource, newData],\r\n count: count + 1\r\n });\r\n };\r\n\r\n getBodyWrapper = body => {\r\n return (\r\n \r\n {body.props.children}\r\n \r\n );\r\n };\r\n render() {\r\n const { dataSource } = this.state;\r\n const columns = this.columns;\r\n return (\r\n
\r\n \r\n 添加\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 这是带有增删改功能的表格"},{"example":,"title":" 更灵活的表格","code":"/**\r\n*\r\n* @title 更灵活的表格\r\n* @description 手写表格的头组件来达到更灵活的配置表格\r\n*\r\n*/\r\n\r\n\r\nimport Button from 'bee-button';\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst data3 = [\r\n { a: '北京', b: '北京', c: '250', d: 2, key: '1' },\r\n];\r\n\r\nclass Demo3 extends Component {\r\n render () {\r\n return (\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n return (\r\n \r\n );\r\n }}\r\n />\r\n
\r\n )\r\n }\r\n}\r\n\r\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 树形数据展示","code":"/**\r\n*\r\n* @title 树形数据展示\r\n* @description 手写表格的头组件来达到更灵活的配置表格\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns4 = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"40%\"\r\n },\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: \"30%\"\r\n },\r\n {\r\n title: \"Address\",\r\n dataIndex: \"address\",\r\n key: \"address\"\r\n }\r\n];\r\n\r\nconst data4 = [\r\n {\r\n key: 1,\r\n name: \"John Brown sr.\",\r\n age: 60,\r\n address: \"New York No. 1 Lake Park\",\r\n children: [\r\n {\r\n key: 11,\r\n name: \"John Brown\",\r\n age: 42,\r\n address: \"New York No. 2 Lake Park\"\r\n },\r\n {\r\n key: 12,\r\n name: \"John Brown jr.\",\r\n age: 30,\r\n address: \"New York No. 3 Lake Park\",\r\n children: [\r\n {\r\n key: 121,\r\n name: \"Jimmy Brown\",\r\n age: 16,\r\n address: \"New York No. 3 Lake Park\"\r\n }\r\n ]\r\n },\r\n {\r\n key: 13,\r\n name: \"Jim Green sr.\",\r\n age: 72,\r\n address: \"London No. 1 Lake Park\",\r\n children: [\r\n {\r\n key: 131,\r\n name: \"Jim Green\",\r\n age: 42,\r\n address: \"London No. 2 Lake Park\",\r\n children: [\r\n {\r\n key: 1311,\r\n name: \"Jim Green jr.\",\r\n age: 25,\r\n address: \"London No. 3 Lake Park\"\r\n },\r\n {\r\n key: 1312,\r\n name: \"Jimmy Green sr.\",\r\n age: 18,\r\n address: \"London No. 4 Lake Park\"\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n key: 2,\r\n name: \"Joe Black\",\r\n age: 32,\r\n address: \"Sidney No. 1 Lake Park\"\r\n }\r\n];\r\nclass Demo4 extends Component {\r\n render() {\r\n return ;\r\n }\r\n}\r\n\r\n\r\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 固定列","code":"/**\r\n*\r\n* @title 固定列\r\n* @description 固定列到表格的某侧\r\n*\r\n*/\r\n\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\n\r\nconst columns5 = [\r\n {\r\n title: \"Full Name\",\r\n width: 100,\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n fixed: \"left\"\r\n },\r\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\r\n { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\r\n { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\r\n { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\r\n { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\r\n { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\r\n { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\r\n { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\r\n { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\r\n];\r\n\r\nconst data5 = [\r\n {\r\n key: \"1\",\r\n name: \"John Brown\",\r\n age: 32,\r\n address: \"New York Park\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"4\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n }\r\n];\r\n\r\nclass Demo5 extends Component {\r\n render() {\r\n return
;\r\n }\r\n}\r\n\r\n","desc":" 固定列到表格的某侧"},{"example":,"title":" 固定表头","code":"/**\r\n*\r\n* @title 固定表头\r\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns6 = [\r\n {\r\n title: \"Full Name\",\r\n width: 100,\r\n dataIndex: \"name\",\r\n key: \"name\"\r\n },\r\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\r\n { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\r\n { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\r\n { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\r\n { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\r\n { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\r\n { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\r\n { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\r\n { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\r\n];\r\n\r\nconst data6 = [\r\n {\r\n key: \"1\",\r\n name: \"John Brown\",\r\n age: 32,\r\n address: \"New York Park\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"4\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },{\r\n key: \"11\",\r\n name: \"John Brown\",\r\n age: 32,\r\n address: \"New York Park\"\r\n },\r\n {\r\n key: \"12\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"13\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"14\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n }\r\n];\r\n\r\nclass Demo6 extends Component {\r\n render() {\r\n return
;\r\n }\r\n}\r\n\r\n","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。"},{"example":,"title":" 主子表","code":"/**\r\n*\r\n* @title 主子表\r\n* @description 主表点击子表联动\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\n\r\nconst columns7 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\"},\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\"},\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\"},\r\n {\r\n title: \"操作\",\r\n dataIndex: \"\",\r\n key: \"d\",\r\n render() {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\n\r\nconst data7 = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\n\r\nconst columns7_1 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\"},\r\n { id: \"123\", title: \"班级\", dataIndex: \"b\", key: \"b\"},\r\n { title: \"系别\", dataIndex: \"c\", key: \"c\"}\r\n];\r\n\r\nclass Demo7 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n children_data : []\r\n }\r\n }\r\n rowclick = (record, index) => {\r\n console.log(record)\r\n console.log(index)\r\n if(record.a === '令狐冲'){\r\n this.setState({\r\n children_data: [\r\n { a: \"令狐冲\", b: \"01班\", c: '文学系', key: \"1\" },\r\n ]\r\n })\r\n }else if(record.a === '杨过'){\r\n this.setState({\r\n children_data: [\r\n { a: \"杨过\", b: \"01班\", c: '外语系', key: \"2\" },\r\n ]\r\n })\r\n }else if(record.a === '郭靖'){\r\n this.setState({\r\n children_data: [\r\n { a: \"郭靖\", b: \"02班\", c: '美术系', key: \"3\" }\r\n ]\r\n })\r\n }\r\n }\r\n render() {\r\n return (\r\n
\r\n
标题: 我是主表
}\r\n />\r\n
标题: 我是子表
}\r\n />\r\n
\r\n );\r\n }\r\n}\r\n\r\n","desc":" 主表点击子表联动"},{"example":,"title":" 表格+分页","code":"/**\r\n*\r\n* @title 表格+分页\r\n* @description 点击分页联动表格\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Pagination from \"bee-pagination\";\r\n\r\n\r\nconst columns8 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"\",\r\n key: \"d\",\r\n render() {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\n\r\nclass Demo8 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data8: [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n ],\r\n activePage: 1\r\n };\r\n }\r\n handleSelect(eventKey) {\r\n if(eventKey === 1){\r\n this.setState({\r\n data8: [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n ],\r\n activePage: eventKey\r\n });\r\n }else{\r\n this.setState({\r\n data8: [\r\n { a: \"芙蓉姐姐\", b: \"女\", c: 23, key: \"1\" }\r\n ],\r\n activePage: eventKey\r\n });\r\n }\r\n \r\n }\r\n render() {\r\n return (\r\n
\r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\n","desc":" 点击分页联动表格"},{"example":,"title":" 表格+搜索","code":"/**\r\n*\r\n* @title 表格+搜索\r\n* @description 搜索刷新表格数据\r\n*\r\n*/\r\n\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Icon from \"bee-icon\";\r\nimport InputGroup from 'bee-input-group';\r\nimport FormControl from 'bee-form-control';\r\n\r\n\r\nclass Search extends Component {\r\n state = {\r\n searchValue: \"\",\r\n empty: false\r\n };\r\n\r\n /**\r\n * 搜索\r\n */\r\n handleSearch = () => {\r\n let { onSearch,handleToChange } = this.props;\r\n handleToChange && handleToChange();\r\n onSearch && onSearch(this.state.searchValue);\r\n };\r\n\r\n /**\r\n * 捕获回车\r\n * @param e\r\n */\r\n handleKeyDown = e => {\r\n if (e.keyCode === 13) {\r\n this.handleSearch();\r\n }\r\n };\r\n\r\n /**\r\n * 输入框改变\r\n * @param e\r\n */\r\n handleChange = e => {\r\n this.setState({\r\n searchValue: e.target.value\r\n });\r\n };\r\n\r\n /**\r\n * 清空输入框\r\n */\r\n emptySearch = () => {\r\n let { onEmpty } = this.props;\r\n this.setState({\r\n searchValue: \"\",\r\n empty: false\r\n });\r\n onEmpty && onEmpty();\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.state.empty\r\n ? \r\n : null}\r\n\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst columns9 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"\",\r\n key: \"d\",\r\n render() {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\n\r\nclass Demo9 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n ]\r\n };\r\n }\r\n handleSearchToTable=()=>{\r\n this.setState({\r\n data: [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" }\r\n ]\r\n })\r\n }\r\n render() {\r\n return (\r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\n","desc":" 搜索刷新表格数据"}] +var Demo1 = require("./demolist/Demo1");var Demo10 = require("./demolist/Demo10");var Demo11 = require("./demolist/Demo11");var Demo12 = require("./demolist/Demo12");var Demo13 = require("./demolist/Demo13");var Demo14 = require("./demolist/Demo14");var Demo15 = require("./demolist/Demo15");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var Demo7 = require("./demolist/Demo7");var Demo8 = require("./demolist/Demo8");var Demo9 = require("./demolist/Demo9");var DemoArray = [{"example":,"title":" 简单表格","code":"/**\r\n*\r\n* @title 简单表格\r\n* @description\r\n*\r\n*/\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns = [\r\n { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },\r\n { id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },\r\n { title: '年龄', dataIndex: 'c', key: 'c', width: 200 },\r\n {\r\n title: '操作', dataIndex: '', key: 'd', render() {\r\n return 一些操作;\r\n },\r\n },\r\n];\r\n\r\nconst data = [\r\n { a: '令狐冲', b: '男', c: 41, key: '1' },\r\n { a: '杨过', b: '男', c: 67, key: '2' },\r\n { a: '郭靖', b: '男', c: 25, key: '3' },\r\n];\r\n\r\nclass Demo1 extends Component {\r\n render () {\r\n return (\r\n
标题: 这是一个标题
}\r\n footer={currentData =>
表尾: 我是小尾巴
}\r\n />\r\n )\r\n }\r\n}\r\n\r\n\r\n\r\n","desc":""},{"example":,"title":" 无数据时显示","code":"/**\r\n*\r\n* @title 无数据时显示\r\n* @description 无数据时显示效果展示\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns10 = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"40%\"\r\n },\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: \"30%\"\r\n },\r\n {\r\n title: \"Address\",\r\n dataIndex: \"address\",\r\n key: \"address\"\r\n }\r\n ];\r\n \r\n const data10 = [\r\n \r\n ];\r\n\r\n const emptyFunc = () => 这里没有数据！\r\n \r\n class Demo10 extends Component {\r\n render() {\r\n return
;\r\n }\r\n }\r\n\r\n","desc":" 无数据时显示效果展示"},{"example":,"title":" 列排序","code":"/**\r\n*\r\n* @title 列排序\r\n* @description 列排序\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Icon from \"bee-icon\";\r\n\r\nconst columns11 = [\r\n {\r\n title: \"名字\",\r\n dataIndex: \"a\",\r\n key: \"a\",\r\n width: 100\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: 100\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n sorter: (a, b) => a.c - b.c\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"\",\r\n key: \"d\",\r\n render() {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\n\r\nconst data11 = [\r\n { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\n\r\nconst defaultProps11 = {\r\n prefixCls: \"bee-table\"\r\n};\r\nclass Demo11 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n sortOrder: \"\",\r\n data: data11\r\n };\r\n }\r\n toggleSortOrder=(order, column)=> {\r\n let { sortOrder, data, oldData } = this.state;\r\n let ascend_sort = function(key) {\r\n return function(a, b) {\r\n return a.key - b.key;\r\n };\r\n };\r\n let descend_sort = function(key) {\r\n return function(a, b) {\r\n return b.key - a.key;\r\n };\r\n };\r\n if (sortOrder === order) {\r\n // 切换为未排序状态\r\n order = \"\";\r\n }\r\n if (!oldData) {\r\n oldData = data.concat();\r\n }\r\n if (order === \"ascend\") {\r\n data = data.sort(function(a, b) {\r\n return column.sorter(a, b);\r\n });\r\n } else if (order === \"descend\") {\r\n data = data.sort(function(a, b) {\r\n return column.sorter(b, a);\r\n });\r\n } else {\r\n data = oldData.concat();\r\n }\r\n this.setState({\r\n sortOrder: order,\r\n data: data,\r\n oldData: oldData\r\n });\r\n }\r\n renderColumnsDropdown(columns) {\r\n const { sortOrder } = this.state;\r\n const { prefixCls } = this.props;\r\n\r\n return columns.map(originColumn => {\r\n let column = Object.assign({}, originColumn);\r\n let sortButton;\r\n if (column.sorter) {\r\n const isAscend = sortOrder === \"ascend\";\r\n const isDescend = sortOrder === \"descend\";\r\n sortButton = (\r\n
\r\n this.toggleSortOrder(\"ascend\", column)}\r\n >\r\n \r\n \r\n this.toggleSortOrder(\"descend\", column)}\r\n >\r\n \r\n \r\n
\r\n );\r\n }\r\n column.title = (\r\n \r\n {column.title}\r\n {sortButton}\r\n \r\n );\r\n return column;\r\n });\r\n }\r\n render() {\r\n let columns = this.renderColumnsDropdown(columns11);\r\n return
;\r\n }\r\n}\r\nDemo11.defaultProps = defaultProps11;\r\n\r\n\r\n","desc":" 列排序"},{"example":,"title":" 全选功能","code":"/**\r\n*\r\n* @title 全选功能\r\n* @description 全选功能\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Checkbox from \"bee-checkbox\";\r\n\r\nconst columns12 = [\r\n {\r\n title: \"名字\",\r\n dataIndex: \"a\",\r\n key: \"a\",\r\n width: 100\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: 100\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n sorter: (a, b) => a.c - b.c\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"\",\r\n key: \"d\",\r\n render() {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\n\r\nconst data12 = [\r\n { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\n\r\nconst defaultProps12 = {\r\n prefixCls: \"bee-table\",\r\n multiSelect: {\r\n type: \"checkbox\",\r\n param: \"key\"\r\n }\r\n};\r\nclass Demo12 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n checkedAll:false,\r\n checkedArray: [\r\n false,\r\n false,\r\n false,\r\n ],\r\n data: data12\r\n };\r\n }\r\n onAllCheckChange = () => {\r\n let self = this;\r\n let checkedArray = [];\r\n let listData = self.state.data.concat();\r\n let selIds = [];\r\n // let id = self.props.multiSelect.param;\r\n for (var i = 0; i < self.state.checkedArray.length; i++) {\r\n checkedArray[i] = !self.state.checkedAll;\r\n }\r\n // if (self.state.checkedAll) {\r\n // selIds = [];\r\n // } else {\r\n // for (var i = 0; i < listData.length; i++) {\r\n // selIds[i] = listData[i][id];\r\n // }\r\n // }\r\n self.setState({\r\n checkedAll: !self.state.checkedAll,\r\n checkedArray: checkedArray,\r\n // selIds: selIds\r\n });\r\n // self.props.onSelIds(selIds);\r\n };\r\n onCheckboxChange = (text, record, index) => {\r\n let self = this;\r\n let allFlag = false;\r\n // let selIds = self.state.selIds;\r\n // let id = self.props.postId;\r\n let checkedArray = self.state.checkedArray.concat();\r\n // if (self.state.checkedArray[index]) {\r\n // selIds.remove(record[id]);\r\n // } else {\r\n // selIds.push(record[id]);\r\n // }\r\n checkedArray[index] = !self.state.checkedArray[index];\r\n for (var i = 0; i < self.state.checkedArray.length; i++) {\r\n if (!checkedArray[i]) {\r\n allFlag = false;\r\n break;\r\n } else {\r\n allFlag = true;\r\n }\r\n }\r\n self.setState({\r\n checkedAll: allFlag,\r\n checkedArray: checkedArray,\r\n // selIds: selIds\r\n });\r\n // self.props.onSelIds(selIds);\r\n };\r\n renderColumnsMultiSelect(columns) {\r\n const { data,checkedArray } = this.state;\r\n const { multiSelect } = this.props;\r\n let select_column = {};\r\n let indeterminate_bool = false;\r\n // let indeterminate_bool1 = true;\r\n if (multiSelect && multiSelect.type === \"checkbox\") {\r\n let i = checkedArray.length;\r\n while(i--){\r\n if(checkedArray[i]){\r\n indeterminate_bool = true;\r\n break;\r\n }\r\n }\r\n let defaultColumns = [\r\n {\r\n title: (\r\n \r\n ),\r\n key: \"checkbox\",\r\n dataIndex: \"checkbox\",\r\n width: \"5%\",\r\n render: (text, record, index) => {\r\n return (\r\n \r\n );\r\n }\r\n }\r\n ];\r\n columns = defaultColumns.concat(columns);\r\n }\r\n return columns;\r\n }\r\n render() {\r\n let columns = this.renderColumnsMultiSelect(columns12);\r\n return
;\r\n }\r\n}\r\nDemo12.defaultProps = defaultProps12;\r\n\r\n","desc":" 全选功能"},{"example":,"title":" 列排序、全选功能","code":"/**\r\n*\r\n* @title 列排序、全选功能\r\n* @description 列排序、全选功能\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\nimport Checkbox from \"bee-checkbox\";\r\nimport multiSelect from \"../../src/lib/multiSelect.js\";\r\nimport sort from \"../../src/lib/sort.js\";\r\n\r\nconst columns13 = [\r\n {\r\n title: \"名字\",\r\n dataIndex: \"a\",\r\n key: \"a\",\r\n width: 100\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: 100\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n sorter: (a, b) => a.c - b.c\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"\",\r\n key: \"d\",\r\n render() {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\n\r\nconst data13 = [\r\n { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\nclass Demo13 extends Component {\r\n getSelectedDataFunc = (data) =>{\r\n console.log(data)\r\n }\r\n render() {\r\n let multiObj = {\r\n type: \"checkbox\",\r\n param: \"key\"\r\n };\r\n let ComplexTable = multiSelect(sort(Table));\r\n return (\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n","desc":" 列排序、全选功能"},{"example":,"title":" 合计表格","code":"/**\r\n*\r\n* @title 合计表格\r\n* @description\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\n\r\nconst columns14 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n heji: true,\r\n render(data) {\r\n return 一些操作;\r\n }\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n render(data) {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\nconst columns14_ = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n heji: true\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\"\r\n }\r\n];\r\n\r\nconst data14 = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" },\r\n { a: \"合计\", d: \"11\", key: \"31\" }\r\n];\r\n\r\nconst data14_ = [\r\n { a: \"郭靖\", b: \"男\", c: 25,d:11, key: \"3\" }\r\n];\r\n\r\nclass Demo14 extends Component {\r\n render() {\r\n return (\r\n
标题: 这是一个标题
}\r\n footer={currentData => (\r\n \r\n )}\r\n />\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":""},{"example":,"title":" edittype表格","code":"/**\r\n*\r\n* @title edittype表格\r\n* @description 这是带有增删改功能的表格\r\n*\r\n*/\r\n\r\nimport Button from \"bee-button\";\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\nimport Animate from \"bee-animate\";\r\nimport Icon from \"bee-icon\";\r\nimport Input from \"bee-form-control\";\r\nimport Checkbox from \"bee-checkbox\";\r\nimport Select from 'bee-select';\r\nimport Popconfirm from \"bee-popconfirm\";\r\nimport InputRender from \"../../src/render/InputRender.js\";\r\n\r\n//日期控件引入\r\nimport DatePicker from 'bee-datepicker';\r\nimport MonthPicker,{ WeekPicker, RangePicker } from 'bee-datepicker';\r\nimport zhCN from 'rc-calendar/lib/locale/zh_CN';\r\nimport enUS from 'rc-calendar/lib/locale/en_US';\r\n\r\nconst format = 'YYYY-MM-DD';\r\nconst format2 = 'YYYY-MM';\r\n\r\nconst dateInputPlaceholder = '选择日期';\r\nconst dateInputPlaceholder2 = '选择年月';\r\n\r\nclass Demo15 extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n dataSource: [\r\n {\r\n key: \"0\",\r\n name: \"沉鱼\",\r\n age: \"y\",\r\n address: \"96, 77, 89\"\r\n },\r\n {\r\n key: \"1\",\r\n name: \"落雁\",\r\n age: \"y\",\r\n address: \"90, 70, 80\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"闭月\",\r\n age: \"n\",\r\n address: \"80, 60, 80\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"羞花\",\r\n age: \"y\",\r\n address: \"120, 60, 90\"\r\n }\r\n ],\r\n count: 4\r\n };\r\n this.columns = [\r\n {\r\n title: \"姓名\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"10%\",\r\n render: (text, record, index) => (\r\n \r\n )\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: \"10%\",\r\n render: (text, record, index) => (\r\n \r\n )\r\n },\r\n {\r\n title: \"你懂的\",\r\n dataIndex: \"address\",\r\n key: \"address\",\r\n width: \"10%\",\r\n render: (text, record, index) => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n },\r\n { title: '日期', dataIndex: 'datepicker', key: 'datepicker', width: \"10%\",\r\n render:()=>{\r\n return(\r\n \r\n \r\n ) \r\n }\r\n },\r\n { title: '年月', dataIndex: 'MonthPicker', key: 'MonthPicker', width: \"10%\",\r\n render:()=>{\r\n return(\r\n \r\n \r\n ) \r\n }\r\n },\r\n { title: '周', dataIndex: 'WeekPicker', key: 'WeekPicker', width: \"10%\",\r\n render:()=>{\r\n return(\r\n \r\n ) \r\n }\r\n },\r\n { title: '日期范围', dataIndex: 'RangePicker', key: 'RangePicker', width: \"10%\",\r\n render:()=>{\r\n return(\r\n \r\n ) \r\n }\r\n }\r\n \r\n ];\r\n }\r\n handleChange = value => {\r\n console.log(`selected ${value}`);\r\n };\r\n onCheckChange = (index, key) => {\r\n return value => {\r\n const dataSource = [...this.state.dataSource];\r\n dataSource[index][key] = value;\r\n this.setState({ dataSource });\r\n };\r\n };\r\n onCellChange = (index, key) => {\r\n return value => {\r\n const dataSource = [...this.state.dataSource];\r\n dataSource[index][key] = value;\r\n this.setState({ dataSource });\r\n };\r\n };\r\n onDelete = index => {\r\n return () => {\r\n const dataSource = [...this.state.dataSource];\r\n dataSource.splice(index, 1);\r\n this.setState({ dataSource });\r\n };\r\n };\r\n handleAdd = () => {\r\n const { count, dataSource } = this.state;\r\n const newData = {\r\n key: count,\r\n name: `凤姐 ${count}`,\r\n age: 32,\r\n address: `100 100 100`\r\n };\r\n this.setState({\r\n dataSource: [...dataSource, newData],\r\n count: count + 1\r\n });\r\n };\r\n\r\n getBodyWrapper = body => {\r\n return (\r\n \r\n {body.props.children}\r\n \r\n );\r\n };\r\n \r\n onSelect = (d) =>{\r\n console.log(d)\r\n };\r\n\r\n onChange = (d) => {\r\n console.log(d)\r\n };\r\n\r\n render() {\r\n const { dataSource } = this.state;\r\n const columns = this.columns;\r\n return (\r\n
\r\n \r\n 添加\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 这是带有增删改功能的表格"},{"example":,"title":" 增删改表格","code":"/**\r\n*\r\n* @title 增删改表格\r\n* @description 这是带有增删改功能的表格\r\n*\r\n*/\r\n\r\nimport Button from \"bee-button\";\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\nimport Animate from \"bee-animate\";\r\nimport Icon from \"bee-icon\";\r\nimport Input from \"bee-form-control\";\r\nimport Popconfirm from \"bee-popconfirm\";\r\n\r\nclass EditableCell extends React.Component {\r\n state = {\r\n value: this.props.value,\r\n editable: false\r\n };\r\n handleChange = e => {\r\n const value = e.target.value;\r\n this.setState({ value });\r\n };\r\n check = () => {\r\n this.setState({ editable: false });\r\n if (this.props.onChange) {\r\n this.props.onChange(this.state.value);\r\n }\r\n };\r\n edit = () => {\r\n this.setState({ editable: true });\r\n };\r\n handleKeydown = event => {\r\n console.log(event.keyCode);\r\n if (event.keyCode == 13) {\r\n this.check();\r\n }\r\n };\r\n render() {\r\n const { value, editable } = this.state;\r\n return (\r\n
\r\n {editable ? (\r\n
\r\n \r\n \r\n
\r\n ) : (\r\n
\r\n {value || \" \"}\r\n \r\n
\r\n )}\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass Demo2 extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.columns = [\r\n {\r\n title: \"姓名\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"30%\",\r\n render: (text, record, index) => (\r\n \r\n )\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"age\",\r\n key: \"age\"\r\n },\r\n {\r\n title: \"你懂的\",\r\n dataIndex: \"address\",\r\n key: \"address\"\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"operation\",\r\n key: \"operation\",\r\n render: (text, record, index) => {\r\n return this.state.dataSource.length > 1 ? (\r\n \r\n \r\n \r\n ) : null;\r\n }\r\n }\r\n ];\r\n\r\n this.state = {\r\n dataSource: [\r\n {\r\n key: \"0\",\r\n name: \"沉鱼\",\r\n age: \"18\",\r\n address: \"96, 77, 89\"\r\n },\r\n {\r\n key: \"1\",\r\n name: \"落雁\",\r\n age: \"16\",\r\n address: \"90, 70, 80\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"闭月\",\r\n age: \"17\",\r\n address: \"80, 60, 80\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"羞花\",\r\n age: \"20\",\r\n address: \"120, 60, 90\"\r\n }\r\n ],\r\n count: 4\r\n };\r\n }\r\n onCellChange = (index, key) => {\r\n return value => {\r\n const dataSource = [...this.state.dataSource];\r\n dataSource[index][key] = value;\r\n this.setState({ dataSource });\r\n };\r\n };\r\n onDelete = index => {\r\n return () => {\r\n const dataSource = [...this.state.dataSource];\r\n dataSource.splice(index, 1);\r\n this.setState({ dataSource });\r\n };\r\n };\r\n handleAdd = () => {\r\n const { count, dataSource } = this.state;\r\n const newData = {\r\n key: count,\r\n name: `凤姐 ${count}`,\r\n age: 32,\r\n address: `100 100 100`\r\n };\r\n this.setState({\r\n dataSource: [...dataSource, newData],\r\n count: count + 1\r\n });\r\n };\r\n\r\n getBodyWrapper = body => {\r\n return (\r\n \r\n {body.props.children}\r\n \r\n );\r\n };\r\n render() {\r\n const { dataSource } = this.state;\r\n const columns = this.columns;\r\n return (\r\n
\r\n \r\n 添加\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 这是带有增删改功能的表格"},{"example":,"title":" 更灵活的表格","code":"/**\r\n*\r\n* @title 更灵活的表格\r\n* @description 手写表格的头组件来达到更灵活的配置表格\r\n*\r\n*/\r\n\r\n\r\nimport Button from 'bee-button';\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst data3 = [\r\n { a: '北京', b: '北京', c: '250', d: 2, key: '1' },\r\n];\r\n\r\nclass Demo3 extends Component {\r\n render () {\r\n return (\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n {\r\n return (\r\n \r\n );\r\n }}\r\n />\r\n
\r\n )\r\n }\r\n}\r\n\r\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 树形数据展示","code":"/**\r\n*\r\n* @title 树形数据展示\r\n* @description 手写表格的头组件来达到更灵活的配置表格\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns4 = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"40%\"\r\n },\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: \"30%\"\r\n },\r\n {\r\n title: \"Address\",\r\n dataIndex: \"address\",\r\n key: \"address\"\r\n }\r\n];\r\n\r\nconst data4 = [\r\n {\r\n key: 1,\r\n name: \"John Brown sr.\",\r\n age: 60,\r\n address: \"New York No. 1 Lake Park\",\r\n children: [\r\n {\r\n key: 11,\r\n name: \"John Brown\",\r\n age: 42,\r\n address: \"New York No. 2 Lake Park\"\r\n },\r\n {\r\n key: 12,\r\n name: \"John Brown jr.\",\r\n age: 30,\r\n address: \"New York No. 3 Lake Park\",\r\n children: [\r\n {\r\n key: 121,\r\n name: \"Jimmy Brown\",\r\n age: 16,\r\n address: \"New York No. 3 Lake Park\"\r\n }\r\n ]\r\n },\r\n {\r\n key: 13,\r\n name: \"Jim Green sr.\",\r\n age: 72,\r\n address: \"London No. 1 Lake Park\",\r\n children: [\r\n {\r\n key: 131,\r\n name: \"Jim Green\",\r\n age: 42,\r\n address: \"London No. 2 Lake Park\",\r\n children: [\r\n {\r\n key: 1311,\r\n name: \"Jim Green jr.\",\r\n age: 25,\r\n address: \"London No. 3 Lake Park\"\r\n },\r\n {\r\n key: 1312,\r\n name: \"Jimmy Green sr.\",\r\n age: 18,\r\n address: \"London No. 4 Lake Park\"\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n key: 2,\r\n name: \"Joe Black\",\r\n age: 32,\r\n address: \"Sidney No. 1 Lake Park\"\r\n }\r\n];\r\nclass Demo4 extends Component {\r\n render() {\r\n return ;\r\n }\r\n}\r\n\r\n\r\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 固定列","code":"/**\r\n*\r\n* @title 固定列\r\n* @description 固定列到表格的某侧\r\n*\r\n*/\r\n\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\n\r\nconst columns5 = [\r\n {\r\n title: \"Full Name\",\r\n width: 100,\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n fixed: \"left\"\r\n },\r\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\r\n { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\r\n { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\r\n { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\r\n { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\r\n { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\r\n { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\r\n { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\r\n { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\r\n];\r\n\r\nconst data5 = [\r\n {\r\n key: \"1\",\r\n name: \"John Brown\",\r\n age: 32,\r\n address: \"New York Park\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"4\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n }\r\n];\r\n\r\nclass Demo5 extends Component {\r\n render() {\r\n return
;\r\n }\r\n}\r\n\r\n","desc":" 固定列到表格的某侧"},{"example":,"title":" 固定表头","code":"/**\r\n*\r\n* @title 固定表头\r\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns6 = [\r\n {\r\n title: \"Full Name\",\r\n width: 100,\r\n dataIndex: \"name\",\r\n key: \"name\"\r\n },\r\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\r\n { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\r\n { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\r\n { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\r\n { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\r\n { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\r\n { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\r\n { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\r\n { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\r\n];\r\n\r\nconst data6 = [\r\n {\r\n key: \"1\",\r\n name: \"John Brown\",\r\n age: 32,\r\n address: \"New York Park\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"4\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },{\r\n key: \"11\",\r\n name: \"John Brown\",\r\n age: 32,\r\n address: \"New York Park\"\r\n },\r\n {\r\n key: \"12\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"13\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"14\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n }\r\n];\r\n\r\nclass Demo6 extends Component {\r\n render() {\r\n return
;\r\n }\r\n}\r\n\r\n","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。"},{"example":,"title":" 主子表","code":"/**\r\n*\r\n* @title 主子表\r\n* @description 主表点击子表联动\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\n\r\nconst columns7 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\"},\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\"},\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\"},\r\n {\r\n title: \"操作\",\r\n dataIndex: \"\",\r\n key: \"d\",\r\n render() {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\n\r\nconst data7 = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\n\r\nconst columns7_1 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\"},\r\n { id: \"123\", title: \"班级\", dataIndex: \"b\", key: \"b\"},\r\n { title: \"系别\", dataIndex: \"c\", key: \"c\"}\r\n];\r\n\r\nclass Demo7 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n children_data : []\r\n }\r\n }\r\n rowclick = (record, index) => {\r\n console.log(record)\r\n console.log(index)\r\n if(record.a === '令狐冲'){\r\n this.setState({\r\n children_data: [\r\n { a: \"令狐冲\", b: \"01班\", c: '文学系', key: \"1\" },\r\n ]\r\n })\r\n }else if(record.a === '杨过'){\r\n this.setState({\r\n children_data: [\r\n { a: \"杨过\", b: \"01班\", c: '外语系', key: \"2\" },\r\n ]\r\n })\r\n }else if(record.a === '郭靖'){\r\n this.setState({\r\n children_data: [\r\n { a: \"郭靖\", b: \"02班\", c: '美术系', key: \"3\" }\r\n ]\r\n })\r\n }\r\n }\r\n render() {\r\n return (\r\n
\r\n
标题: 我是主表
}\r\n />\r\n
标题: 我是子表
}\r\n />\r\n
\r\n );\r\n }\r\n}\r\n\r\n","desc":" 主表点击子表联动"},{"example":,"title":" 表格+分页","code":"/**\r\n*\r\n* @title 表格+分页\r\n* @description 点击分页联动表格\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Pagination from \"bee-pagination\";\r\n\r\n\r\nconst columns8 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"\",\r\n key: \"d\",\r\n render() {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\n\r\nclass Demo8 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data8: [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n ],\r\n activePage: 1\r\n };\r\n }\r\n handleSelect(eventKey) {\r\n if(eventKey === 1){\r\n this.setState({\r\n data8: [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n ],\r\n activePage: eventKey\r\n });\r\n }else{\r\n this.setState({\r\n data8: [\r\n { a: \"芙蓉姐姐\", b: \"女\", c: 23, key: \"1\" }\r\n ],\r\n activePage: eventKey\r\n });\r\n }\r\n \r\n }\r\n render() {\r\n return (\r\n
\r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\n","desc":" 点击分页联动表格"},{"example":,"title":" 表格+搜索","code":"/**\r\n*\r\n* @title 表格+搜索\r\n* @description 搜索刷新表格数据\r\n*\r\n*/\r\n\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Icon from \"bee-icon\";\r\nimport InputGroup from 'bee-input-group';\r\nimport FormControl from 'bee-form-control';\r\n\r\n\r\nclass Search extends Component {\r\n state = {\r\n searchValue: \"\",\r\n empty: false\r\n };\r\n\r\n /**\r\n * 搜索\r\n */\r\n handleSearch = () => {\r\n let { onSearch,handleToChange } = this.props;\r\n handleToChange && handleToChange();\r\n onSearch && onSearch(this.state.searchValue);\r\n };\r\n\r\n /**\r\n * 捕获回车\r\n * @param e\r\n */\r\n handleKeyDown = e => {\r\n if (e.keyCode === 13) {\r\n this.handleSearch();\r\n }\r\n };\r\n\r\n /**\r\n * 输入框改变\r\n * @param e\r\n */\r\n handleChange = e => {\r\n this.setState({\r\n searchValue: e.target.value\r\n });\r\n };\r\n\r\n /**\r\n * 清空输入框\r\n */\r\n emptySearch = () => {\r\n let { onEmpty } = this.props;\r\n this.setState({\r\n searchValue: \"\",\r\n empty: false\r\n });\r\n onEmpty && onEmpty();\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.state.empty\r\n ? \r\n : null}\r\n\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst columns9 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"\",\r\n key: \"d\",\r\n render() {\r\n return 一些操作;\r\n }\r\n }\r\n];\r\n\r\nclass Demo9 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n ]\r\n };\r\n }\r\n handleSearchToTable=()=>{\r\n this.setState({\r\n data: [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" }\r\n ]\r\n })\r\n }\r\n render() {\r\n return (\r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\n","desc":" 搜索刷新表格数据"}] class Demo extends Component {