From f01b71bb973976b65b982215f05915247b1f7571 Mon Sep 17 00:00:00 2001 From: huyueb <1062887235@qq.com> Date: Thu, 12 Oct 2017 16:54:17 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/Table.css | 3 + build/lib/sort.js | 34 +++--- build/lib/sum.js | 145 ++++++++++++++----------- build/render/CheckboxRender.js | 1 - build/render/DateRender.js | 135 ++++++++++++++++++++++- build/render/InputRender.js | 3 +- build/render/SelectRender.js | 7 +- demo/demolist/Demo10.js | 2 +- demo/demolist/Demo11.js | 2 +- demo/demolist/Demo12.js | 2 +- demo/demolist/Demo13.js | 2 +- demo/demolist/{Demo15.js => Demo14.js} | 25 +++-- demo/demolist/Demo2.js | 3 +- demo/demolist/Demo4.js | 2 +- demo/demolist/Demo5.js | 2 +- demo/demolist/Demo6.js | 2 +- demo/index.js | 2 +- src/lib/sum.js | 1 - src/render/CheckboxRender.js | 1 - src/render/DateRender.js | 6 +- 20 files changed, 264 insertions(+), 116 deletions(-) rename demo/demolist/{Demo15.js => Demo14.js} (92%) diff --git a/build/Table.css b/build/Table.css index f5b6290..ea320bd 100644 --- a/build/Table.css +++ b/build/Table.css @@ -50,6 +50,8 @@ .u-table-footer { padding: 16px 8px; border-bottom: 1px solid #e9e9e9; } + .u-table-footer .u-table { + margin: -16px -8px; } .u-table-placeholder { padding: 16px 8px; background: #fff; @@ -61,6 +63,7 @@ .u-table-row-expand-icon, .u-table-expanded-row-expand-icon { cursor: pointer; display: inline-block; + margin-right: 10px; width: 16px; height: 16px; text-align: center; diff --git a/build/lib/sort.js b/build/lib/sort.js index e6267dd..31a9cb0 100644 --- a/build/lib/sort.js +++ b/build/lib/sort.js @@ -1,4 +1,4 @@ -'use strict'; +"use strict"; Object.defineProperty(exports, "__esModule", { value: true @@ -8,11 +8,11 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument exports["default"] = sort; -var _react = require('react'); +var _react = require("react"); var _react2 = _interopRequireDefault(_react); -var _beeIcon = require('bee-icon'); +var _beeIcon = require("bee-icon"); var _beeIcon2 = _interopRequireDefault(_beeIcon); @@ -92,7 +92,7 @@ function sort(Table) { var sortOrder = this.state.sortOrder; - var prefixCls = this.props.prefixCls || 'bee-table'; + var prefixCls = this.props.prefixCls || "bee-table"; return columns.map(function (originColumn) { var column = _extends({}, originColumn); var sortButton = void 0; @@ -100,34 +100,34 @@ function sort(Table) { var isAscend = sortOrder === "ascend"; var isDescend = sortOrder === "descend"; sortButton = _react2["default"].createElement( - 'div', - { className: prefixCls + '-column-sorter' }, + "div", + { className: prefixCls + "-column-sorter" }, _react2["default"].createElement( - 'span', + "span", { - className: prefixCls + '-column-sorter-up ' + (isAscend ? "on" : "off"), - title: '\u2191', + 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(_beeIcon2["default"], { type: "uf-triangle-up" }) ), _react2["default"].createElement( - 'span', + "span", { - className: prefixCls + '-column-sorter-down ' + (isDescend ? "on" : "off"), - title: '\u2193', + 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' }) + _react2["default"].createElement(_beeIcon2["default"], { type: "uf-triangle-down" }) ) ); } column.title = _react2["default"].createElement( - 'span', + "span", null, column.title, sortButton @@ -137,11 +137,11 @@ function sort(Table) { }; Demo11.prototype.render = function render() { - var columns = this.renderColumnsDropdown(this.props.columns).concat(); + 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 +module.exports = exports["default"]; \ No newline at end of file diff --git a/build/lib/sum.js b/build/lib/sum.js index 8b51f1f..ef19dad 100644 --- a/build/lib/sum.js +++ b/build/lib/sum.js @@ -1,16 +1,18 @@ -'use strict'; +"use strict"; Object.defineProperty(exports, "__esModule", { - value: true + value: true }); -var _react = require('react'); +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 _src = require('../../src'); +var _lodash = require("lodash.clonedeep"); -var _src2 = _interopRequireDefault(_src); +var _lodash2 = _interopRequireDefault(_lodash); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } @@ -22,63 +24,80 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen 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); } -exports["default"] = Sum = function Sum(Table) { - var SumTable = function (_React$Component) { - _inherits(SumTable, _React$Component); - - function SumTable(props) { - var _temp, _this; - - _classCallCheck(this, SumTable); - - (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call(this, props)), _this), _this.currentData = function (testTitle) { - return _react2["default"].createElement( - 'div', - null, - testTitle - ); - }, _this.currentData2 = function () { - data_2 = _this.state.data; - var obj = {}; - if (data.isArray()) { - for (var i = 0; i < data_2.length; i++) { - for (var item in data[i]) { - if (obj[item] === 'undefined') { - obj[item] = data[i][item]; - } else if (typeof data[i][item] == 'Number') { - obj[item] += data[i][item]; - } - } - } - } - return _react2["default"].createElement(Table, { - showHeader: false, - columns: _this.props.columns, - data: obj, - heji: true - }); - }, _temp), _this.state = { - data: _this.props.data - }; - return _this; - } - - SumTable.prototype.render = function render() { - var a = this.currentData; - var b = this.currentData2; - return _react2["default"].createElement(Table, { - columns: this.props.columns, - data: this.state.data, - heji: true, - title: a, - footer: b - }); - }; - - return SumTable; - }(_react2["default"].Component); - - return SumTable; +//创建新列存放 “合计” 字段 +var columns2 = { + title: "合计", + key: "showSum", + dataIndex: "showSum" }; -module.exports = exports['default']; \ No newline at end of file +var sum = function sum(Table) { + return function (_React$Component) { + _inherits(SumTable, _React$Component); + + //无状态 + function SumTable(props) { + _classCallCheck(this, SumTable); + + var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); + + _this.currentFooter = function () { + var data_2 = _this.props.data; + var columns_sum = (0, _lodash2["default"])(_this.props.columns); + var sumCol_index = void 0; + //用一个对象存储合计数据，这里合计对象的属性对应每列字段 + for (var i = 0; i < columns_sum.length; i++) { + if (columns_sum[i].sumCol) { + sumCol_index = columns_sum[i].dataIndex; + break; + } + } + var obj = {}; + obj[sumCol_index] = 0; + if (Array.isArray(data_2)) { + for (var _i = 0; _i < data_2.length; _i++) { + if (typeof data_2[_i][sumCol_index] == "number") { + obj[sumCol_index] += data_2[_i][sumCol_index]; + } else { + obj[sumCol_index] = ""; + } + } + } + obj.key = "sumData"; + obj.showSum = "合计"; + obj = [obj]; + //将设置的和用户传入的合并属性 + // if (columns_sum[0].dataIndex === "checkbox") { + // columns_sum[1] = Object.assign({}, columns_sum[1], columns2); + // } else { + columns_sum[0] = _extends({}, columns_sum[0], columns2); + // } + //除去列为特殊渲染的，避免像a标签这种html代码写入到合计中 + columns_sum.map(function (item, index) { + if (typeof item.render == "function") { + item.render = ""; + } + return item; + }); + return _react2["default"].createElement(Table, { showHeader: false, columns: columns_sum, data: obj }); + }; + + return _this; + } + //合计数字列,并将计算所得数据存储到一个obj对象中 + + + SumTable.prototype.render = function render() { + return _react2["default"].createElement(Table, { + columns: this.props.columns, + data: this.props.data, + footer: this.currentFooter + }); + }; + + return SumTable; + }(_react2["default"].Component); +}; + +exports["default"] = sum; +module.exports = exports["default"]; \ No newline at end of file diff --git a/build/render/CheckboxRender.js b/build/render/CheckboxRender.js index 25e06f4..e02f152 100644 --- a/build/render/CheckboxRender.js +++ b/build/render/CheckboxRender.js @@ -52,7 +52,6 @@ var CheckboxRender = function (_Component) { }, _this.edit = function () { _this.setState({ editable: true }); }, _this.handleKeydown = function (event) { - console.log(event.keyCode); if (event.keyCode == 13) { _this.check(); } diff --git a/build/render/DateRender.js b/build/render/DateRender.js index 9a390c3..f202d25 100644 --- a/build/render/DateRender.js +++ b/build/render/DateRender.js @@ -1 +1,134 @@ -"use strict"; \ No newline at end of file +"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; }; + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _beeIcon = require("bee-icon"); + +var _beeIcon2 = _interopRequireDefault(_beeIcon); + +var _beeDatepicker = require("bee-datepicker"); + +var _beeDatepicker2 = _interopRequireDefault(_beeDatepicker); + +var _moment = require("moment"); + +var _moment2 = _interopRequireDefault(_moment); + +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 DateRender = function (_Component) { + _inherits(DateRender, _Component); + + function DateRender() { + var _temp, _this, _ret; + + _classCallCheck(this, DateRender); + + 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 _ref = _this.props || "YYYY-MM-DD", + format = _ref.format; + + var value = e.format(format); + _this.setState({ value: value, editable: false }); + if (_this.props.onChange) { + _this.props.onChange(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) { + if (event.keyCode == 13) { + _this.check(); + } + }, _temp), _possibleConstructorReturn(_this, _ret); + } + + DateRender.prototype.render = function render() { + var _state = this.state, + value = _state.value, + editable = _state.editable; + var isclickTrigger = this.props.isclickTrigger; + + var cellContent = ""; + var date_value = (0, _moment2["default"])(value); + if (editable) { + cellContent = isclickTrigger ? _react2["default"].createElement( + "div", + { className: "editable-cell-input-wrapper" }, + _react2["default"].createElement(_beeDatepicker2["default"], _extends({}, this.props, { + value: date_value, + onChange: this.handleChange + })), + _react2["default"].createElement(_beeIcon2["default"], { + type: "uf-correct", + className: "editable-cell-icon-check", + onClick: this.check + }) + ) : _react2["default"].createElement( + "div", + { className: "editable-cell-input-wrapper" }, + _react2["default"].createElement(_beeDatepicker2["default"], _extends({}, this.props, { + value: date_value, + onChange: this.handleChange + })), + _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 DateRender; +}(_react.Component); + +exports["default"] = DateRender; +module.exports = exports["default"]; \ No newline at end of file diff --git a/build/render/InputRender.js b/build/render/InputRender.js index b997edd..2599309 100644 --- a/build/render/InputRender.js +++ b/build/render/InputRender.js @@ -42,7 +42,7 @@ var InputRender = function (_Component) { value: _this.props.value, editable: false }, _this.handleChange = function (e) { - var value = e.target.value; + var value = e; _this.setState({ value: value }); }, _this.check = function () { _this.setState({ editable: false }); @@ -52,7 +52,6 @@ var InputRender = function (_Component) { }, _this.edit = function () { _this.setState({ editable: true }); }, _this.handleKeydown = function (event) { - console.log(event.keyCode); if (event.keyCode == 13) { _this.check(); } diff --git a/build/render/SelectRender.js b/build/render/SelectRender.js index 0d547fa..507c49e 100644 --- a/build/render/SelectRender.js +++ b/build/render/SelectRender.js @@ -45,13 +45,12 @@ var SelectRender = function (_Component) { editable: false }, _this.handleChange = function (e) { var value = e; - var self = _this; - if (self.props.onChange) { - self.props.onChange(value); + if (_this.props.onChange) { + _this.props.onChange(value); } _this.setState({ value: value }); setTimeout(function () { - self.setState({ editable: false }); + _this.setState({ editable: false }); }, 0); }, _this.check = function () { _this.setState({ editable: false }); diff --git a/demo/demolist/Demo10.js b/demo/demolist/Demo10.js index 45c5b4b..359b592 100644 --- a/demo/demolist/Demo10.js +++ b/demo/demolist/Demo10.js @@ -1,7 +1,7 @@ /** * * @title 无数据时显示 -* @description 无数据时显示效果展示 +* @description 无数据时显示效果展示（可自定义） * * import {Table} from 'tinper-bee'; */ diff --git a/demo/demolist/Demo11.js b/demo/demolist/Demo11.js index 4904d53..d28477a 100644 --- a/demo/demolist/Demo11.js +++ b/demo/demolist/Demo11.js @@ -1,7 +1,7 @@ /** * * @title 列排序 -* @description 列排序 +* @description 点击列的上下按钮即可排序 * */ diff --git a/demo/demolist/Demo12.js b/demo/demolist/Demo12.js index 726563d..059c452 100644 --- a/demo/demolist/Demo12.js +++ b/demo/demolist/Demo12.js @@ -1,7 +1,7 @@ /** * * @title 全选功能 -* @description 全选功能 +* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能） * */ diff --git a/demo/demolist/Demo13.js b/demo/demolist/Demo13.js index eed4621..3560573 100644 --- a/demo/demolist/Demo13.js +++ b/demo/demolist/Demo13.js @@ -1,7 +1,7 @@ /** * * @title 列排序、全选功能、合计 -* @description 列排序、全选功能、合计 +* @description 列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！） * */ diff --git a/demo/demolist/Demo15.js b/demo/demolist/Demo14.js similarity index 92% rename from demo/demolist/Demo15.js rename to demo/demolist/Demo14.js index 7c7e943..7426ae6 100644 --- a/demo/demolist/Demo15.js +++ b/demo/demolist/Demo14.js @@ -1,7 +1,7 @@ /** * -* @title edittype表格 -* @description 这是带有增删改功能的表格 +* @title 编辑态表格 +* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式） * */ @@ -38,7 +38,7 @@ class Demo14 extends React.Component { key: "0", name: "沉鱼", age: "y", - address: "96, 77, 89", + address: "111", datepicker: "2017-06-12", MonthPicker: "2017-02", TimePicker: "2017-09-14 14:24:48" @@ -47,7 +47,7 @@ class Demo14 extends React.Component { key: "1", name: "落雁", age: "y", - address: "90, 70, 80", + address: "lucy", datepicker: "2017-06-12", MonthPicker: "2017-02", TimePicker: "2017-09-14 14:24:48" @@ -56,7 +56,7 @@ class Demo14 extends React.Component { key: "2", name: "闭月", age: "n", - address: "80, 60, 80", + address: "lucy", datepicker: "2017-06-12", MonthPicker: "2017-02", TimePicker: "2017-09-14 14:24:48" @@ -65,7 +65,7 @@ class Demo14 extends React.Component { key: "3", name: "羞花", age: "y", - address: "120, 60, 90", + address: "lucy", datepicker: "2017-06-12", MonthPicker: "2017-02", TimePicker: "2017-09-14 14:24:48" @@ -75,7 +75,7 @@ class Demo14 extends React.Component { }; this.columns = [ { - title: "姓名", + title: "普通输入", dataIndex: "name", key: "name", width: "100px", @@ -88,7 +88,7 @@ class Demo14 extends React.Component { ) }, { - title: "年龄", + title: "复选", dataIndex: "age", key: "age", width: "100px", @@ -100,7 +100,7 @@ class Demo14 extends React.Component { ) }, { - title: "你懂的", + title: "下拉框", dataIndex: "address", key: "address", width: "200px", @@ -108,7 +108,7 @@ class Demo14 extends React.Component { return ( @@ -213,7 +213,10 @@ class Demo14 extends React.Component { key: count, name: `凤姐 ${count}`, age: 32, - address: `100 100 100` + address: "jack", + datepicker: "2017-06-12", + MonthPicker: "2017-02", + TimePicker: "2017-09-14 14:24:48" }; this.setState({ dataSource: [...dataSource, newData], diff --git a/demo/demolist/Demo2.js b/demo/demolist/Demo2.js index 773b991..9b0e833 100644 --- a/demo/demolist/Demo2.js +++ b/demo/demolist/Demo2.js @@ -1,7 +1,7 @@ /** * * @title 增删改表格 -* @description 这是带有增删改功能的表格 +* @description 这是带有增删改功能的表格（此编辑功能未使用render组件） * */ @@ -32,7 +32,6 @@ class EditableCell extends React.Component { this.setState({ editable: true }); }; handleKeydown = event => { - console.log(event.keyCode); if (event.keyCode == 13) { this.check(); } diff --git a/demo/demolist/Demo4.js b/demo/demolist/Demo4.js index d6beaf1..042d45f 100644 --- a/demo/demolist/Demo4.js +++ b/demo/demolist/Demo4.js @@ -1,7 +1,7 @@ /** * * @title 树形数据展示 -* @description 手写表格的头组件来达到更灵活的配置表格 +* @description 通过在data中配置children数据，来自动生成树形数据 * */ diff --git a/demo/demolist/Demo5.js b/demo/demolist/Demo5.js index 8faeb07..4faedc1 100644 --- a/demo/demolist/Demo5.js +++ b/demo/demolist/Demo5.js @@ -60,7 +60,7 @@ const data5 = [ class Demo5 extends Component { render() { - return ; + return
; } } diff --git a/demo/demolist/Demo6.js b/demo/demolist/Demo6.js index e1c2f5a..9b6091f 100644 --- a/demo/demolist/Demo6.js +++ b/demo/demolist/Demo6.js @@ -1,7 +1,7 @@ /** * * @title 固定表头 -* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。 +* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动) * */ diff --git a/demo/index.js b/demo/index.js index 51103da..368b55f 100644 --- a/demo/index.js +++ b/demo/index.js @@ -11,7 +11,7 @@ const CARET = ; const CARETUP = ; -var Demo1 = require("./demolist/Demo1");var Demo10 = require("./demolist/Demo10");var Demo11 = require("./demolist/Demo11");var Demo12 = require("./demolist/Demo12");var Demo13 = require("./demolist/Demo13");var Demo15 = require("./demolist/Demo15");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var Demo7 = require("./demolist/Demo7");var Demo8 = require("./demolist/Demo8");var Demo9 = require("./demolist/Demo9");var DemoArray = [{"example":,"title":" 简单表格","code":"/**\n*\n* @title 简单表格\n* @description\n*\n*/\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\nconst columns = [\n { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },\n { id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },\n { title: '年龄', dataIndex: 'c', key: 'c', width: 200 },\n {\n title: '操作', dataIndex: '', key: 'd', render() {\n return 一些操作;\n },\n },\n];\n\nconst data = [\n { a: '令狐冲', b: '男', c: 41, key: '1' },\n { a: '杨过', b: '男', c: 67, key: '2' },\n { a: '郭靖', b: '男', c: 25, key: '3' },\n];\n\nclass Demo1 extends Component {\n render () {\n return (\n
标题: 这是一个标题
}\n footer={currentData =>
表尾: 我是小尾巴
}\n />\n )\n }\n}\n\n\n\n","desc":""},{"example":,"title":" 无数据时显示","code":"/**\n*\n* @title 无数据时显示\n* @description 无数据时显示效果展示\n *\n* import {Table} from 'tinper-bee';\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\nconst columns10 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n ];\n \n const data10 = [\n \n ];\n\n const emptyFunc = () => 这里没有数据！\n \n class Demo10 extends Component {\n render() {\n return
;\n }\n }\n\n","desc":" 无数据时显示效果展示"},{"example":,"title":" 列排序","code":"/**\n*\n* @title 列排序\n* @description 列排序\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\nimport Icon from \"bee-icon\";\n\nconst columns11 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"操作\",\n dataIndex: \"\",\n key: \"d\",\n render() {\n return 一些操作;\n }\n }\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nconst defaultProps11 = {\n prefixCls: \"bee-table\"\n};\nclass Demo11 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n toggleSortOrder=(order, column)=> {\n let { sortOrder, data, oldData } = this.state;\n let ascend_sort = function(key) {\n return function(a, b) {\n return a.key - b.key;\n };\n };\n let descend_sort = function(key) {\n return function(a, b) {\n return b.key - a.key;\n };\n };\n if (sortOrder === order) {\n // 切换为未排序状态\n order = \"\";\n }\n if (!oldData) {\n oldData = data.concat();\n }\n if (order === \"ascend\") {\n data = data.sort(function(a, b) {\n return column.sorter(a, b);\n });\n } else if (order === \"descend\") {\n data = data.sort(function(a, b) {\n return column.sorter(b, a);\n });\n } else {\n data = oldData.concat();\n }\n this.setState({\n sortOrder: order,\n data: data,\n oldData: oldData\n });\n }\n renderColumnsDropdown(columns) {\n const { sortOrder } = this.state;\n const { prefixCls } = this.props;\n\n return columns.map(originColumn => {\n let column = Object.assign({}, originColumn);\n let sortButton;\n if (column.sorter) {\n const isAscend = sortOrder === \"ascend\";\n const isDescend = sortOrder === \"descend\";\n sortButton = (\n
\n this.toggleSortOrder(\"ascend\", column)}\n >\n \n \n this.toggleSortOrder(\"descend\", column)}\n >\n \n \n
\n );\n }\n column.title = (\n \n {column.title}\n {sortButton}\n \n );\n return column;\n });\n }\n render() {\n let columns = this.renderColumnsDropdown(columns11);\n return
;\n }\n}\nDemo11.defaultProps = defaultProps11;\n\n\n","desc":" 列排序"},{"example":,"title":" 全选功能","code":"/**\n*\n* @title 全选功能\n* @description 全选功能\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\nimport Checkbox from \"bee-checkbox\";\n\nconst columns12 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"操作\",\n dataIndex: \"\",\n key: \"d\",\n render() {\n return 一些操作;\n }\n }\n];\n\nconst data12 = [\n { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nconst defaultProps12 = {\n prefixCls: \"bee-table\",\n multiSelect: {\n type: \"checkbox\",\n param: \"key\"\n }\n};\nclass Demo12 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n checkedAll:false,\n checkedArray: [\n false,\n false,\n false,\n ],\n data: data12\n };\n }\n onAllCheckChange = () => {\n let self = this;\n let checkedArray = [];\n let listData = self.state.data.concat();\n let selIds = [];\n // let id = self.props.multiSelect.param;\n for (var i = 0; i < self.state.checkedArray.length; i++) {\n checkedArray[i] = !self.state.checkedAll;\n }\n // if (self.state.checkedAll) {\n // selIds = [];\n // } else {\n // for (var i = 0; i < listData.length; i++) {\n // selIds[i] = listData[i][id];\n // }\n // }\n self.setState({\n checkedAll: !self.state.checkedAll,\n checkedArray: checkedArray,\n // selIds: selIds\n });\n // self.props.onSelIds(selIds);\n };\n onCheckboxChange = (text, record, index) => {\n let self = this;\n let allFlag = false;\n // let selIds = self.state.selIds;\n // let id = self.props.postId;\n let checkedArray = self.state.checkedArray.concat();\n // if (self.state.checkedArray[index]) {\n // selIds.remove(record[id]);\n // } else {\n // selIds.push(record[id]);\n // }\n checkedArray[index] = !self.state.checkedArray[index];\n for (var i = 0; i < self.state.checkedArray.length; i++) {\n if (!checkedArray[i]) {\n allFlag = false;\n break;\n } else {\n allFlag = true;\n }\n }\n self.setState({\n checkedAll: allFlag,\n checkedArray: checkedArray,\n // selIds: selIds\n });\n // self.props.onSelIds(selIds);\n };\n renderColumnsMultiSelect(columns) {\n const { data,checkedArray } = this.state;\n const { multiSelect } = this.props;\n let select_column = {};\n let indeterminate_bool = false;\n // let indeterminate_bool1 = true;\n if (multiSelect && multiSelect.type === \"checkbox\") {\n let i = checkedArray.length;\n while(i--){\n if(checkedArray[i]){\n indeterminate_bool = true;\n break;\n }\n }\n let defaultColumns = [\n {\n title: (\n \n ),\n key: \"checkbox\",\n dataIndex: \"checkbox\",\n width: \"5%\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n columns = defaultColumns.concat(columns);\n }\n return columns;\n }\n render() {\n let columns = this.renderColumnsMultiSelect(columns12);\n return
;\n }\n}\nDemo12.defaultProps = defaultProps12;\n\n","desc":" 全选功能"},{"example":,"title":" 列排序、全选功能、合计","code":"/**\n*\n* @title 列排序、全选功能、合计\n* @description 列排序、全选功能、合计\n*\n*/\n\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\nimport Checkbox from \"bee-checkbox\";\nimport multiSelect from \"../../src/lib/multiSelect.js\";\nimport sort from \"../../src/lib/sort.js\";\nimport sum from \"../../src/lib/sum.js\";\n\nconst columns13 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol:true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"操作\",\n dataIndex: \"\",\n key: \"d\",\n render() {\n return 一些操作;\n }\n }\n];\n\nconst data13 = [\n { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\nclass Demo13 extends Component {\n getSelectedDataFunc = (data) =>{\n console.log(data)\n }\n render() {\n let multiObj = {\n type: \"checkbox\",\n };\n let ComplexTable = multiSelect(sum(sort(Table)));\n return (\n
\n \n
\n );\n }\n}\n\n","desc":" 列排序、全选功能、合计"},{"example":,"title":" edittype表格","code":"/**\n*\n* @title edittype表格\n* @description 这是带有增删改功能的表格\n*\n*/\n\nimport Button from \"bee-button\";\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\nimport Animate from \"bee-animate\";\nimport Icon from \"bee-icon\";\nimport Input from \"bee-form-control\";\nimport Checkbox from \"bee-checkbox\";\nimport Select from \"bee-select\";\nimport Popconfirm from \"bee-popconfirm\";\nimport InputRender from \"../../src/render/InputRender.js\";\nimport DateRender from \"../../src/render/DateRender.js\";\nimport SelectRender from \"../../src/render/SelectRender.js\";\n\n//日期控件引入\nimport DatePicker from \"bee-datepicker\";\nimport MonthPicker, { WeekPicker, RangePicker } from \"bee-datepicker\";\n\nconst format = \"YYYY-MM-DD\";\nconst format2 = \"YYYY-MM\";\nconst format3 = \"YYYY-MM-DD HH:mm:ss\";\n\nconst dateInputPlaceholder = \"选择日期\";\nconst dateInputPlaceholder2 = \"选择年月\";\n\nclass Demo14 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n age: \"y\",\n address: \"96, 77, 89\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n TimePicker: \"2017-09-14 14:24:48\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n age: \"y\",\n address: \"90, 70, 80\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n TimePicker: \"2017-09-14 14:24:48\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n age: \"n\",\n address: \"80, 60, 80\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n TimePicker: \"2017-09-14 14:24:48\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n age: \"y\",\n address: \"120, 60, 90\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n TimePicker: \"2017-09-14 14:24:48\"\n }\n ],\n count: 4\n };\n this.columns = [\n {\n title: \"姓名\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"100px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"年龄\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"100px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"你懂的\",\n dataIndex: \"address\",\n key: \"address\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n \n \n \n \n \n );\n }\n },\n {\n title: \"年月日\",\n dataIndex: \"datepicker\",\n key: \"datepicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n },\n {\n title: \"年月\",\n dataIndex: \"MonthPicker\",\n key: \"MonthPicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n },\n {\n title: \"日期\",\n dataIndex: \"TimePicker\",\n key: \"TimePicker\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n }\n\n onInputChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onCheckChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onSelectChange = value => {\n console.log(`selected ${value}`);\n };\n onDateChange = d => {\n console.log(d);\n };\n onDateSelect = d => {\n console.log(d);\n };\n onDelete = index => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: `100 100 100`\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n getBodyWrapper = body => {\n return (\n \n {body.props.children}\n \n );\n };\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n
\n \n 添加\n \n \n
\n );\n }\n}\n\n\n","desc":" 这是带有增删改功能的表格"},{"example":,"title":" 增删改表格","code":"/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格\n*\n*/\n\nimport Button from \"bee-button\";\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\nimport Animate from \"bee-animate\";\nimport Icon from \"bee-icon\";\nimport Input from \"bee-form-control\";\nimport Popconfirm from \"bee-popconfirm\";\n\nclass EditableCell extends React.Component {\n state = {\n value: this.props.value,\n editable: false\n };\n handleChange = e => {\n const value = e.target.value;\n this.setState({ value });\n };\n check = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n edit = () => {\n this.setState({ editable: true });\n };\n handleKeydown = event => {\n console.log(event.keyCode);\n if (event.keyCode == 13) {\n this.check();\n }\n };\n render() {\n const { value, editable } = this.state;\n return (\n
\n {editable ? (\n
\n \n \n
\n ) : (\n
\n {value || \" \"}\n \n
\n )}\n
\n );\n }\n}\n\nclass Demo2 extends React.Component {\n constructor(props) {\n super(props);\n this.columns = [\n {\n title: \"姓名\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"30%\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"年龄\",\n dataIndex: \"age\",\n key: \"age\"\n },\n {\n title: \"你懂的\",\n dataIndex: \"address\",\n key: \"address\"\n },\n {\n title: \"操作\",\n dataIndex: \"operation\",\n key: \"operation\",\n render: (text, record, index) => {\n return this.state.dataSource.length > 1 ? (\n \n \n \n ) : null;\n }\n }\n ];\n\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n age: \"18\",\n address: \"96, 77, 89\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n age: \"16\",\n address: \"90, 70, 80\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n age: \"17\",\n address: \"80, 60, 80\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n age: \"20\",\n address: \"120, 60, 90\"\n }\n ],\n count: 4\n };\n }\n onCellChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onDelete = index => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: `100 100 100`\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n getBodyWrapper = body => {\n return (\n \n {body.props.children}\n \n );\n };\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n
\n \n 添加\n \n \n
\n );\n }\n}\n\n\n","desc":" 这是带有增删改功能的表格"},{"example":,"title":" 更灵活的表格","code":"/**\n*\n* @title 更灵活的表格\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\n\nimport Button from 'bee-button';\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\nconst { ColumnGroup, Column } = Table;\n\nconst data3 = [\n { a: '北京', b: '北京', c: '250', d: 2, key: '1' },\n];\n\nclass Demo3 extends Component {\n render () {\n return (\n\n
\n \n \n \n \n \n {\n return (\n \n );\n }}\n />\n
\n )\n }\n}\n\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 树形数据展示","code":"/**\n*\n* @title 树形数据展示\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\nconst columns4 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"John Brown sr.\",\n age: 60,\n address: \"New York No. 1 Lake Park\",\n children: [\n {\n key: 11,\n name: \"John Brown\",\n age: 42,\n address: \"New York No. 2 Lake Park\"\n },\n {\n key: 12,\n name: \"John Brown jr.\",\n age: 30,\n address: \"New York No. 3 Lake Park\",\n children: [\n {\n key: 121,\n name: \"Jimmy Brown\",\n age: 16,\n address: \"New York No. 3 Lake Park\"\n }\n ]\n },\n {\n key: 13,\n name: \"Jim Green sr.\",\n age: 72,\n address: \"London No. 1 Lake Park\",\n children: [\n {\n key: 131,\n name: \"Jim Green\",\n age: 42,\n address: \"London No. 2 Lake Park\",\n children: [\n {\n key: 1311,\n name: \"Jim Green jr.\",\n age: 25,\n address: \"London No. 3 Lake Park\"\n },\n {\n key: 1312,\n name: \"Jimmy Green sr.\",\n age: 18,\n address: \"London No. 4 Lake Park\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"Joe Black\",\n age: 32,\n address: \"Sidney No. 1 Lake Park\"\n }\n];\nclass Demo4 extends Component {\n render() {\n return ;\n }\n}\n\n\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 固定列","code":"/**\n*\n* @title 固定列\n* @description 固定列到表格的某侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\n\nconst columns5 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\",\n fixed: \"left\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\n { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\n { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n];\n\nconst data5 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo5 extends Component {\n render() {\n return
;\n }\n}\n\n","desc":" 固定列到表格的某侧"},{"example":,"title":" 固定表头","code":"/**\n*\n* @title 固定表头\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\nconst columns6 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\n { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\n { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n];\n\nconst data6 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo6 extends Component {\n render() {\n return
;\n }\n}\n\n","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。"},{"example":,"title":" 主子表","code":"/**\n *\n * @title 主子表\n * @description 主表点击子表联动\n *\n */\n\n\nimport React, {Component} from 'react';\nimport Table from 'bee-table';\n\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: \"\",\n key: \"d\",\n render() {\n return 一些操作;\n }\n }\n];\n\nconst data7 = [\n\n {a: \"02级一班\", b: \"2\", c: \"欧阳锋\", key: \"1\"},\n {a: \"03级二班\", b: \"3\", c: \"归海一刀\", key: \"2\"},\n {a: \"05级三班\", b: \"1\", c: \"一拳超人\", 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\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: [\n {a: \"金圣叹\", b: \"05级三班\", c: '美术系', key: \"1\"}\n ]\n })\n }\n }\n\n render() {\n return (\n
\n
标题: 我是主表
}\n />\n
标题: 我是子表
}\n />\n
\n );\n }\n}\n\n\n\n","desc":" 主表点击子表联动"},{"example":,"title":" 表格+分页","code":"/**\n *\n * @title 表格+分页\n * @description 点击分页联动表格\n *\n *import {Table} from 'tinper-bee';\n */\n\n\nimport React, {Component} from 'react';\n\nimport Table from 'bee-table';\nimport Pagination from \"bee-pagination\";\n\n\nconst columns8 = [\n {title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100},\n {id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100},\n {title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200},\n {\n title: \"操作\",\n dataIndex: \"\",\n key: \"d\",\n render() {\n return 一些操作;\n }\n }\n];\n\nconst pageData = {\n 1: [\n {a: \"令狐冲\", b: \"男\", c: 41, key: \"1\"},\n {a: \"杨过\", b: \"男\", c: 67, key: \"2\"},\n {a: \"郭靖\", b: \"男\", c: 25, key: \"3\"}\n ],\n 2: [\n {a: \"芙蓉姐姐\", b: \"女\", c: 23, key: \"1\"},\n {a: \"芙蓉姐姐\", b: \"女\", c: 23, key: \"2\"}\n ]\n}\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
\n
\n \n \n );\n }\n}\n","desc":" 点击分页联动表格"},{"example":,"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 from 'bee-table';\nimport Icon from \"bee-icon\";\nimport InputGroup from 'bee-input-group';\nimport FormControl from 'bee-form-control';\n\n\nclass Search extends Component {\n state = {\n searchValue: \"\",\n empty: false\n };\n\n /**\n * 搜索\n */\n handleSearch = () => {\n let {onSearch} = 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.target.value\n });\n };\n\n /**\n * 清空输入框\n */\n emptySearch = () => {\n let {onEmpty} = this.props;\n this.setState({\n searchValue: \"\",\n empty: false\n });\n onEmpty && onEmpty();\n };\n\n render() {\n return (\n \n \n {this.state.empty\n ? \n : null}\n\n \n \n \n \n );\n }\n}\n\nconst columns9 = [\n {\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: \"\",\n key: \"d\",\n render() {\n return 一些操作;\n }\n }\n];\n\nconst userData = [\n {a: \"令狐冲\", b: \"男\", c: 41, key: \"1\"},\n {a: \"杨过\", b: \"男\", c: 67, key: \"2\"},\n {a: \"郭靖\", b: \"男\", c: 25, 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
\n
\n \n
\n
\n \n );\n }\n}\n\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 Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var Demo7 = require("./demolist/Demo7");var Demo8 = require("./demolist/Demo8");var Demo9 = require("./demolist/Demo9");var DemoArray = [{"example":,"title":" 简单表格","code":"/**\n*\n* @title 简单表格\n* @description\n*\n*/\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\nconst columns = [\n { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },\n { id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },\n { title: '年龄', dataIndex: 'c', key: 'c', width: 200 },\n {\n title: '操作', dataIndex: '', key: 'd', render() {\n return 一些操作;\n },\n },\n];\n\nconst data = [\n { a: '令狐冲', b: '男', c: 41, key: '1' },\n { a: '杨过', b: '男', c: 67, key: '2' },\n { a: '郭靖', b: '男', c: 25, key: '3' },\n];\n\nclass Demo1 extends Component {\n render () {\n return (\n
标题: 这是一个标题
}\n footer={currentData =>
表尾: 我是小尾巴
}\n />\n )\n }\n}\n\n\n\n","desc":""},{"example":,"title":" 无数据时显示","code":"/**\n*\n* @title 无数据时显示\n* @description 无数据时显示效果展示（可自定义）\n *\n* import {Table} from 'tinper-bee';\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\nconst columns10 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n ];\n \n const data10 = [\n \n ];\n\n const emptyFunc = () => 这里没有数据！\n \n class Demo10 extends Component {\n render() {\n return
;\n }\n }\n\n","desc":" 无数据时显示效果展示（可自定义）"},{"example":,"title":" 列排序","code":"/**\n*\n* @title 列排序\n* @description 点击列的上下按钮即可排序\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\nimport Icon from \"bee-icon\";\n\nconst columns11 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"操作\",\n dataIndex: \"\",\n key: \"d\",\n render() {\n return 一些操作;\n }\n }\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nconst defaultProps11 = {\n prefixCls: \"bee-table\"\n};\nclass Demo11 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n toggleSortOrder=(order, column)=> {\n let { sortOrder, data, oldData } = this.state;\n let ascend_sort = function(key) {\n return function(a, b) {\n return a.key - b.key;\n };\n };\n let descend_sort = function(key) {\n return function(a, b) {\n return b.key - a.key;\n };\n };\n if (sortOrder === order) {\n // 切换为未排序状态\n order = \"\";\n }\n if (!oldData) {\n oldData = data.concat();\n }\n if (order === \"ascend\") {\n data = data.sort(function(a, b) {\n return column.sorter(a, b);\n });\n } else if (order === \"descend\") {\n data = data.sort(function(a, b) {\n return column.sorter(b, a);\n });\n } else {\n data = oldData.concat();\n }\n this.setState({\n sortOrder: order,\n data: data,\n oldData: oldData\n });\n }\n renderColumnsDropdown(columns) {\n const { sortOrder } = this.state;\n const { prefixCls } = this.props;\n\n return columns.map(originColumn => {\n let column = Object.assign({}, originColumn);\n let sortButton;\n if (column.sorter) {\n const isAscend = sortOrder === \"ascend\";\n const isDescend = sortOrder === \"descend\";\n sortButton = (\n
\n this.toggleSortOrder(\"ascend\", column)}\n >\n \n \n this.toggleSortOrder(\"descend\", column)}\n >\n \n \n
\n );\n }\n column.title = (\n \n {column.title}\n {sortButton}\n \n );\n return column;\n });\n }\n render() {\n let columns = this.renderColumnsDropdown(columns11);\n return
;\n }\n}\nDemo11.defaultProps = defaultProps11;\n\n\n","desc":" 点击列的上下按钮即可排序"},{"example":,"title":" 全选功能","code":"/**\n*\n* @title 全选功能\n* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\nimport Checkbox from \"bee-checkbox\";\n\nconst columns12 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"操作\",\n dataIndex: \"\",\n key: \"d\",\n render() {\n return 一些操作;\n }\n }\n];\n\nconst data12 = [\n { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nconst defaultProps12 = {\n prefixCls: \"bee-table\",\n multiSelect: {\n type: \"checkbox\",\n param: \"key\"\n }\n};\nclass Demo12 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n checkedAll:false,\n checkedArray: [\n false,\n false,\n false,\n ],\n data: data12\n };\n }\n onAllCheckChange = () => {\n let self = this;\n let checkedArray = [];\n let listData = self.state.data.concat();\n let selIds = [];\n // let id = self.props.multiSelect.param;\n for (var i = 0; i < self.state.checkedArray.length; i++) {\n checkedArray[i] = !self.state.checkedAll;\n }\n // if (self.state.checkedAll) {\n // selIds = [];\n // } else {\n // for (var i = 0; i < listData.length; i++) {\n // selIds[i] = listData[i][id];\n // }\n // }\n self.setState({\n checkedAll: !self.state.checkedAll,\n checkedArray: checkedArray,\n // selIds: selIds\n });\n // self.props.onSelIds(selIds);\n };\n onCheckboxChange = (text, record, index) => {\n let self = this;\n let allFlag = false;\n // let selIds = self.state.selIds;\n // let id = self.props.postId;\n let checkedArray = self.state.checkedArray.concat();\n // if (self.state.checkedArray[index]) {\n // selIds.remove(record[id]);\n // } else {\n // selIds.push(record[id]);\n // }\n checkedArray[index] = !self.state.checkedArray[index];\n for (var i = 0; i < self.state.checkedArray.length; i++) {\n if (!checkedArray[i]) {\n allFlag = false;\n break;\n } else {\n allFlag = true;\n }\n }\n self.setState({\n checkedAll: allFlag,\n checkedArray: checkedArray,\n // selIds: selIds\n });\n // self.props.onSelIds(selIds);\n };\n renderColumnsMultiSelect(columns) {\n const { data,checkedArray } = this.state;\n const { multiSelect } = this.props;\n let select_column = {};\n let indeterminate_bool = false;\n // let indeterminate_bool1 = true;\n if (multiSelect && multiSelect.type === \"checkbox\") {\n let i = checkedArray.length;\n while(i--){\n if(checkedArray[i]){\n indeterminate_bool = true;\n break;\n }\n }\n let defaultColumns = [\n {\n title: (\n \n ),\n key: \"checkbox\",\n dataIndex: \"checkbox\",\n width: \"5%\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n columns = defaultColumns.concat(columns);\n }\n return columns;\n }\n render() {\n let columns = this.renderColumnsMultiSelect(columns12);\n return
;\n }\n}\nDemo12.defaultProps = defaultProps12;\n\n","desc":" 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）"},{"example":,"title":" 列排序、全选功能、合计","code":"/**\n*\n* @title 列排序、全选功能、合计\n* @description 列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）\n*\n*/\n\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\nimport Checkbox from \"bee-checkbox\";\nimport multiSelect from \"../../src/lib/multiSelect.js\";\nimport sort from \"../../src/lib/sort.js\";\nimport sum from \"../../src/lib/sum.js\";\n\nconst columns13 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol:true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"操作\",\n dataIndex: \"\",\n key: \"d\",\n render() {\n return 一些操作;\n }\n }\n];\n\nconst data13 = [\n { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\nclass Demo13 extends Component {\n getSelectedDataFunc = (data) =>{\n console.log(data)\n }\n render() {\n let multiObj = {\n type: \"checkbox\",\n };\n let ComplexTable = multiSelect(sum(sort(Table)));\n return (\n
\n \n
\n );\n }\n}\n\n","desc":" 列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）"},{"example":,"title":" 编辑态表格","code":"/**\n*\n* @title 编辑态表格\n* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）\n*\n*/\n\nimport Button from \"bee-button\";\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\nimport Animate from \"bee-animate\";\nimport Icon from \"bee-icon\";\nimport Input from \"bee-form-control\";\nimport Checkbox from \"bee-checkbox\";\nimport Select from \"bee-select\";\nimport Popconfirm from \"bee-popconfirm\";\nimport InputRender from \"../../src/render/InputRender.js\";\nimport DateRender from \"../../src/render/DateRender.js\";\nimport SelectRender from \"../../src/render/SelectRender.js\";\n\n//日期控件引入\nimport DatePicker from \"bee-datepicker\";\nimport MonthPicker, { WeekPicker, RangePicker } from \"bee-datepicker\";\n\nconst format = \"YYYY-MM-DD\";\nconst format2 = \"YYYY-MM\";\nconst format3 = \"YYYY-MM-DD HH:mm:ss\";\n\nconst dateInputPlaceholder = \"选择日期\";\nconst dateInputPlaceholder2 = \"选择年月\";\n\nclass Demo14 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n age: \"y\",\n address: \"111\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n TimePicker: \"2017-09-14 14:24:48\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n TimePicker: \"2017-09-14 14:24:48\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n age: \"n\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n TimePicker: \"2017-09-14 14:24:48\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n TimePicker: \"2017-09-14 14:24:48\"\n }\n ],\n count: 4\n };\n this.columns = [\n {\n title: \"普通输入\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"100px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"复选\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"100px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"下拉框\",\n dataIndex: \"address\",\n key: \"address\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n \n \n \n \n \n );\n }\n },\n {\n title: \"年月日\",\n dataIndex: \"datepicker\",\n key: \"datepicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n },\n {\n title: \"年月\",\n dataIndex: \"MonthPicker\",\n key: \"MonthPicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n },\n {\n title: \"日期\",\n dataIndex: \"TimePicker\",\n key: \"TimePicker\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n }\n\n onInputChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onCheckChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onSelectChange = value => {\n console.log(`selected ${value}`);\n };\n onDateChange = d => {\n console.log(d);\n };\n onDateSelect = d => {\n console.log(d);\n };\n onDelete = index => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n TimePicker: \"2017-09-14 14:24:48\"\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n getBodyWrapper = body => {\n return (\n \n {body.props.children}\n \n );\n };\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n
\n \n 添加\n \n \n
\n );\n }\n}\n\n\n","desc":" 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）"},{"example":,"title":" 增删改表格","code":"/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格（此编辑功能未使用render组件）\n*\n*/\n\nimport Button from \"bee-button\";\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\nimport Animate from \"bee-animate\";\nimport Icon from \"bee-icon\";\nimport Input from \"bee-form-control\";\nimport Popconfirm from \"bee-popconfirm\";\n\nclass EditableCell extends React.Component {\n state = {\n value: this.props.value,\n editable: false\n };\n handleChange = e => {\n const value = e.target.value;\n this.setState({ value });\n };\n check = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n edit = () => {\n this.setState({ editable: true });\n };\n handleKeydown = event => {\n if (event.keyCode == 13) {\n this.check();\n }\n };\n render() {\n const { value, editable } = this.state;\n return (\n
\n {editable ? (\n
\n \n \n
\n ) : (\n
\n {value || \" \"}\n \n
\n )}\n
\n );\n }\n}\n\nclass Demo2 extends React.Component {\n constructor(props) {\n super(props);\n this.columns = [\n {\n title: \"姓名\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"30%\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"年龄\",\n dataIndex: \"age\",\n key: \"age\"\n },\n {\n title: \"你懂的\",\n dataIndex: \"address\",\n key: \"address\"\n },\n {\n title: \"操作\",\n dataIndex: \"operation\",\n key: \"operation\",\n render: (text, record, index) => {\n return this.state.dataSource.length > 1 ? (\n \n \n \n ) : null;\n }\n }\n ];\n\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n age: \"18\",\n address: \"96, 77, 89\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n age: \"16\",\n address: \"90, 70, 80\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n age: \"17\",\n address: \"80, 60, 80\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n age: \"20\",\n address: \"120, 60, 90\"\n }\n ],\n count: 4\n };\n }\n onCellChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onDelete = index => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: `100 100 100`\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n getBodyWrapper = body => {\n return (\n \n {body.props.children}\n \n );\n };\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n
\n \n 添加\n \n \n
\n );\n }\n}\n\n\n","desc":" 这是带有增删改功能的表格（此编辑功能未使用render组件）"},{"example":,"title":" 更灵活的表格","code":"/**\n*\n* @title 更灵活的表格\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\n\nimport Button from 'bee-button';\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\nconst { ColumnGroup, Column } = Table;\n\nconst data3 = [\n { a: '北京', b: '北京', c: '250', d: 2, key: '1' },\n];\n\nclass Demo3 extends Component {\n render () {\n return (\n\n
\n \n \n \n \n \n {\n return (\n \n );\n }}\n />\n
\n )\n }\n}\n\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 树形数据展示","code":"/**\n*\n* @title 树形数据展示\n* @description 通过在data中配置children数据，来自动生成树形数据\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\nconst columns4 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"John Brown sr.\",\n age: 60,\n address: \"New York No. 1 Lake Park\",\n children: [\n {\n key: 11,\n name: \"John Brown\",\n age: 42,\n address: \"New York No. 2 Lake Park\"\n },\n {\n key: 12,\n name: \"John Brown jr.\",\n age: 30,\n address: \"New York No. 3 Lake Park\",\n children: [\n {\n key: 121,\n name: \"Jimmy Brown\",\n age: 16,\n address: \"New York No. 3 Lake Park\"\n }\n ]\n },\n {\n key: 13,\n name: \"Jim Green sr.\",\n age: 72,\n address: \"London No. 1 Lake Park\",\n children: [\n {\n key: 131,\n name: \"Jim Green\",\n age: 42,\n address: \"London No. 2 Lake Park\",\n children: [\n {\n key: 1311,\n name: \"Jim Green jr.\",\n age: 25,\n address: \"London No. 3 Lake Park\"\n },\n {\n key: 1312,\n name: \"Jimmy Green sr.\",\n age: 18,\n address: \"London No. 4 Lake Park\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"Joe Black\",\n age: 32,\n address: \"Sidney No. 1 Lake Park\"\n }\n];\nclass Demo4 extends Component {\n render() {\n return ;\n }\n}\n\n\n","desc":" 通过在data中配置children数据，来自动生成树形数据"},{"example":,"title":" 固定列","code":"/**\n*\n* @title 固定列\n* @description 固定列到表格的某侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\n\nconst columns5 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\",\n fixed: \"left\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\n { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\n { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n];\n\nconst data5 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo5 extends Component {\n render() {\n return
;\n }\n}\n\n","desc":" 固定列到表格的某侧"},{"example":,"title":" 固定表头","code":"/**\n*\n* @title 固定表头\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\nconst columns6 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\n { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\n { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n];\n\nconst data6 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo6 extends Component {\n render() {\n return
;\n }\n}\n\n","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)"},{"example":,"title":" 主子表","code":"/**\n *\n * @title 主子表\n * @description 主表点击子表联动\n *\n */\n\n\nimport React, {Component} from 'react';\nimport Table from 'bee-table';\n\n\nconst columns7 = [\n {title: \"班级\", dataIndex: \"a\", key: \"a\"},\n {title: \"人数\", dataIndex: \"b\", key: \"b\"},\n {title: \"班主任\", dataIndex: \"c\", key: \"c\"},\n {\n title: \"操作\",\n dataIndex: \"\",\n key: \"d\",\n render() {\n return 一些操作;\n }\n }\n];\n\nconst data7 = [\n\n {a: \"02级一班\", b: \"2\", c: \"欧阳锋\", key: \"1\"},\n {a: \"03级二班\", b: \"3\", c: \"归海一刀\", key: \"2\"},\n {a: \"05级三班\", b: \"1\", c: \"一拳超人\", 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\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: [\n {a: \"金圣叹\", b: \"05级三班\", c: '美术系', key: \"1\"}\n ]\n })\n }\n }\n\n render() {\n return (\n
\n
标题: 我是主表
}\n />\n
标题: 我是子表
}\n />\n
\n );\n }\n}\n\n\n\n","desc":" 主表点击子表联动"},{"example":,"title":" 表格+分页","code":"/**\n *\n * @title 表格+分页\n * @description 点击分页联动表格\n *\n *import {Table} from 'tinper-bee';\n */\n\n\nimport React, {Component} from 'react';\n\nimport Table from 'bee-table';\nimport Pagination from \"bee-pagination\";\n\n\nconst columns8 = [\n {title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100},\n {id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100},\n {title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200},\n {\n title: \"操作\",\n dataIndex: \"\",\n key: \"d\",\n render() {\n return 一些操作;\n }\n }\n];\n\nconst pageData = {\n 1: [\n {a: \"令狐冲\", b: \"男\", c: 41, key: \"1\"},\n {a: \"杨过\", b: \"男\", c: 67, key: \"2\"},\n {a: \"郭靖\", b: \"男\", c: 25, key: \"3\"}\n ],\n 2: [\n {a: \"芙蓉姐姐\", b: \"女\", c: 23, key: \"1\"},\n {a: \"芙蓉姐姐\", b: \"女\", c: 23, key: \"2\"}\n ]\n}\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
\n
\n \n \n );\n }\n}\n","desc":" 点击分页联动表格"},{"example":,"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 from 'bee-table';\nimport Icon from \"bee-icon\";\nimport InputGroup from 'bee-input-group';\nimport FormControl from 'bee-form-control';\n\n\nclass Search extends Component {\n state = {\n searchValue: \"\",\n empty: false\n };\n\n /**\n * 搜索\n */\n handleSearch = () => {\n let {onSearch} = 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.target.value\n });\n };\n\n /**\n * 清空输入框\n */\n emptySearch = () => {\n let {onEmpty} = this.props;\n this.setState({\n searchValue: \"\",\n empty: false\n });\n onEmpty && onEmpty();\n };\n\n render() {\n return (\n \n \n {this.state.empty\n ? \n : null}\n\n \n \n \n \n );\n }\n}\n\nconst columns9 = [\n {\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: \"\",\n key: \"d\",\n render() {\n return 一些操作;\n }\n }\n];\n\nconst userData = [\n {a: \"令狐冲\", b: \"男\", c: 41, key: \"1\"},\n {a: \"杨过\", b: \"男\", c: 67, key: \"2\"},\n {a: \"郭靖\", b: \"男\", c: 25, 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
\n
\n \n
\n
\n \n );\n }\n}\n\n","desc":" 搜索刷新表格数据"}] class Demo extends Component { diff --git a/src/lib/sum.js b/src/lib/sum.js index 142d087..e45dd87 100644 --- a/src/lib/sum.js +++ b/src/lib/sum.js @@ -26,7 +26,6 @@ let sum = Table => { break; } } - debugger; let obj = {}; obj[sumCol_index] = 0; if (Array.isArray(data_2)) { diff --git a/src/render/CheckboxRender.js b/src/render/CheckboxRender.js index b161dcc..cc40d3f 100644 --- a/src/render/CheckboxRender.js +++ b/src/render/CheckboxRender.js @@ -21,7 +21,6 @@ export default class CheckboxRender extends Component { this.setState({ editable: true }); }; handleKeydown = event => { - console.log(event.keyCode); if (event.keyCode == 13) { this.check(); } diff --git a/src/render/DateRender.js b/src/render/DateRender.js index 3669590..63700f8 100644 --- a/src/render/DateRender.js +++ b/src/render/DateRender.js @@ -11,13 +11,10 @@ export default class DateRender extends Component { handleChange = e => { let { format } = this.props || "YYYY-MM-DD"; const value = e.format(format); - this.setState({ value }); + this.setState({ value, editable: false }); if (this.props.onChange) { this.props.onChange(value); } - setTimeout(() => { - this.setState({ editable: false }); - }, 0); }; check = () => { this.setState({ editable: false }); @@ -29,7 +26,6 @@ export default class DateRender extends Component { this.setState({ editable: true }); }; handleKeydown = event => { - console.log(event.keyCode); if (event.keyCode == 13) { this.check(); }