修改demo

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;

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',
+            "div",
-            { className: prefixCls + '-column-sorter' },
+            { className: prefixCls + "-column-sorter" },
             _react2["default"].createElement(
-              'span',
+              "span",
               {
-                className: prefixCls + '-column-sorter-up ' + (isAscend ? "on" : "off"),
+                className: prefixCls + "-column-sorter-up " + (isAscend ? "on" : "off"),
-                title: '\u2191',
+                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"),
+                className: prefixCls + "-column-sorter-down " + (isDescend ? "on" : "off"),
-                title: '\u2193',
+                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'];
+module.exports = exports["default"];

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) {
+var columns2 = {
-        _inherits(SumTable, _React$Component);
+  title: "合计",
-
+  key: "showSum",
-        function SumTable(props) {
+  dataIndex: "showSum"
-            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;
 };
 
-module.exports = exports['default'];
+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"];

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();
       }

build/render/DateRender.js

@@ -1 +1,134 @@
-"use strict";
+"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"];

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();
       }

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 (_this.props.onChange) {
-      if (self.props.onChange) {
+        _this.props.onChange(value);
-        self.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 });

demo/demolist/Demo10.js

@@ -1,7 +1,7 @@
 /**
 *
 * @title 无数据时显示
-* @description 无数据时显示效果展示
+* @description 无数据时显示效果展示（可自定义）
  *
 * import {Table} from 'tinper-bee';
 */

demo/demolist/Demo11.js

@@ -1,7 +1,7 @@
 /**
 *
 * @title 列排序
-* @description 列排序
+* @description 点击列的上下按钮即可排序
 *
 */
 

demo/demolist/Demo12.js

@@ -1,7 +1,7 @@
 /**
 *
 * @title 全选功能
-* @description 全选功能
+* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）
 *
 */
 

demo/demolist/Demo13.js

@@ -1,7 +1,7 @@
 /**
 *
 * @title 列排序、全选功能、合计
-* @description 列排序、全选功能、合计
+* @description 列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）
 *
 */
 

demo/demolist/Demo14.js

@@ -1,7 +1,7 @@
 /**
 *
-* @title edittype表格
+* @title 编辑态表格
-* @description 这是带有增删改功能的表格
+* @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 (
             <SelectRender
               isclickTrigger={true}
-              value="lucy"
+              value={text}
               onChange={this.onSelectChange}
             >
               <Option value="jack">boyuzhou</Option>
@@ -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],

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();
     }

demo/demolist/Demo4.js

@@ -1,7 +1,7 @@
 /**
 *
 * @title 树形数据展示
-* @description 手写表格的头组件来达到更灵活的配置表格
+* @description 通过在data中配置children数据，来自动生成树形数据
 *
 */
 

demo/demolist/Demo5.js

@@ -60,7 +60,7 @@ const data5 = [
 
 class Demo5 extends Component {
   render() {
-    return <Table columns={columns5} data={data5} scroll={{ x: 1500 }} />;
+    return <Table columns={columns5} data={data5}/>;
   }
 }
 

demo/demolist/Demo6.js

@@ -1,7 +1,7 @@
 /**
 *
 * @title 固定表头
-* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。
+* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)
 *
 */
 

src/lib/sum.js

@@ -26,7 +26,6 @@ let sum = Table => {
           break;
         }
       }
-      debugger;
       let obj = {};
       obj[sumCol_index] = 0;
       if (Array.isArray(data_2)) {

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();
     }

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();
     }