From 8adc124ab17424ec0f54d5eee624364f75b6c3fb Mon Sep 17 00:00:00 2001 From: wanghaoo Date: Thu, 27 Sep 2018 15:24:29 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=A2=9E=E5=8A=A0=E6=8C=89=E5=80=BC?= =?UTF-8?q?=E5=92=8C=E6=9D=A1=E4=BB=B6=E8=BF=87=E6=BB=A4=E5=88=97=E3=80=81?= =?UTF-8?q?=E5=A4=9A=E5=88=97=E6=8E=92=E5=BA=8F):?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/FilterDropDown.js | 150 +++++++++++++++++++++++ build/FilterType.js | 226 +++++++++++++++++++++++++++++++++++ build/Table.css | 102 ++++++++-------- build/Table.js | 37 +++++- build/TableHeader.js | 153 ++++++++++++++++++++++-- build/lib/filterColumn.js | 8 +- build/lib/sort.js | 242 ++++++++++++++++++++++++++++---------- package.json | 4 +- 8 files changed, 793 insertions(+), 129 deletions(-) create mode 100644 build/FilterDropDown.js create mode 100644 build/FilterType.js diff --git a/build/FilterDropDown.js b/build/FilterDropDown.js new file mode 100644 index 0000000..bca8b92 --- /dev/null +++ b/build/FilterDropDown.js @@ -0,0 +1,150 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _beeDropdown = require('bee-dropdown'); + +var _beeDropdown2 = _interopRequireDefault(_beeDropdown); + +var _beeMenus = require('bee-menus'); + +var _beeMenus2 = _interopRequireDefault(_beeMenus); + +var _beeButton = require('bee-button'); + +var _beeButton2 = _interopRequireDefault(_beeButton); + +var _beeIcon = require('bee-icon'); + +var _beeIcon2 = _interopRequireDefault(_beeIcon); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } + +function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } + +var Item = _beeMenus2["default"].Item; + +var FilterDropDown = function (_Component) { + _inherits(FilterDropDown, _Component); + + function FilterDropDown() { + _classCallCheck(this, FilterDropDown); + + var _this = _possibleConstructorReturn(this, _Component.call(this)); + + _this.onSelectDropdown = function (s) { + var onSelectDropdown = _this.props.onSelectDropdown; + + if (onSelectDropdown) { + _this.setState({ + selectValue: s.key + }, function () { + onSelectDropdown(s); + }); + } + }; + + _this.onClickClear = function () { + var onClickClear = _this.props.onClickClear; + + if (onClickClear) { + _this.setState({ + selectValue: [] + }, function () { + onClickClear(); + }); + } + }; + + _this.state = { + selectValue: [] + }; + return _this; + } + + FilterDropDown.prototype.render = function render() { + var isShowCondition = this.props.isShowCondition; + + var dropmenu = _react2["default"].createElement( + _beeMenus2["default"], + { + onSelect: this.onSelectDropdown, + selectedKeys: this.state.selectValue + }, + _react2["default"].createElement( + Item, + { key: '1' }, + '\u7B49\u4E8E' + ), + _react2["default"].createElement( + Item, + { key: '2' }, + '\u5305\u542B' + ), + _react2["default"].createElement( + Item, + { key: '3' }, + '\u4EE5\u7ED3\u5C3E' + ), + _react2["default"].createElement( + Item, + { key: '4' }, + '\u7A7A' + ), + _react2["default"].createElement( + Item, + { key: '5' }, + '\u4E0D\u7B49\u4E8E' + ), + _react2["default"].createElement( + Item, + { key: '6' }, + '\u4E0D\u5305\u542B' + ), + _react2["default"].createElement( + Item, + { key: '7' }, + '\u4EE5\u5F00\u59CB' + ) + ); + return _react2["default"].createElement( + 'div', + null, + isShowCondition == 'show' && _react2["default"].createElement( + _beeDropdown2["default"], + { + trigger: ['click'], + overlay: dropmenu, + animation: 'slide-up' + }, + _react2["default"].createElement( + _beeButton2["default"], + { shape: 'border', style: { marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 } }, + _react2["default"].createElement(_beeIcon2["default"], { style: { padding: 0 }, type: 'uf-filter' }) + ) + ), + _react2["default"].createElement( + _beeButton2["default"], + { onClick: this.onClickClear, shape: 'border', style: { marginLeft: "1px", minWidth: "0px", width: "24px", padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" } }, + _react2["default"].createElement(_beeIcon2["default"], { style: { padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }, type: 'uf-filterno' }) + ) + ); + }; + + return FilterDropDown; +}(_react.Component); + +exports["default"] = FilterDropDown; +module.exports = exports['default']; \ No newline at end of file diff --git a/build/FilterType.js b/build/FilterType.js new file mode 100644 index 0000000..22eabe1 --- /dev/null +++ b/build/FilterType.js @@ -0,0 +1,226 @@ +'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 _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _beeFormControl = require('bee-form-control'); + +var _beeFormControl2 = _interopRequireDefault(_beeFormControl); + +var _beeSelect = require('bee-select'); + +var _beeSelect2 = _interopRequireDefault(_beeSelect); + +var _beeDatepicker = require('bee-datepicker'); + +var _beeDatepicker2 = _interopRequireDefault(_beeDatepicker); + +var _FilterDropDown = require('./FilterDropDown'); + +var _FilterDropDown2 = _interopRequireDefault(_FilterDropDown); + +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 propTypes = { + filterDropdown: _propTypes2["default"].string +}; + +var FilterType = function (_Component) { + _inherits(FilterType, _Component); + + function FilterType() { + _classCallCheck(this, FilterType); + + var _this = _possibleConstructorReturn(this, _Component.call(this)); + + _this.clearText = function () { + _this.setState({ + text: "" + }, function () { + _this.changeText(""); + }); + }; + + _this.changeText = function (val) { + var onChange = _this.props.onChange; + + if (onChange) { + onChange(val); + _this.setState({ + text: val + }); + } + }; + + _this.changeSelect = function (val) { + var onChange = _this.props.onChange; + + if (onChange) { + onChange(val); + _this.setState({ + selectValue: val + }); + } + }; + + _this.clearSelectValue = function () { + _this.setState({ + selectValue: "" + }, function () { + _this.changeSelect(""); + }); + }; + + _this.clearDateValue = function () { + _this.setState({ + dateValue: "" + }, function () { + _this.changeDate(""); + }); + }; + + _this.changeDate = function (val) { + var onChange = _this.props.onChange; + + if (onChange) { + onChange(val); + _this.setState({ + dateValue: val, + open: false + }); + } + }; + + _this.renderControl = function (rendertype) { + var _this$props = _this.props, + filterDropdown = _this$props.filterDropdown, + className = _this$props.className, + onChange = _this$props.onChange, + onSelectDropdown = _this$props.onSelectDropdown, + clsPrefix = _this$props.clsPrefix; + + switch (rendertype) { + case 'text': + return _react2["default"].createElement( + 'div', + { className: clsPrefix + ' filter-wrap' }, + _react2["default"].createElement(_beeFormControl2["default"], { + ref: function ref(el) { + return _this.text = el; + }, + value: _this.state.text, + className: className, + onChange: _this.changeText + }), + _react2["default"].createElement(_FilterDropDown2["default"], { + onSelectDropdown: onSelectDropdown, + onClickClear: _this.clearText, + isShowClear: _this.state.text, + isShowCondition: filterDropdown + }) + ); + case 'dropdown': + return _react2["default"].createElement( + 'div', + { className: clsPrefix + ' filter-wrap' }, + _react2["default"].createElement(_beeSelect2["default"], _extends({}, _this.props, { + value: _this.state.selectValue, + onChange: _this.changeSelect + })), + _react2["default"].createElement(_FilterDropDown2["default"], { + onSelectDropdown: onSelectDropdown, + onClickClear: _this.clearSelectValue, + isShowCondition: filterDropdown, + isShowClear: _this.state.selectValue + }) + ); + case 'date': + return _react2["default"].createElement( + 'div', + { className: clsPrefix + ' filter-wrap' }, + _react2["default"].createElement(_beeDatepicker2["default"], _extends({}, _this.props, { + value: _this.state.dateValue, + onChange: _this.changeDate, + open: _this.state.open + })), + filterDropdown == 'show' && _react2["default"].createElement(_FilterDropDown2["default"], { + onSelectDropdown: onSelectDropdown, + onClickClear: _this.clearDateValue, + isShowCondition: filterDropdown, + isShowClear: _this.state.dateValue + }) + ); + case 'bool': + return _react2["default"].createElement( + 'div', + { className: clsPrefix + ' filter-wrap' }, + _react2["default"].createElement(Switch, { + className: className, + onChange: onChange + }), + filterDropdown == 'show' && _react2["default"].createElement(_FilterDropDown2["default"], { + onSelectDropdown: onSelectDropdown + }) + ); + default: + break; + } + }; + + _this.state = { + text: "", + selectValue: "", + dateValue: "", + open: false + }; + return _this; + } + //清除文本 + + //设置文本 + + //设置下拉值 + + //清除下拉值 + + //清除日期值 + + //设置日期值 + + //组件渲染 + + + FilterType.prototype.render = function render() { + var rendertype = this.props.rendertype; + + return this.renderControl(rendertype); + }; + + return FilterType; +}(_react.Component); + +FilterType.propTypes = propTypes; +FilterType.defaultProps = { + filterDropdown: 'show' +}; +exports["default"] = FilterType; +module.exports = exports['default']; \ No newline at end of file diff --git a/build/Table.css b/build/Table.css index 77eecb8..41cf509 100644 --- a/build/Table.css +++ b/build/Table.css @@ -70,7 +70,7 @@ right: 0; bottom: 0; left: 0; - z-index: 1600; + z-index: 1900; opacity: .7; filter: blur(0.5px); background-color: #fff; } @@ -218,7 +218,7 @@ padding-right: 0px; } .u-table-fixed-header .u-table-body-inner { height: 100%; - overflow: scroll; } + overflow: auto; } .u-table-fixed-header .u-table-scroll .u-table-header { overflow-x: scroll; padding-bottom: 20px; @@ -313,15 +313,63 @@ .u-table-fixed-right-expanded-row { color: transparent; pointer-events: none; } - .u-table-scroll-position-left .u-table-fixed-left { - box-shadow: none; } .u-table-scroll-position-right .u-table-fixed-right { box-shadow: none; } + .u-table-thead .filter-text, .u-table-thead .filter-dropdown, .u-table-thead .filter-date { + font-weight: normal; } + .u-table-thead .filter-wrap { + display: flex; } .u-table-thead th { background: #f7f7f7; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } + .u-table-thead th .bee-table-column-sorter { + position: relative; + margin-left: 4px; + width: 14px; + height: 1em; + vertical-align: middle; + text-align: center; + display: inline-block; } + .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-down, + .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-up, .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-flat { + line-height: 6px; + display: block; + width: 14px; + cursor: pointer; } + .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-flat { + display: none; } + .u-table-thead th:hover .bee-table-column-sorter > .bee-table-column-sorter-flat { + display: block; } + .u-table-thead th .bee-table-column-sorter-down.on .uf-triangle-down, + .u-table-thead th .bee-table-column-sorter-down.on .uf-triangle-up, + .u-table-thead th .bee-table-column-sorter-up.on .uf-triangle-down, + .u-table-thead th .bee-table-column-sorter-up.on .uf-triangle-up { + color: #108ee9; } + .u-table-thead th .bee-table-column-sorter .uf-triangle-down, + .u-table-thead th .bee-table-column-sorter .uf-triangle-up { + -webkit-filter: none; + filter: none; + font-size: 12px; } + .u-table-thead th .bee-table-column-sorter .uf-triangle-down, + .u-table-thead th .bee-table-column-sorter .uf-triangle-up { + display: inline-block; + padding: 0; + font-size: 12px; + font-size: 8px\9; + -webkit-transform: scale(0.66667) rotate(0deg); + -ms-transform: scale(0.66667) rotate(0deg); + transform: scale(0.66667) rotate(0deg); + -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)"; + zoom: 1; + line-height: 4px; + height: 4px; + color: #999; + -webkit-transition: all 0.3s; + transition: all 0.3s; } + .u-table-thead th:hover .bee-table-column-sorter { + display: inline-block; } .u-table-thead .th-drag { cursor: pointer; } .u-table-thead .th-drag-hover { @@ -334,7 +382,7 @@ right: 0px; top: 0; background: transparent; - width: 2px; + width: 1px; box-sizing: border-box; z-index: 100; } .u-table-thead-th .th-drag-gap { @@ -512,50 +560,6 @@ right: 20px; position: absolute; } -.bee-table-column-sorter { - position: relative; - margin-left: 4px; - display: inline-block; - width: 14px; - height: 1em; - vertical-align: middle; - text-align: center; } - .bee-table-column-sorter > .bee-table-column-sorter-down, - .bee-table-column-sorter > .bee-table-column-sorter-up { - line-height: 6px; - display: block; - width: 14px; - cursor: pointer; } - -.bee-table-column-sorter-down.on .uf-triangle-down, -.bee-table-column-sorter-down.on .uf-triangle-up, -.bee-table-column-sorter-up.on .uf-triangle-down, -.bee-table-column-sorter-up.on .uf-triangle-up { - color: #108ee9; } - -.bee-table-column-sorter .uf-triangle-down, -.bee-table-column-sorter .uf-triangle-up { - -webkit-filter: none; - filter: none; - font-size: 12px; } - -.bee-table-column-sorter .uf-triangle-down, -.bee-table-column-sorter .uf-triangle-up { - display: inline-block; - padding: 0; - font-size: 12px; - font-size: 8px\9; - -webkit-transform: scale(0.66667) rotate(0deg); - -ms-transform: scale(0.66667) rotate(0deg); - transform: scale(0.66667) rotate(0deg); - -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)"; - zoom: 1; - line-height: 4px; - height: 4px; - color: #999; - -webkit-transition: all 0.3s; - transition: all 0.3s; } - .col-resize-container { height: 0px; position: relative; } diff --git a/build/Table.js b/build/Table.js index 0cd11ce..7dba233 100644 --- a/build/Table.js +++ b/build/Table.js @@ -276,6 +276,9 @@ var Table = function (_Component) { if (this.computeWidth < this.contentWidth) { var contentWidthDiff = this.contentWidth - this.computeWidth; this.setState({ contentWidthDiff: contentWidthDiff, lastShowIndex: lastShowIndex }); + } else { + this.contentWidth = this.computeWidth; + this.setState({ contentWidth: this.contentWidth }); //重新渲染，为了显示滚动条 } }; @@ -330,6 +333,10 @@ var Table = function (_Component) { Table.prototype.getHeader = function getHeader(columns, fixed) { var _props = this.props, + filterDelay = _props.filterDelay, + onFilterRowsDropChange = _props.onFilterRowsDropChange, + onFilterRowsChange = _props.onFilterRowsChange, + filterable = _props.filterable, showHeader = _props.showHeader, expandIconAsCell = _props.expandIconAsCell, clsPrefix = _props.clsPrefix, @@ -373,7 +380,11 @@ var Table = function (_Component) { rows: rows, contentTable: this.contentTable, rowStyle: trStyle, - fixed: fixed + fixed: fixed, + filterable: filterable, + onFilterRowsChange: onFilterRowsChange, + onFilterRowsDropChange: onFilterRowsDropChange, + filterDelay: filterDelay })) : null; }; @@ -383,6 +394,7 @@ var Table = function (_Component) { var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; var rows = arguments[2]; + var filterCol = []; rows = rows || []; rows[currentRow] = rows[currentRow] || []; @@ -415,7 +427,24 @@ var Table = function (_Component) { if (cell.colSpan !== 0) { rows[currentRow].push(cell); } + //判断是否启用过滤 + if (_this2.props.filterable) { + //组装Filter需要的Col + filterCol.push({ + key: column.key, + children: "过滤渲染", + width: column.width, + filtertype: column.filterType, + dataindex: column.dataIndex, + datasource: _this2.props.data, + format: column.format, + filterdropdown: column.filterDropdown + }); + } }); + if (this.props.filterable) { + rows.push(filterCol); + } return rows.filter(function (row) { return row.length > 0; }); @@ -693,7 +722,7 @@ var Table = function (_Component) { if (scroll.x === true) { tableStyle.tableLayout = 'fixed'; } else { - tableStyle.width = scroll.x; + tableStyle.width = _this3.contentWidth; } } var tableBody = hasBody ? getBodyWrapper(_react2["default"].createElement( @@ -705,7 +734,7 @@ var Table = function (_Component) { return _react2["default"].createElement( 'table', { className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle }, - _this3.props.dragborder ? null : _this3.getColGroup(columns, fixed), + _this3.getColGroup(columns, fixed), hasHead ? _this3.getHeader(columns, fixed) : null, tableBody ); @@ -895,7 +924,7 @@ var Table = function (_Component) { if (e.target !== this.scrollTarget && this.scrollTarget !== headTable) { return; } - if (scroll.x && e.target.scrollLeft !== this.lastScrollLeft) { + if (e.target.scrollLeft !== this.lastScrollLeft) { if (e.target === bodyTable && headTable) { headTable.scrollLeft = e.target.scrollLeft; } else if (e.target === headTable && bodyTable) { diff --git a/build/TableHeader.js b/build/TableHeader.js index 40978a8..17edef2 100644 --- a/build/TableHeader.js +++ b/build/TableHeader.js @@ -18,8 +18,14 @@ var _shallowequal = require('shallowequal'); var _shallowequal2 = _interopRequireDefault(_shallowequal); +var _throttleDebounce = require('throttle-debounce'); + var _utils = require('./utils'); +var _FilterType = require('./FilterType'); + +var _FilterType2 = _interopRequireDefault(_FilterType); + 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; } @@ -106,8 +112,12 @@ var TableHeader = function (_Component) { }); _this.drag.width = _this.drag.data[_this.drag.currIndex].width; var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode; - - _this.contentTableWidth = contentTableDom.style.width ? parseInt(contentTableDom.style.width) : parseInt(contentTableDom.scrollWidth); + var styleWidth = contentTableDom.style.width; + if (styleWidth && (typeof styleWidth == 'number' || styleWidth.includes('px'))) { + _this.contentTableWidth = parseInt(styleWidth); + } else { + _this.contentTableWidth = parseInt(contentTableDom.scrollWidth); + } }; _this.onMouseUp = function (event, data) { @@ -119,10 +129,26 @@ var TableHeader = function (_Component) { _this.onThMouseUp = function (event, data) { _this.border = false; + var clsPrefix = _this.props.clsPrefix; + + var eventDom = event.target; + var optDom = void 0; + if (eventDom.classList.contains('.th-drag-gap-hover')) { + + optDom = eventDom; + } else { + optDom = eventDom.querySelector('.' + clsPrefix + '-thead-th-drag-gap'); + } + if (optDom) { + optDom.classList.remove('th-drag-gap-hover'); + optDom.classList.add('th-drag-gap'); + } }; _this.onThMouseMove = function (event, data) { if (!_this.border) return; + //固定表头拖拽 + var _this$props2 = _this.props, dragborderKey = _this$props2.dragborderKey, contentTable = _this$props2.contentTable; @@ -131,11 +157,14 @@ var TableHeader = function (_Component) { var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode; if (!_this.contentTableWidth) { - _this.contentTableWidth = contentTableDom.style.width ? parseInt(contentTableDom.style.width) : parseInt(contentTableDom.scrollWidth); + var styleWidth = contentTableDom.style.width; + if (styleWidth && (typeof styleWidth == 'number' || styleWidth.includes('px'))) { + _this.contentTableWidth = parseInt(styleWidth); + } else { + _this.contentTableWidth = parseInt(contentTableDom.scrollWidth); + } } - // console.log(this.contentTableWidth,x); var newTableWidth = _this.contentTableWidth + x; - // console.log(newTableWidth); var newWidth = _this.drag.width + x; if (newWidth < _this.props.minColumnWidth) { //清楚样式 @@ -169,10 +198,93 @@ var TableHeader = function (_Component) { var currentDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).getElementsByTagName("th")[_this.drag.currIndex]; currentDom.style.width = newWidth + "px"; // this.contentTableWidth = newTableWidth; - contentTableDom.style.width = newTableWidth + 'px'; - _this.drag.x = x; + var contentColDomArr = contentTableDom.querySelectorAll('colgroup col'); + contentColDomArr[_this.drag.currIndex].style.width = newWidth + "px"; + //固定表头时，表头和表体分开，拖拽时表体的宽度也需要一起联动 + var siblingDom = contentTableDom.parentNode.nextElementSibling; + if (siblingDom) { + var bodyTableDom = siblingDom.querySelector('table'); + //2、是的话将表头对应的表格的宽度给表体对应的表格的宽度 + bodyTableDom.style.width = newTableWidth + 'px'; + //3、对应的col也要跟这变 + var colDomArr = bodyTableDom.querySelectorAll('colgroup col'); + colDomArr[_this.drag.currIndex].style.width = newWidth + "px"; + //4、设置overflow属性 + } + }; + + _this.handlerFilterTextChange = function (key, val) { + var onFilterRowsChange = _this.props.onFilterRowsChange; + + if (onFilterRowsChange) { + onFilterRowsChange(key, val); + } + }; + + _this.handlerFilterDropChange = function (key, val) { + var onFilterRowsDropChange = _this.props.onFilterRowsDropChange; + + if (onFilterRowsDropChange) { + onFilterRowsDropChange(key, val.key); + } + }; + + _this.filterRenderType = function (type, dataIndex, index) { + var _this$props3 = _this.props, + clsPrefix = _this$props3.clsPrefix, + rows = _this$props3.rows, + filterDelay = _this$props3.filterDelay; + + switch (type) { + //文本输入 + case 'text': + return _react2["default"].createElement(_FilterType2["default"], { + rendertype: type, + clsPrefix: clsPrefix, + className: clsPrefix + ' filter-text', + onChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterTextChange.bind(_this, dataIndex)), + onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex), + filterDropdown: rows[1][index]['filterdropdown'] + }); + //下拉框选择 + case 'dropdown': + var selectDataSource = []; + if (rows.length > 0) { + var hash = {}; + //处理下拉重复对象组装dropdown + selectDataSource = Array.from(rows[1][0].datasource, function (x) { + return { key: x[dataIndex], value: x[dataIndex] }; + }); + selectDataSource = selectDataSource.reduceRight(function (item, next) { + hash[next.key] ? '' : hash[next.key] = true && item.push(next); + return item; + }, []); + } + return _react2["default"].createElement(_FilterType2["default"], { + rendertype: type, + className: clsPrefix + ' filter-dropdown', + data: selectDataSource, + onChange: _this.handlerFilterTextChange.bind(_this, dataIndex), + onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex), + filterDropdown: rows[1][index]['filterdropdown'] + }); + //日期 + case 'date': + return _react2["default"].createElement(_FilterType2["default"], { + rendertype: type, + className: 'filter-date', + onClick: function onClick() {}, + format: rows[1][index]['format'] || "YYYY-MM-DD", + onChange: _this.handlerFilterTextChange.bind(_this, dataIndex), + onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex), + filterDropdown: rows[1][index]['filterdropdown'] + }); + default: + //不匹配类型默认文本输入 + return _react2["default"].createElement('div', null); + } }; _this.currentObj = null; @@ -206,6 +318,19 @@ var TableHeader = function (_Component) { return !(0, _shallowequal2["default"])(nextProps, this.props); }; + /** + * @description 过滤输入后的回调函数 + */ + + /** + * @description 过滤输入后的回调函数 + */ + + /** + * @description 过滤渲染的组件类型 + */ + + TableHeader.prototype.render = function render() { var _this2 = this; @@ -217,6 +342,8 @@ var TableHeader = function (_Component) { onDrop = _props.onDrop, draggable = _props.draggable, rows = _props.rows, + filterable = _props.filterable, + onFilterRowsChange = _props.onFilterRowsChange, onMouseDown = _props.onMouseDown, onMouseMove = _props.onMouseMove, onMouseUp = _props.onMouseUp, @@ -297,9 +424,15 @@ var TableHeader = function (_Component) { className: clsPrefix + '-thead-th-drag-gap ' }) ); } else { - var th = da.onClick ? _react2["default"].createElement('th', _extends({}, da, { className: ' ' + fixedStyle, key: i, onClick: function onClick(event) { - da.onClick(da, event); - } })) : _react2["default"].createElement('th', _extends({}, da, { key: i, className: ' ' + fixedStyle })); + var th = void 0; + if (filterable && index == rows.length - 1) { + da.children = _this2.filterRenderType(da['filtertype'], da.dataindex, i); + th = _react2["default"].createElement('th', _extends({}, da, { key: i, className: da.className + ' ' + fixedStyle })); + } else { + th = da.onClick ? _react2["default"].createElement('th', _extends({}, da, { className: da.className + ' ' + fixedStyle, key: i, onClick: function onClick(event) { + da.onClick(da, event); + } })) : _react2["default"].createElement('th', _extends({}, da, { key: i, className: da.className + ' ' + fixedStyle })); + } return th; } }) diff --git a/build/lib/filterColumn.js b/build/lib/filterColumn.js index 02c55d6..f754363 100644 --- a/build/lib/filterColumn.js +++ b/build/lib/filterColumn.js @@ -134,7 +134,7 @@ function filterColumn(Table, Popover) { _react2["default"].createElement( "div", { className: prefixCls + "-pop-column-filter-cont" }, - _react2["default"].createElement(_beeIcon2["default"], { type: "uf-navmenu", onClick: this.openCloumList }) + _react2["default"].createElement(_beeIcon2["default"], { type: "uf-grid", onClick: this.openCloumList }) ) ) ) @@ -201,10 +201,10 @@ function filterColumn(Table, Popover) { if (!da.fixed) { return _react2["default"].createElement( "div", - { key: da.key + "_" + i, className: prefixCls + "-pop-cont-item", onClick: function onClick() { + { key: da.key + "_" + i, className: prefixCls + "-pop-cont-item" }, + _react2["default"].createElement(_beeCheckbox2["default"], { id: da.key, checked: da.checked, onClick: function onClick() { _this2.checkedColumItemClick(da); - } }, - _react2["default"].createElement(_beeCheckbox2["default"], { id: da.key, checked: da.checked }), + } }), _react2["default"].createElement( "span", null, diff --git a/build/lib/sort.js b/build/lib/sort.js index b1cb47d..8b96715 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,7 +8,7 @@ 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); @@ -28,7 +28,23 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function" * @param {*} Icon */ function sort(Table, Icon) { - return function (_Component) { + var _class, _temp; + + var IconType = [{ + 'type': 'flat', + 'icon': 'uf-symlist', + 'order': 'flatscend' + }, { + 'type': 'up', + 'icon': 'uf-sortup', + 'order': 'ascend' + }, { + 'type': 'down', + 'icon': 'uf-sortdown', + 'order': 'descend' + }]; + + return _temp = _class = function (_Component) { _inherits(SortTable, _Component); function SortTable(props) { @@ -36,44 +52,119 @@ function sort(Table, Icon) { var _this = _possibleConstructorReturn(this, _Component.call(this, props)); - _this.toggleSortOrder = function (order, column) { + _this.getOrderNum = function () { + var orderNum = 0; + _this.state.columns.forEach(function (item, index) { + if (item.order == 'ascend' || item.order == 'descend') { + orderNum++; + } + }); + return orderNum ? orderNum : 1; + }; + + _this.changeOrderNum = function (column) { + var columns = _this.state.columns; + + columns.forEach(function (col) { + if (col.orderNum > column.orderNum) { + col.orderNum--; + } + if (column.key == col.key) { + col.orderNum = ''; + } + }); + _this.setState({ columns: columns }); + }; + + _this._sortBy = function (pre, after, orderCols, orderColslen, currentIndex) { + var preKey = pre[orderCols[currentIndex].key]; + var afterKey = after[orderCols[currentIndex].key]; + if (preKey == afterKey && currentIndex + 1 <= orderColslen) { + return _this._sortBy(pre, after, orderCols, orderColslen, currentIndex + 1); + } + if (orderCols[currentIndex].order == 'ascend') { + return preKey - afterKey; + } else { + return afterKey - preKey; + } + }; + + _this.multiSort = function (columns) { var _this$state = _this.state, data = _this$state.data, - oldData = _this$state.oldData, - columns = _this$state.columns; + oldData = _this$state.oldData; - var ascend_sort = function ascend_sort(key) { - return function (a, b) { - return a.key - b.key; - }; - }; - var descend_sort = function descend_sort(key) { - return function (a, b) { - return b.key - a.key; - }; - }; - // if (sortOrder === order) { - // // 切换为未排序状态 - // order = ""; - // } - if (!oldData) { - oldData = data.concat(); - } - if (order === "ascend") { + var self = _this; + var orderCols = {}, + orderColslen = 0; + columns.forEach(function (item) { + if (item.orderNum) { + orderColslen++; + orderCols[item.orderNum] = item; + } + }); + if (orderColslen > 0) { data = data.sort(function (a, b) { - return column.sorter(a, b); - }); - } else if (order === "descend") { - data = data.sort(function (a, b) { - return column.sorter(b, a); + return self._sortBy(a, b, orderCols, orderColslen, 1); }); } else { data = oldData.concat(); } - var seleObj = columns.find(function (da) { - return da.key == column.key; - }); - seleObj.order = order; + return data; + }; + + _this.toggleSortOrder = function (order, column) { + var _this$state2 = _this.state, + data = _this$state2.data, + oldData = _this$state2.oldData, + columns = _this$state2.columns; + var sort = _this.props.sort; + + var seleObj = void 0; + if (!oldData) { + oldData = data.concat(); + } + //单列排序，清空其他列的排序 + if (sort.mode == 'single') { + columns.forEach(function (da) { + if (da.key == column.key) { + seleObj = da; + } else { + if (da.order) { + da.order = 'flatscend'; + } + } + }); + seleObj.order = order; + //通过后端请求 + if (sort.backSource) { + //获取排序的字段和方式 + } else { + if (order === "ascend") { + data = data.sort(function (a, b) { + return column.sorter(a, b); + }); + } else if (order === "descend") { + data = data.sort(function (a, b) { + return column.sorter(b, a); + }); + } else { + data = oldData.concat(); + } + } + } else { + seleObj = columns.find(function (da) { + return da.key == column.key; + }); + seleObj.order = order; + if (order === "flatscend") { + _this.changeOrderNum(column); + } + if (!seleObj.orderNum && (order == 'ascend' || order == 'descend')) { + seleObj.orderNum = _this.getOrderNum(); + } + data = _this.multiSort(columns); + } _this.setState({ data: data, oldData: oldData, @@ -83,48 +174,53 @@ function sort(Table, Icon) { _this.renderColumnsDropdown = function (columns) { var prefixCls = "bee-table"; + var mode = _this.props.sort.mode; + return columns.map(function (originColumn) { + var iconTypeIndex = 0; var column = _extends({}, originColumn); + var sorterClass = 'flat'; + + if (column.order === "ascend") { + iconTypeIndex = 1; + sorterClass = 'up'; + } else if (column.order === "descend") { + iconTypeIndex = 2; + sorterClass = 'down'; + } + var sortButton = void 0; if (column.sorter) { - var isAscend = column.order && column.order === "ascend"; - var isDescend = column.order && column.order === "descend"; + //大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值 + if (iconTypeIndex > 0 && !column.orderNum && mode == 'multiple') { + column.orderNum = _this.getOrderNum(); + } 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-' + sorterClass, onClick: function onClick() { - _this.toggleSortOrder("ascend", column); + _this.toggleSortOrder(IconType[iconTypeIndex == 2 ? 0 : iconTypeIndex + 1].order, column); if (column.sorterClick) { - column.sorterClick(column, "up"); + column.sorterClick(column, IconType[iconTypeIndex].type); } } }, - _react2["default"].createElement(Icon, { type: "uf-triangle-up" }) - ), - _react2["default"].createElement( - "span", - { - className: prefixCls + "-column-sorter-down " + (isDescend ? "on" : "off"), - title: "\u2193", - onClick: function onClick() { - _this.toggleSortOrder("descend", column); - if (column.sorterClick) { - column.sorterClick(column, "down"); - } - } - }, - _react2["default"].createElement(Icon, { type: "uf-triangle-down" }) + _react2["default"].createElement(Icon, { type: IconType[iconTypeIndex].icon }), + _react2["default"].createElement( + 'span', + null, + column.orderNum + ) ) ); } column.title = _react2["default"].createElement( - "span", + 'span', null, column.title, sortButton @@ -154,12 +250,38 @@ function sort(Table, Icon) { } }; + /** + * column 当前的排序的列 + * 当有的列不排序时，将该列的orderNum置为‘’，并动态的修改其他列的orderNum。 + */ + + + /** + * pre：前一条数据 + * after:后一条数据 + * orderType:升序、降序 + */ + + /** + * 多列排序 先排order为1的，其他的基于已排序的数据排 + */ + + //每个column上添加orderNum属性，不排序时为“”。 + //点击时orderNum有值则不重新赋值，如果没有值，则取当前column下的有oderNum的length值。并排序 + //点击置为“”时，动态的设置相关column的orderNum值。并排序 + + SortTable.prototype.render = function render() { var columns = this.renderColumnsDropdown(this.state.columns.concat()); return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns, data: this.state.data })); }; return SortTable; - }(_react.Component); + }(_react.Component), _class.defaultProps = { + sort: { + mode: 'single', + backSource: false //默认是前端排序，值为true为后端排序 + } + }, _temp; } -module.exports = exports["default"]; \ No newline at end of file +module.exports = exports['default']; \ No newline at end of file diff --git a/package.json b/package.json index 4ca9f79..1d5055c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bee-table", - "version": "1.4.4", + "version": "1.4.5", "description": "Table ui component for react", "keywords": [ "react", @@ -91,4 +91,4 @@ "react-addons-test-utils": "^15.5.0", "react-dom": "^15.5.0" } -} +} \ No newline at end of file