p47502813
/
bee-table
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

拖拽

This commit is contained in:
wanghaoo 2018-11-27 15:23:03 +08:00
parent 18e161ddc9 bcb82706c1
commit 523ad70b91
22 changed files with 3209 additions and 1952 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
CHANGELOG.md
View File

@ -1,3 +1,13 @@
<a name="1.5.10"></a>
## [1.5.10](https://github.com/tinper-bee/bee-table/compare/v1.5.9...v1.5.10) (2018-11-26)
<a name="1.5.9"></a>
## [1.5.9](https://github.com/tinper-bee/bee-table/compare/v1.5.8...v1.5.9) (2018-11-26)
<a name="1.5.8"></a>
## [1.5.8](https://github.com/tinper-bee/bee-table/compare/v1.5.7...v1.5.8) (2018-11-22)
@ -34,7 +44,7 @@
<a name="1.5.1"></a>
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-19)
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-18)

186
build/FilterDropDown.js
View File

@ -8,6 +8,10 @@ var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _beeDropdown = require('bee-dropdown');
var _beeDropdown2 = _interopRequireDefault(_beeDropdown);
@ -38,7 +42,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
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); }
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;
@ -74,57 +80,124 @@ var FilterDropDown = function (_Component) {
}
};
_this.getMenu = function () {
var selectValue = _this.state.selectValue;
var filterDropdownType = _this.props.filterDropdownType;
var locale = (0, _tool.getComponentLocale)(_this.props, _this.context, 'Table', function () {
return _i18n2["default"];
});
switch (filterDropdownType) {
case 'string':
return _react2["default"].createElement(
_beeMenus2["default"],
{
onSelect: _this.onSelectDropdown,
selectedKeys: selectValue
},
_react2["default"].createElement(
Item,
{ key: '2' },
locale['include']
),
_react2["default"].createElement(
Item,
{ key: '6' },
locale['exclusive']
),
_react2["default"].createElement(
Item,
{ key: '1' },
locale['equal']
),
_react2["default"].createElement(
Item,
{ key: '5' },
locale['unequal']
),
_react2["default"].createElement(
Item,
{ key: '7' },
locale['begin']
),
_react2["default"].createElement(
Item,
{ key: '3' },
locale['end']
)
);
case 'number':
return _react2["default"].createElement(
_beeMenus2["default"],
{
onSelect: _this.onSelectDropdown,
selectedKeys: selectValue
},
_react2["default"].createElement(
Item,
{ key: '1' },
locale['greater_than']
),
_react2["default"].createElement(
Item,
{ key: '2' },
locale['great_than_equal_to']
),
_react2["default"].createElement(
Item,
{ key: '3' },
locale['less_than']
),
_react2["default"].createElement(
Item,
{ key: '4' },
locale['less_than_equal_to']
),
_react2["default"].createElement(
Item,
{ key: '5' },
locale['be_equal_to']
),
_react2["default"].createElement(
Item,
{ key: '6' },
locale['not_equal_to']
)
);
default:
return _react2["default"].createElement('div', null);
}
};
_this.state = {
selectValue: []
selectValue: [] //选择的条件的值
};
return _this;
}
/**
* 点击下拉菜单
*
* @param {*} s 选中的selectRecord
*/
/**
* 清除事件
*
*/
/**
* 根据props来获得指定的Menu,分为String和Number
*
* @returns JSX Menu
*/
FilterDropDown.prototype.render = function render() {
var isShowCondition = this.props.isShowCondition;
var locale = (0, _tool.getComponentLocale)(this.props, this.context, 'Table', function () {
return _i18n2["default"];
});
var dropmenu = _react2["default"].createElement(
_beeMenus2["default"],
{
onSelect: this.onSelectDropdown,
selectedKeys: this.state.selectValue
},
_react2["default"].createElement(
Item,
{ key: '2' },
locale['include']
),
_react2["default"].createElement(
Item,
{ key: '6' },
locale['exclusive']
),
_react2["default"].createElement(
Item,
{ key: '1' },
locale['equal']
),
_react2["default"].createElement(
Item,
{ key: '5' },
locale['unequal']
),
_react2["default"].createElement(
Item,
{ key: '7' },
locale['begin']
),
_react2["default"].createElement(
Item,
{ key: '3' },
locale['end']
)
);
return _react2["default"].createElement(
'div',
{ className: 'filter-btns' },
@ -132,19 +205,26 @@ var FilterDropDown = function (_Component) {
_beeDropdown2["default"],
{
trigger: ['click'],
overlay: dropmenu,
overlay: this.getMenu(),
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' })
{
shape: 'border',
style: { marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 }
},
_react2["default"].createElement(_beeIcon2["default"], { style: { padding: 0, color: '#585858' }, 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' })
{
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, color: '#585858', "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }, type: 'uf-filterno' })
)
);
};
@ -152,5 +232,15 @@ var FilterDropDown = function (_Component) {
return FilterDropDown;
}(_react.Component);
FilterDropDown.propTypes = {
isShowCondition: _propTypes2["default"].string,
filterDropdownType: _propTypes2["default"].oneOf(['string', 'number'])
};
FilterDropDown.defaultProps = {
isShowCondition: 'show',
filterDropdownType: 'string'
};
exports["default"] = FilterDropDown;
module.exports = exports['default'];

92
build/FilterType.js
View File

@ -14,6 +14,10 @@ var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _zh_CN = require('rc-calendar/lib/locale/zh_CN');
var _zh_CN2 = _interopRequireDefault(_zh_CN);
var _beeFormControl = require('bee-form-control');
var _beeFormControl2 = _interopRequireDefault(_beeFormControl);
@ -22,6 +26,10 @@ var _beeSelect = require('bee-select');
var _beeSelect2 = _interopRequireDefault(_beeSelect);
var _beeInputNumber = require('bee-input-number');
var _beeInputNumber2 = _interopRequireDefault(_beeInputNumber);
var _beeDatepicker = require('bee-datepicker');
var _beeDatepicker2 = _interopRequireDefault(_beeDatepicker);
@ -40,6 +48,9 @@ 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); }
var RangePicker = _beeDatepicker2["default"].RangePicker;
var propTypes = {
filterDropdown: _propTypes2["default"].string
};
@ -61,6 +72,24 @@ var FilterType = function (_Component) {
onChange && onChange("");
};
_this.changeNumber = function (number) {
var onChange = _this.props.onChange;
onChange && onChange(number);
_this.setState({
number: number
});
};
_this.clearNumber = function () {
var onChange = _this.props.onChange;
onChange && onChange("");
_this.setState({
number: ""
});
};
_this.changeText = function (eve) {
_this.setState({
text: eve
@ -123,6 +152,8 @@ var FilterType = function (_Component) {
_this.renderControl = function (rendertype) {
var _this$props = _this.props,
filterDropdown = _this$props.filterDropdown,
filterDropdownType = _this$props.filterDropdownType,
format = _this$props.format,
className = _this$props.className,
onChange = _this$props.onChange,
onSelectDropdown = _this$props.onSelectDropdown,
@ -149,7 +180,26 @@ var FilterType = function (_Component) {
onSelectDropdown: onSelectDropdown,
onClickClear: _this.clearText,
isShowClear: _this.state.text,
isShowCondition: filterDropdown
isShowCondition: filterDropdown,
filterDropdownType: filterDropdownType
})
);
case 'number':
return _react2["default"].createElement(
'div',
{ className: clsPrefix + ' filter-wrap' },
_react2["default"].createElement(_beeInputNumber2["default"], {
className: className,
value: _this.state.number,
onChange: _this.changeNumber
}),
_react2["default"].createElement(_FilterDropDown2["default"], {
locale: locale,
onSelectDropdown: onSelectDropdown,
onClickClear: _this.clearNumber,
isShowClear: _this.state.number,
isShowCondition: filterDropdown,
filterDropdownType: filterDropdownType
})
);
case 'dropdown':
@ -175,7 +225,31 @@ var FilterType = function (_Component) {
_react2["default"].createElement(_beeDatepicker2["default"], _extends({}, _this.props, {
value: _this.state.dateValue,
onChange: _this.changeDate,
open: _this.state.open
open: _this.state.open,
format: format,
locale: _zh_CN2["default"]
})),
filterDropdown == 'show' && _react2["default"].createElement(_FilterDropDown2["default"], {
locale: locale,
onSelectDropdown: onSelectDropdown,
onClickClear: _this.clearDateValue,
isShowCondition: filterDropdown,
isShowClear: _this.state.dateValue
})
);
case 'daterange':
return _react2["default"].createElement(
'div',
{ className: clsPrefix + ' filter-wrap' },
_react2["default"].createElement(RangePicker, _extends({}, _this.props, {
value: _this.state.dateValue,
onChange: _this.changeDate,
open: _this.state.open,
format: format,
locale: _zh_CN2["default"],
placeholder: '开始 ~ 结束',
dateInputPlaceholder: ['开始', '结束'],
showClear: true
})),
filterDropdown == 'show' && _react2["default"].createElement(_FilterDropDown2["default"], {
locale: locale,
@ -198,7 +272,7 @@ var FilterType = function (_Component) {
})
);
default:
break;
return _react2["default"].createElement('div', null);
}
};
@ -206,12 +280,16 @@ var FilterType = function (_Component) {
text: "",
selectValue: "",
dateValue: "",
open: false
open: false,
number: 0
};
return _this;
}
//清除文本
//设置数值
//清除数值
//设置文本
@ -228,6 +306,12 @@ var FilterType = function (_Component) {
//设置日期值
//组件渲染
/**
* 根据不同的类型生成对应的组件类型包含一些参数的适应
*
* @param {*} rendertype 参数类型，包括['text','dropdown','date','daterange','number']
* @returns
*/
FilterType.prototype.render = function render() {

21
build/Table.css
View File

@ -326,10 +326,7 @@
.u-table-thead .filter-wrap .filter-btns {
min-width: 58px; }
.u-table-thead th {
background: #f7f7f7;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
background: #f7f7f7; }
.u-table-thead th .bee-table-column-sorter {
position: relative;
margin-left: 4px;
@ -383,16 +380,26 @@
.u-table-thead-th-drag-gap {
height: 100%;
position: absolute;
right: 0px;
right: -10px;
top: 0;
background: #ccc;
width: 2px;
width: 20px;
box-sizing: border-box;
z-index: 1; }
.u-table-thead-th-drag-gap .online {
height: 100%;
width: 1px;
background: transparent;
margin: 0 auto; }
.u-table-thead-th-drag-gap .online-hover {
background: #000000; }
.u-table-thead-th .th-drag-gap {
background: transparent; }
.u-table-thead-th .th-drag-gap-hover {
cursor: col-resize; }
.u-table-thead-th .th-drag-gap > div {
background: transparent; }
.u-table-thead-th .th-drag-gap-hover > div {
background: #000000; }
.u-table-thead-th:last-child-drag-gap {
border: none; }
.u-table-filter-column-pop-cont {

41
build/Table.js
View File

@ -433,24 +433,38 @@ var Table = function (_Component) {
var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var rows = arguments[2];
var _state = this.state,
_state$contentWidthDi = _state.contentWidthDiff,
contentWidthDiff = _state$contentWidthDi === undefined ? 0 : _state$contentWidthDi,
_state$lastShowIndex = _state.lastShowIndex,
lastShowIndex = _state$lastShowIndex === undefined ? 0 : _state$lastShowIndex;
var filterCol = [];
rows = rows || [];
rows[currentRow] = rows[currentRow] || [];
columns.forEach(function (column) {
columns.forEach(function (column, i) {
if (column.rowSpan && rows.length < column.rowSpan) {
while (rows.length < column.rowSpan) {
rows.push([]);
}
}
var width = column.width;
if (typeof width == 'string' && width.indexOf('%') > -1 && _this2.contentWidth) {
width = parseInt(_this2.contentWidth * parseInt(width) / 100);
} else if (width) {
width = parseInt(width);
}
if (lastShowIndex == i && width) {
width = width + contentWidthDiff;
}
var cell = {
key: column.key,
className: column.className || '',
children: column.title,
drgHover: column.drgHover,
fixed: column.fixed,
width: column.width,
width: width,
dataindex: column.dataIndex
};
if (column.onHeadCellClick) {
@ -475,14 +489,15 @@ var Table = function (_Component) {
key: column.key,
children: "过滤渲染",
width: column.width,
filtertype: column.filterType,
dataindex: column.dataIndex,
datasource: _this2.props.data,
format: column.format,
filterdropdown: column.filterDropdown,
filtertype: column.filterType, //下拉的类型 包括['text','dropdown','date','daterange','number']
dataindex: column.dataIndex, //field
datasource: _this2.props.data, //需要单独拿到数据处理
format: column.format, //设置日期的格式
filterdropdown: column.filterDropdown, //是否显示 show hide
filterdropdownauto: column.filterDropdownAuto, //是否自定义数据
filterdropdowndata: column.filterDropdownData, //自定义数据格式
filterdropdownfocus: column.filterDropdownFocus //焦点触发函数回调
filterdropdownfocus: column.filterDropdownFocus, //焦点触发函数回调
filterdropdowntype: column.filterDropdownType //下拉的类型分为 String,Number 默认是String
});
}
});
@ -662,11 +677,11 @@ var Table = function (_Component) {
Table.prototype.getColGroup = function getColGroup(columns, fixed) {
var cols = [];
var self = this;
var _state = this.state,
_state$contentWidthDi = _state.contentWidthDiff,
contentWidthDiff = _state$contentWidthDi === undefined ? 0 : _state$contentWidthDi,
_state$lastShowIndex = _state.lastShowIndex,
lastShowIndex = _state$lastShowIndex === undefined ? 0 : _state$lastShowIndex;
var _state2 = this.state,
_state2$contentWidthD = _state2.contentWidthDiff,
contentWidthDiff = _state2$contentWidthD === undefined ? 0 : _state2$contentWidthD,
_state2$lastShowIndex = _state2.lastShowIndex,
lastShowIndex = _state2$lastShowIndex === undefined ? 0 : _state2$lastShowIndex;
if (this.props.expandIconAsCell && fixed !== 'right') {
cols.push(_react2["default"].createElement('col', {

71
build/TableHeader.js
View File

@ -86,7 +86,9 @@ var TableHeader = function (_Component) {
if (_this.border || data.fixed) return;
var clsPrefix = _this.props.clsPrefix;
event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap-hover";
if (event.target.id != 'th-online') {
event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap-hover";
}
};
_this.ableOnMouseMove = function (event, data) {
@ -118,7 +120,9 @@ var TableHeader = function (_Component) {
if (_this.border) return;
var clsPrefix = _this.props.clsPrefix;
event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap";
if (event.target.id != 'th-online') {
event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap";
}
};
_this.onMouseDown = function (event, data) {
@ -188,7 +192,7 @@ var TableHeader = function (_Component) {
// columns[this.drag.currIndex].width = data.width;
//宽度拖拽后，增加回调函数，外部可以记录宽度
if (typeof _this.props.afterDragColWidth == "function" && rows && rows[0] && _this.drag.currIndex) {
_this.props.afterDragColWidth(rows[0][_this.drag.currIndex], _this.drag.currIndex);
_this.props.afterDragColWidth(rows[0], _this.drag.currIndex);
}
};
@ -202,7 +206,8 @@ var TableHeader = function (_Component) {
headerScroll = _this$props3.headerScroll,
contentDomWidth = _this$props3.contentDomWidth,
scrollbarWidth = _this$props3.scrollbarWidth,
bordered = _this$props3.bordered;
bordered = _this$props3.bordered,
rows = _this$props3.rows;
var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft - 0;
var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode;
@ -250,8 +255,8 @@ var TableHeader = function (_Component) {
currentDom.style.width = newWidth + "px";
// this.contentTableWidth = newTableWidth;
contentTableDom.style.width = newTableWidth + "px";
data.width = newWidth;
// data.width = newWidth;
rows[0][_this.drag.currIndex].width = newWidth;
_this.drag.x = x;
var contentColDomArr = contentTableDom.querySelectorAll("colgroup col");
contentColDomArr[_this.drag.currIndex].style.width = newWidth + "px";
@ -322,7 +327,20 @@ var TableHeader = function (_Component) {
onChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterTextChange.bind(_this, dataIndex))
// onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
, onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
filterDropdown: rows[1][index]["filterdropdown"]
filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
});
//数值输入
case "number":
return _react2["default"].createElement(_FilterType2["default"], {
locale: locale,
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"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
});
//下拉框选择
case "dropdown":
@ -351,7 +369,8 @@ var TableHeader = function (_Component) {
onChange: _this.handlerFilterTextChange.bind(_this, dataIndex),
onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
filterDropdown: rows[1][index]["filterdropdown"],
onFocus: rows[1][index]["filterdropdownfocus"]
onFocus: rows[1][index]["filterdropdownfocus"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
});
//日期
case "date":
@ -363,7 +382,21 @@ var TableHeader = function (_Component) {
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"]
filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
});
//日期范围
case "daterange":
return _react2["default"].createElement(_FilterType2["default"], {
locale: locale,
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"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
});
default:
//不匹配类型默认文本输入
@ -478,13 +511,8 @@ var TableHeader = function (_Component) {
if (!fixed && da.fixed) {
fixedStyle = clsPrefix + "-row-fixed-columns-in-body";
}
if (typeof da.width == "string" && da.width.indexOf("%") > -1 && _this2.props.contentWidth) {
da.width = parseInt(_this2.props.contentWidth * parseInt(da.width) / 100);
} else if (da.width) {
da.width = parseInt(da.width);
}
if (lastShowIndex == i) {
da.width = parseInt(da.width) + contentWidthDiff;
canDotDrag = "th-can-not-drag";
}
if (filterable && index == rows.length - 1) {
@ -564,6 +592,7 @@ var TableHeader = function (_Component) {
thClassName += "" + fixedStyle;
if (!da.fixed) {
thLineObj = {
//----------------
onMouseMove: function onMouseMove(e) {
e.stopPropagation();_this2.onMouseMove(e, da);
},
@ -579,16 +608,20 @@ var TableHeader = function (_Component) {
onMouseOver: function onMouseOver(e) {
_this2.onMouseOver(e, da);
},
className: clsPrefix + "-thead-th-drag-gap "
className: clsPrefix + "-thead-th-drag-gap th-drag-gap"
};
}
return _react2["default"].createElement(
"th",
_extends({ key: Math.random() }, thAbleObj, thBorObj, { className: thClassName }),
da.children,
da.fixed ? "" : _react2["default"].createElement("div", _extends({ ref: function ref(el) {
return _this2.gap = el;
} }, thLineObj))
da.fixed ? "" : _react2["default"].createElement(
"div",
_extends({ ref: function ref(el) {
return _this2.gap = el;
} }, thLineObj),
_react2["default"].createElement("div", { id: "th-online", className: "online" })
)
);
} else {
thDefaultObj = _extends({}, da, {

22
build/i18n.js
View File

@ -9,6 +9,12 @@ module.exports = {
'unequal': '不等于',
'begin': '以开始',
'end': '以结尾',
'greater_than': '大于',
'great_than_equal_to': '大于等于',
'less_than': '小于',
'less_than_equal_to': '小于等于',
'be_equal_to': '等于',
'not_equal_to': '不等于',
'en-us': {
'resetSettings': 'reset settings',
'include': 'include',
@ -16,7 +22,13 @@ module.exports = {
'equal': 'equal',
'unequal': 'unequal',
'begin': 'begin',
'end': 'end'
'end': 'end',
'greater_than': 'greater than',
'great_than_equal_to': 'great than equal to',
'less_than': 'less than',
'less_than_equal_to': 'less than equal to',
'be_equal_to': 'be equal to',
'not_equal_to': 'not equal to'
},
'zh-tw': {
'resetSettings': '還原設置',
@ -25,6 +37,12 @@ module.exports = {
'equal': '等於',
'unequal': '不等於',
'begin': '以開始',
'end': '以結尾'
'end': '以結尾',
'greater_than': '大於',
'great_than_equal_to': '大於等於',
'less_than': '小於',
'less_than_equal to': '小於等於',
'be_equal_to': '等於',
'not_equal_to': '不等於'
}
};

1
demo/TableDemo.scss
View File

@ -13,6 +13,7 @@
@import "../node_modules/bee-tooltip/src/Tooltip.scss";
@import "../node_modules/bee-message/build/Message.css";
@import "../node_modules/bee-dropdown/build/Dropdown.css";
@import "../node_modules/bee-input-number/build/InputNumber.css";
@import "../src/Table.scss";

BIN
demo/demolist/.DS_Store vendored
View File

Binary file not shown.

37
demo/demolist/Demo27.js
View File

@ -149,15 +149,31 @@ class Demo27 extends Component {
</Dropdown>
}
},
{ title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" },
{
title: "姓名",
width: 180,
dataIndex: "name",
key: "name",
filterType: "text",//输入框类型
filterDropdown: "show",//显示条件
filterDropdownType: "string"//字符条件
},
{
title: "区间",
width: 200,
dataIndex: "mark",
key: "mark",
filterType: "number",//输入框类型
filterDropdownType: "number"//数值类条件
},
{
title: "年龄",
width: 150,
width: 180,
sorter: (a, b) => a.age - b.age,
dataIndex: "age",
key: "age",
filterType: "dropdown",
filterDropdown: "hide",
filterDropdown: "hide",//不显示条件
filterDropdownAuto: "manual",//切换手动传入模式
filterDropdownData: this.state.dropdownvalue,
filterDropdownFocus: () => {
@ -166,7 +182,20 @@ class Demo27 extends Component {
});
}
},
{ title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "dropdown", filterDropdown: "hide" },
{
title: "居住地址",
width: 350,
dataIndex: "address",
key: "address",
filterType: "daterange",
filterDropdown: "show"
},
{
title: "操作",
width: 100,
key: "other",
dataIndex: "other"
}
];
return <ComplexTable
onFilterRowsDropChange={this.handlerFilterRowsDropChange}//下拉条件的回调(key,val)=>()

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

22
dist/demo.css vendored
View File

@ -5,6 +5,7 @@
/* Navlayout */
@import url(../node_modules/bee-message/build/Message.css);
@import url(../node_modules/bee-dropdown/build/Dropdown.css);
@import url(../node_modules/bee-input-number/build/InputNumber.css);
.red {
color: rgb(244,67,54) !important; }
@ -8591,10 +8592,7 @@ ul {
.u-table-thead .filter-wrap .filter-btns {
min-width: 58px; }
.u-table-thead th {
background: #f7f7f7;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
background: #f7f7f7; }
.u-table-thead th .bee-table-column-sorter {
position: relative;
margin-left: 4px;
@ -8644,16 +8642,26 @@ ul {
.u-table-thead-th-drag-gap {
height: 100%;
position: absolute;
right: 0px;
right: -10px;
top: 0;
background: #ccc;
width: 2px;
width: 20px;
box-sizing: border-box;
z-index: 1; }
.u-table-thead-th-drag-gap .online {
height: 100%;
width: 1px;
background: transparent;
margin: 0 auto; }
.u-table-thead-th-drag-gap .online-hover {
background: #000000; }
.u-table-thead-th .th-drag-gap {
background: transparent; }
.u-table-thead-th .th-drag-gap-hover {
cursor: col-resize; }
.u-table-thead-th .th-drag-gap > div {
background: transparent; }
.u-table-thead-th .th-drag-gap-hover > div {
background: #000000; }
.u-table-thead-th:last-child-drag-gap {
border: none; }
.u-table-filter-column-pop-cont {

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

4272
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

5
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "1.5.8",
"version": "1.5.10",
"description": "Table ui component for react",
"keywords": [
"react",
@ -52,6 +52,7 @@
"bee-dropdown": "^1.0.1",
"bee-form-control": "latest",
"bee-icon": "^1.0.5",
"bee-input-number": "^1.1.14",
"bee-loading": "^1.0.3",
"bee-locale": "0.0.11",
"bee-menus": "^1.0.7",
@ -92,4 +93,4 @@
"react-addons-test-utils": "^15.5.0",
"react-dom": "^15.5.0"
}
}
}

99
src/FilterDropDown.js
View File

@ -1,4 +1,9 @@
/**
* 过滤行功能内的下拉条件
*/
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Dropdown from 'bee-dropdown';
import Menu from 'bee-menus';
import Button from 'bee-button';
@ -7,13 +12,19 @@ import i18n from './i18n';
import { getComponentLocale } from 'bee-locale/build/tool';
const { Item } = Menu;
class FilterDropDown extends Component {
constructor() {
super();
this.state = {
selectValue: []
selectValue: []//选择的条件的值
}
}
/**
* 点击下拉菜单
*
* @param {*} s 选中的selectRecord
*/
onSelectDropdown = (s) => {
let { onSelectDropdown } = this.props;
if (onSelectDropdown) {
@ -24,6 +35,11 @@ class FilterDropDown extends Component {
});
}
}
/**
* 清除事件
*
*/
onClickClear = () => {
let { onClickClear } = this.props;
if (onClickClear) {
@ -34,36 +50,81 @@ class FilterDropDown extends Component {
});
}
}
/**
* 根据props来获得指定的Menu,分为String和Number
*
* @returns JSX Menu
*/
getMenu = () => {
let { selectValue } = this.state;
let { filterDropdownType } = this.props;
let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
switch (filterDropdownType) {
case 'string':
return <Menu
onSelect={this.onSelectDropdown}
selectedKeys={selectValue}
>
<Item key="2">{locale['include']}</Item>
<Item key="6">{locale['exclusive']}</Item>
<Item key="1">{locale['equal']}</Item>
<Item key="5">{locale['unequal']}</Item>
<Item key="7">{locale['begin']}</Item>
<Item key="3">{locale['end']}</Item>
</Menu>
case 'number':
return <Menu
onSelect={this.onSelectDropdown}
selectedKeys={selectValue}
>
<Item key="1">{locale['greater_than']}</Item>
<Item key="2">{locale['great_than_equal_to']}</Item>
<Item key="3">{locale['less_than']}</Item>
<Item key="4">{locale['less_than_equal_to']}</Item>
<Item key="5">{locale['be_equal_to']}</Item>
<Item key="6">{locale['not_equal_to']}</Item>
</Menu>
default:
return <div></div>;
}
}
render() {
let { isShowCondition } = this.props;
let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
let dropmenu = (
<Menu
onSelect={this.onSelectDropdown}
selectedKeys={this.state.selectValue}
>
<Item key="2">{locale['include']}</Item>
<Item key="6">{locale['exclusive']}</Item>
<Item key="1">{locale['equal']}</Item>
<Item key="5">{locale['unequal']}</Item>
<Item key="7">{locale['begin']}</Item>
<Item key="3">{locale['end']}</Item>
</Menu>
);
return (<div className="filter-btns">
{isShowCondition == 'show' && <Dropdown
trigger={['click']}
overlay={dropmenu}
overlay={this.getMenu()}
animation="slide-up"
>
<Button shape="border" style={{ marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 }}><Icon style={{ padding: 0 }} type="uf-filter" /></Button>
<Button
shape="border"
style={{ marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 }}
>
<Icon style={{ padding: 0, color: '#585858' }} type="uf-filter" />
</Button>
</Dropdown>}
<Button 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" }}><Icon style={{ padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }} type="uf-filterno" /></Button>
<Button
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" }}
>
<Icon style={{ padding: 0, color: '#585858', "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }} type="uf-filterno" />
</Button>
</div>
);
}
}
FilterDropDown.propTypes = {
isShowCondition: PropTypes.string,
filterDropdownType: PropTypes.oneOf(['string', 'number'])
}
FilterDropDown.defaultProps = {
isShowCondition: 'show',
filterDropdownType: 'string'
}
export default FilterDropDown;

151
src/FilterType.js
View File

@ -1,10 +1,14 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import zhCN from "rc-calendar/lib/locale/zh_CN";
import FormControl from 'bee-form-control';
import Select from 'bee-select';
import InputNumber from 'bee-input-number';
import DatePicker from 'bee-datepicker';
import FilterDropDown from './FilterDropDown';
const { RangePicker } = DatePicker;
const propTypes = {
filterDropdown: PropTypes.string
};
@ -16,7 +20,8 @@ class FilterType extends Component {
text: "",
selectValue: "",
dateValue: "",
open: false
open: false,
number: 0
}
}
//清除文本
@ -27,7 +32,22 @@ class FilterType extends Component {
let { onChange } = this.props;
onChange && onChange("");
}
//设置数值
changeNumber = (number) => {
let { onChange } = this.props;
onChange && onChange(number);
this.setState({
number
});
}
//清除数值
clearNumber = () => {
let { onChange } = this.props;
onChange && onChange("");
this.setState({
number: ""
});
}
//设置文本
changeText = (eve) => {
this.setState({
@ -84,67 +104,118 @@ class FilterType extends Component {
}
}
//组件渲染
/**
* 根据不同的类型生成对应的组件类型包含一些参数的适应
*
* @param {*} rendertype 参数类型，包括['text','dropdown','date','daterange','number']
* @returns
*/
renderControl = (rendertype) => {
let { filterDropdown, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
let { filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
switch (rendertype) {
case 'text':
return <div className={`${clsPrefix} filter-wrap`}><FormControl
ref={el => this.text = el}
value={this.state.text}
className={className}
onChange={this.changeText}
onKeyDown={this.changeTextCall}
onBlur={this.changeTextCallBlur}
/>
return <div className={`${clsPrefix} filter-wrap`}>
<FormControl
ref={el => this.text = el}
value={this.state.text}
className={className}
onChange={this.changeText}
onKeyDown={this.changeTextCall}
onBlur={this.changeTextCallBlur}
/>
<FilterDropDown
locale={locale}
onSelectDropdown={onSelectDropdown}
onClickClear={this.clearText}
isShowClear={this.state.text}
isShowCondition={filterDropdown}
filterDropdownType={filterDropdownType}
>
</FilterDropDown>
</div>
case 'number':
return <div className={`${clsPrefix} filter-wrap`}>
<InputNumber
className={className}
value={this.state.number}
onChange={this.changeNumber}
/>
<FilterDropDown
locale={locale}
onSelectDropdown={onSelectDropdown}
onClickClear={this.clearNumber}
isShowClear={this.state.number}
isShowCondition={filterDropdown}
filterDropdownType={filterDropdownType}
>
</FilterDropDown>
</div>
case 'dropdown':
return <div className={`${clsPrefix} filter-wrap`}><Select
{...this.props}
value={this.state.selectValue}
onChange={this.changeSelect}
/><FilterDropDown
locale={locale}
onSelectDropdown={onSelectDropdown}
onClickClear={this.clearSelectValue}
isShowCondition={filterDropdown}
isShowClear={this.state.selectValue}
>
return <div className={`${clsPrefix} filter-wrap`}>
<Select
{...this.props}
value={this.state.selectValue}
onChange={this.changeSelect}
/><FilterDropDown
locale={locale}
onSelectDropdown={onSelectDropdown}
onClickClear={this.clearSelectValue}
isShowCondition={filterDropdown}
isShowClear={this.state.selectValue}
>
</FilterDropDown></div>
case 'date':
return <div className={`${clsPrefix} filter-wrap`}><DatePicker
{...this.props}
value={this.state.dateValue}
onChange={this.changeDate}
open={this.state.open}
/>{filterDropdown == 'show' && <FilterDropDown
locale={locale}
onSelectDropdown={onSelectDropdown}
onClickClear={this.clearDateValue}
isShowCondition={filterDropdown}
isShowClear={this.state.dateValue}
>
</FilterDropDown>}
return <div className={`${clsPrefix} filter-wrap`}>
<DatePicker
{...this.props}
value={this.state.dateValue}
onChange={this.changeDate}
open={this.state.open}
format={format}
locale={zhCN}
/>{filterDropdown == 'show' && <FilterDropDown
locale={locale}
onSelectDropdown={onSelectDropdown}
onClickClear={this.clearDateValue}
isShowCondition={filterDropdown}
isShowClear={this.state.dateValue}
>
</FilterDropDown>}
</div>
case 'daterange':
return <div className={`${clsPrefix} filter-wrap`}>
<RangePicker
{...this.props}
value={this.state.dateValue}
onChange={this.changeDate}
open={this.state.open}
format={format}
locale={zhCN}
placeholder={'开始 ~ 结束'}
dateInputPlaceholder={['开始', '结束']}
showClear={true}
/>{filterDropdown == 'show' && <FilterDropDown
locale={locale}
onSelectDropdown={onSelectDropdown}
onClickClear={this.clearDateValue}
isShowCondition={filterDropdown}
isShowClear={this.state.dateValue}
>
</FilterDropDown>}
</div>
case 'bool':
return <div className={`${clsPrefix} filter-wrap`}><Switch
className={className}
onChange={onChange}
/>
return <div className={`${clsPrefix} filter-wrap`}>
<Switch
className={className}
onChange={onChange}
/>
{filterDropdown == 'show' && <FilterDropDown locale={locale}
onSelectDropdown={onSelectDropdown}
>
</FilterDropDown>}
</div>
default:
break;
return <div></div>;
}
}

13
src/Table.js
View File

@ -392,14 +392,15 @@ class Table extends Component {
key: column.key,
children: "过滤渲染",
width: column.width,
filtertype: column.filterType,
dataindex: column.dataIndex,
datasource: this.props.data,
format: column.format,
filterdropdown: column.filterDropdown,
filtertype: column.filterType,//下拉的类型 包括['text','dropdown','date','daterange','number']
dataindex: column.dataIndex,//field
datasource: this.props.data,//需要单独拿到数据处理
format: column.format,//设置日期的格式
filterdropdown: column.filterDropdown,//是否显示 show hide
filterdropdownauto: column.filterDropdownAuto,//是否自定义数据
filterdropdowndata: column.filterDropdownData,//自定义数据格式
filterdropdownfocus: column.filterDropdownFocus//焦点触发函数回调
filterdropdownfocus: column.filterDropdownFocus,//焦点触发函数回调
filterdropdowntype: column.filterDropdownType//下拉的类型分为 String,Number 默认是String
});
}
});

28
src/Table.scss
View File

@ -290,9 +290,9 @@ $table-move-in-color: $bg-color-base;
}
th{
background: $table-head-background-color;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
.bee-table-column-sorter {
position: relative;
margin-left: 4px;
@ -366,15 +366,25 @@ $table-move-in-color: $bg-color-base;
&-drag-gap{
height: 100%;
position: absolute;
right: 0px;
right: -10px;
top: 0;
// background:transparent;
// width: 1px;
background:#ccc;
width: 2px;
// background:#ccc;
width: 20px;
box-sizing: border-box;
z-index: 1;
.online{
height: 100%;
width: 1px;
background:transparent;
margin: 0 auto;
}
.online-hover{
background:#000000;
}
}
.th-drag-gap{
background:transparent;
@ -383,6 +393,12 @@ $table-move-in-color: $bg-color-base;
// background: #ccc;
cursor: col-resize;
}
.th-drag-gap>div{
background:transparent;
}
.th-drag-gap-hover>div{
background: #000000
}
// &.th-can-not-drag{
// .th-drag-gap-hover{
// cursor: none;

64
src/TableHeader.js
View File

@ -102,7 +102,9 @@ class TableHeader extends Component {
//如果是固定列没有拖拽功能
if (this.border || data.fixed) return;
const { clsPrefix } = this.props;
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
if(event.target.id != 'th-online'){
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
}
};
ableOnMouseMove = (event, data) => {
@ -130,7 +132,9 @@ class TableHeader extends Component {
onMouseOut = (event, data) => {
if (this.border) return;
const { clsPrefix } = this.props;
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
if(event.target.id != 'th-online'){
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
}
};
onMouseDown = (event, data) => {
let {dragAbleOrBord,dragAbleOrBordStart} = this.state;
@ -196,15 +200,15 @@ class TableHeader extends Component {
rows[0] &&
this.drag.currIndex
) {
this.props.afterDragColWidth(rows[0][this.drag.currIndex],this.drag.currIndex);
this.props.afterDragColWidth(rows[0],this.drag.currIndex);
}
};
onThMouseMove = (event, data) => {
if (!this.border) return;
//固定表头拖拽
const { dragborderKey, contentTable,headerScroll ,contentDomWidth,scrollbarWidth,bordered} = this.props;
const { dragborderKey, contentTable,headerScroll ,contentDomWidth,scrollbarWidth,bordered,rows} = this.props;
let x = event.pageX - this.drag.initPageLeftX + this.drag.initLeft - 0;
let contentTableDom = document.getElementById(
"u-table-drag-thead-" + this.theadKey
@ -260,8 +264,8 @@ class TableHeader extends Component {
currentDom.style.width = newWidth + "px";
// this.contentTableWidth = newTableWidth;
contentTableDom.style.width = newTableWidth + "px";
data.width = newWidth;
// data.width = newWidth;
rows[0][this.drag.currIndex].width = newWidth;
this.drag.x = x;
let contentColDomArr = contentTableDom.querySelectorAll("colgroup col");
contentColDomArr[this.drag.currIndex].style.width = newWidth + "px";
@ -340,6 +344,27 @@ class TableHeader extends Component {
dataIndex
)}
filterDropdown={rows[1][index]["filterdropdown"]}
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
/>
);
//数值输入
case "number":
return (
<FilterType
locale={locale}
rendertype={type}
clsPrefix={clsPrefix}
className={`${clsPrefix} filter-text`}
onChange={debounce(
filterDelay || 300,
this.handlerFilterTextChange.bind(this, dataIndex)
)}
onSelectDropdown={this.handlerFilterDropChange.bind(
this,
dataIndex
)}
filterDropdown={rows[1][index]["filterdropdown"]}
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
/>
);
//下拉框选择
@ -375,6 +400,7 @@ class TableHeader extends Component {
)}
filterDropdown={rows[1][index]["filterdropdown"]}
onFocus={rows[1][index]["filterdropdownfocus"]}
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
/>
);
//日期
@ -392,6 +418,25 @@ class TableHeader extends Component {
dataIndex
)}
filterDropdown={rows[1][index]["filterdropdown"]}
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
/>
);
//日期范围
case "daterange":
return (
<FilterType
locale={locale}
rendertype={type}
className={`filter-date`}
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"]}
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
/>
);
default:
@ -506,18 +551,19 @@ class TableHeader extends Component {
thClassName += `${fixedStyle}`;
if(!da.fixed){
thLineObj = {
//----------------
onMouseMove:(e)=>{ e.stopPropagation();this.onMouseMove(e, da)},
onMouseOut:(e)=>{this.onMouseOut(e, da)},
onMouseDown:(e)=>{ e.stopPropagation();this.onMouseDown(e, da)},
onMouseUp:(e)=>{this.onMouseUp(e, da)},
onMouseOver:(e)=>{this.onMouseOver(e, da)},
className:`${clsPrefix}-thead-th-drag-gap `,
className:`${clsPrefix}-thead-th-drag-gap th-drag-gap`,
};
}
return (<th key={Math.random()} {...thAbleObj} {...thBorObj} className={thClassName} >
{da.children}
{
da.fixed ? "":<div ref={el => (this.gap = el)} {...thLineObj} />
da.fixed ? "":<div ref={el => (this.gap = el)} {...thLineObj} ><div id='th-online' className='online' /></div>
}
</th>)
}else{

18
src/i18n.js
View File

@ -7,6 +7,12 @@ module.exports = {
'unequal':'不等于',
'begin':'以开始',
'end':'以结尾',
'greater_than':'大于',
'great_than_equal_to':'大于等于',
'less_than':'小于',
'less_than_equal_to':'小于等于',
'be_equal_to':'等于',
'not_equal_to':'不等于',
'en-us': {
'resetSettings': 'reset settings',
'include': 'include',
@ -15,6 +21,12 @@ module.exports = {
'unequal':'unequal',
'begin':'begin',
'end':'end',
'greater_than':'greater than',
'great_than_equal_to':'great than equal to',
'less_than':'less than',
'less_than_equal_to':'less than equal to',
'be_equal_to':'be equal to',
'not_equal_to':'not equal to',
},
'zh-tw': {
'resetSettings': '還原設置',
@ -24,5 +36,11 @@ module.exports = {
'unequal':'不等於',
'begin':'以開始',
'end':'以結尾',
'greater_than':'大於',
'great_than_equal_to':'大於等於',
'less_than':'小於',
'less_than_equal to':'小於等於',
'be_equal_to':'等於',
'not_equal_to':'不等於'
}
}