feat(固定列、checkbox、过滤列 综合使用): 固定列、checkbox、过滤列 综合使用

固定列、checkbox、过滤列 综合使用

BREAKING CHANGE: 固定列、checkbox、过滤列 综合使用

build/Table.css

@@ -343,12 +343,13 @@
     cursor: pointer; }
   .u-table-filter-column-cont {
     position: relative; }
-  .u-table-filter-column-pop-column-filter {
+  .u-table-filter-column-filter-icon {
     position: absolute;
     top: 10px;
     right: 3px;
     width: 30px;
-    height: 30px; }
+    height: 30px;
+    z-index: 2; }
   .u-table-filter-column-pop-cont-item {
     margin-top: 10px;
     line-height: 30px;

build/TableHeader.js

@@ -36,6 +36,8 @@ var propTypes = {
   rows: _propTypes2["default"].array
 };
 
+var grap = 16; //偏移数值
+
 var TableHeader = function (_Component) {
   _inherits(TableHeader, _Component);
 
@@ -115,7 +117,22 @@ var TableHeader = function (_Component) {
       //设置hiden的left
       //"u-table-drag-hide-table"
       var currentHideDom = document.getElementById("u-table-drag-hide-table-" + dragborderKey).getElementsByTagName("div")[_this.drag.currIndex];
-      currentHideDom.style.left = _this.drag.initPageLeftX + x - 16 + "px";
+      currentHideDom.style.left = _this.drag.initPageLeftX + x - grap + "px";
+
+      //获取最小宽度，不让拖动
+      // let minWidth = 0;
+      // for(let i=0;i<=this.drag.currIndex;i++){
+      //   minWidth += this.drag.data[i].width;
+      // }
+
+      // //判断最小值后在赋值 todo
+      // let currLeft = this.drag.initPageLeftX+x-grap;
+      // console.log("currLeft minWidth ",currLeft + " "+minWidth);
+      // if(currLeft <= minWidth){
+      //   return;
+      // }
+      // currentHideDom.style.left =  currLeft+"px"; 
+
       //设置当前的宽度 
       var currentData = _this.drag.data[_this.drag.currIndex];
       currentData.width = _this.drag.width + x;
@@ -136,10 +153,18 @@ var TableHeader = function (_Component) {
       initLeft: 0,
       x: 0,
       width: 0
-    };
-    var _da = {};
-    _extends(_da, _this.props.rows[0]);
-    _this.drag.data = JSON.parse(JSON.stringify(_this.props.rows[0]));
+      // let _da = {};
+      // Object.assign(_da,this.props.rows[0]);
+      // this.drag.data = JSON.parse(JSON.stringify(this.props.rows[0]));
+      // let a = this.props.rows[0];
+
+    };var _row = [];
+    _this.props.rows[0].forEach(function (item) {
+      var newItem = item.key != "checkbox" ? (0, _utils.ObjectAssign)(item) : item;
+      _row.push(newItem);
+    });
+    _this.drag.data = _row; //JSON.parse(JSON.stringify(this.props.rows[0]));
+
     return _this;
   }
 
@@ -196,7 +221,7 @@ var TableHeader = function (_Component) {
               return _react2["default"].createElement(
                 'th',
                 {
-                  style: { width: da.width },
+                  style: { width: da.width, minWidth: da.width },
                   onMouseMove: function onMouseMove(event) {
                     _this2.onThMouseMove(event, da);
                   },

build/lib/filterColumn.js

@@ -12,6 +12,14 @@ var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
+var _beeCheckbox = require("bee-checkbox");
+
+var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
+
+var _beeIcon = require("bee-icon");
+
+var _beeIcon2 = _interopRequireDefault(_beeIcon);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
@@ -30,7 +38,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
  * @param {*} Icon
  */
 
-function filterColumn(Table, Checkbox, Popover, Icon) {
+function filterColumn(Table, Popover) {
   var _class, _temp, _initialiseProps;
 
   return _temp = _class = function (_Component) {
@@ -54,23 +62,24 @@ function filterColumn(Table, Checkbox, Popover, Icon) {
       _this.state = {
         columns: _column,
         showModal: false,
-        width: props.width ? props.width : 150,
-        screenX: 0,
         screenY: 0
       };
       return _this;
     }
 
+    FilterColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+      this.setState({
+        showPopover: false
+      });
+    };
+
     FilterColumn.prototype.render = function render() {
       var _props = this.props,
           data = _props.data,
           prefixCls = _props.prefixCls;
       var _state = this.state,
           columns = _state.columns,
-          showModal = _state.showModal,
-          width = _state.width,
-          screenX = _state.screenX,
-          screenY = _state.screenY;
+          showModal = _state.showModal;
 
       var _columns = [];
       columns.forEach(function (da) {
@@ -98,16 +107,21 @@ function filterColumn(Table, Checkbox, Popover, Icon) {
         "div",
         { className: prefixCls + "-cont" },
         _react2["default"].createElement(Table, _extends({}, this.props, { columns: _columns, data: data })),
+        _react2["default"].createElement(
+          "div",
+          { className: prefixCls + "-filter-icon" },
           _react2["default"].createElement(
             Popover,
             {
+              id: "filter_column_popover",
               placement: "leftTop",
-            content: content, id: "aa",
+              content: content,
               show: showModal },
             _react2["default"].createElement(
               "div",
               { className: prefixCls + "-pop-column-filter" },
-            _react2["default"].createElement(Icon, { type: "uf-navmenu", onClick: this.openCloumList })
+              _react2["default"].createElement(_beeIcon2["default"], { type: "uf-navmenu", onClick: this.openCloumList })
+            )
           )
         )
       );
@@ -138,8 +152,6 @@ function filterColumn(Table, Checkbox, Popover, Icon) {
     this.openCloumList = function (ev) {
       var oEvent = ev || event;
       _this2.setState({
-        screenX: oEvent.clientX,
-        screenY: oEvent.clientY,
         showModal: true
       });
     };
@@ -154,7 +166,7 @@ function filterColumn(Table, Checkbox, Popover, Icon) {
           { key: da.key + "_" + i, className: prefixCls + "-pop-cont-item", onClick: function onClick() {
               _this2.checkedColumItemClick(da);
             } },
-          _react2["default"].createElement(Checkbox, { id: da.key, checked: da.checked }),
+          _react2["default"].createElement(_beeCheckbox2["default"], { id: da.key, checked: da.checked }),
           _react2["default"].createElement(
             "span",
             null,
@@ -166,7 +178,6 @@ function filterColumn(Table, Checkbox, Popover, Icon) {
 
     this.clear = function () {
       var columns = _this2.state.columns;
-      // let _chek = columns[0].checked?false:true;
 
       columns.forEach(function (da) {
         da.checked = true;

build/lib/newMultiSelect.js

@@ -0,0 +1,146 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports["default"] = newMultiSelect;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _beeCheckbox = require('bee-checkbox');
+
+var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
+
+var _utils = require('../utils');
+
+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); }
+
+/**
+ * 参数: 过滤表头
+ * @param {*} Table
+ * @param {*} Checkbox
+ * @param {*} Popover
+ * @param {*} Icon
+ */
+
+function newMultiSelect(Table, Checkbox) {
+  var _class, _temp;
+
+  return _temp = _class = function (_Component) {
+    _inherits(NewMultiSelect, _Component);
+
+    function NewMultiSelect(props) {
+      _classCallCheck(this, NewMultiSelect);
+
+      var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+
+      _this.onAllCheckChange = function () {
+        var _this$state = _this.state,
+            data = _this$state.data,
+            checkedAll = _this$state.checkedAll;
+
+        var check = checkedAll ? false : true;
+        data.forEach(function (item) {
+          item.checked = check;
+        });
+        _this.setState({
+          checkedAll: check
+        });
+      };
+
+      _this.handleClick = function () {};
+
+      _this.onCheckboxChange = function (text, record, index) {
+        return function () {
+          var data = _this.state.data;
+
+          record.checked = record.checked ? false : true;
+          var checkedAll = true;
+          for (var i = 0; i < data.length; i++) {
+            var item = data[i];
+            if (!item.checked || item.checked == false) {
+              checkedAll = false;
+              break;
+            }
+          }
+          _this.setState(_extends({}, _this.state, {
+            checkedAll: checkedAll
+          }));
+        };
+      };
+
+      _this.getDefaultColumns = function (columns) {
+        // let checkedAll = init?false:this.state.checkedAll;
+        var checkedAll = _this.state.checkedAll;
+
+        var _defaultColumns = [{
+          title: _react2["default"].createElement(Checkbox, {
+            className: 'table-checkbox',
+            checked: checkedAll
+            // indeterminate={indeterminate_bool && !this.state.checkedAll}
+            , onChange: _this.onAllCheckChange
+          }),
+          key: "checkbox",
+          dataIndex: "checkbox",
+          fixed: "left",
+          width: 50,
+          render: function render(text, record, index) {
+            return _react2["default"].createElement(Checkbox, {
+              key: index,
+              className: 'table-checkbox',
+              checked: record.checked,
+              onClick: _this.handleClick,
+              onChange: _this.onCheckboxChange(text, record, index)
+            });
+          }
+        }];
+        return _defaultColumns.concat(columns);
+      };
+
+      _this.state = {
+        checkedAll: false,
+        // columns:this.getDefaultColumns(props.columns,"init"),
+        data: (0, _utils.ObjectAssign)(props.data)
+      };
+      return _this;
+    }
+
+    NewMultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+      // if(this.props.columns != nextProps.columns){
+      //   this.setState({
+      //     columns:this.getDefaultColumns(nextProps.columns)
+      //   })
+      // }
+      if (this.props.data != nextProps.data) {
+        this.setState({
+          data: (0, _utils.ObjectAssign)(nextProps.data)
+        });
+      }
+    };
+
+    NewMultiSelect.prototype.render = function render() {
+      var columns = this.props.columns;
+      var data = this.state.data;
+
+      return _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data }));
+    };
+
+    return NewMultiSelect;
+  }(_react.Component), _class.defaultProps = {
+    prefixCls: "u-table-mult-select"
+  }, _temp;
+}
+module.exports = exports['default'];

build/utils.js

@@ -4,11 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.tryParseInt = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 exports.measureScrollbar = measureScrollbar;
 exports.debounce = debounce;
 exports.warningOnce = warningOnce;
 exports.addClass = addClass;
 exports.removeClass = removeClass;
+exports.ObjectAssign = ObjectAssign;
 
 var _warning = require('warning');
 
@@ -121,3 +125,23 @@ function removeClass(elm, className) {
     }
   });
 }
+
+/**
+ * 简单数组数据对象拷贝
+ * @param {*} obj 要拷贝的对象 
+ */
+function ObjectAssign(obj) {
+  var b = obj instanceof Array;
+  var tagObj = b ? [] : {};
+  if (b) {
+    //数组
+    obj.forEach(function (da) {
+      var _da = {};
+      _extends(_da, da);
+      tagObj.push(_da);
+    });
+  } else {
+    _extends(tagObj, obj);
+  }
+  return tagObj;
+}

dist/demo.css

@@ -8044,12 +8044,13 @@ ul {
     cursor: pointer; }
   .u-table-filter-column-cont {
     position: relative; }
-  .u-table-filter-column-pop-column-filter {
+  .u-table-filter-column-filter-icon {
     position: absolute;
     top: 10px;
     right: 3px;
     width: 30px;
-    height: 30px; }
+    height: 30px;
+    z-index: 2; }
   .u-table-filter-column-pop-cont-item {
     margin-top: 10px;
     line-height: 30px;
@@ -9689,4 +9690,8 @@ li.rc-time-picker-panel-select-option-disabled:hover {
 .selected {
   background: #e3f2fd; }
 
+.demo25 {
+  width: 500px;
+  height: 100%; }
+
 /*# sourceMappingURL=demo.css.map */

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "1.2.1",
+ "version": "1.2.2",
  "description": "Table ui component for react",
  "keywords": [
   "react",