feat(增加按值和条件过滤列、多列排序):

This commit is contained in:
wanghaoo 2018-09-27 15:24:29 +08:00
parent 9b10d04d85
commit 8adc124ab1
8 changed files with 793 additions and 129 deletions

150
build/FilterDropDown.js Normal file
View File

@ -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'];

226
build/FilterType.js Normal file
View File

@ -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'];

View File

@ -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; }

View File

@ -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) {

View File

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

View File

@ -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,

View File

@ -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"];
module.exports = exports['default'];

View File

@ -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"
}
}
}