forgetest5
/
bee-table7
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

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

BREAKING CHANGE: 固定列、checkbox、过滤列 综合使用
This commit is contained in:
jonyshi 2018-06-25 00:44:05 +08:00
parent 6714dbce76
commit e0ea147d5f
10 changed files with 761 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
build/Table.css
View File

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

37
build/TableHeader.js
View File

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

49
build/lib/filterColumn.js
View File

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

146
build/lib/newMultiSelect.js Normal file
View File

@ -0,0 +1,146 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
exports["default"] = newMultiSelect;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _beeCheckbox = require('bee-checkbox');
var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
var _utils = require('../utils');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
/**
* 参数: 过滤表头
* @param {*} Table
* @param {*} Checkbox
* @param {*} Popover
* @param {*} Icon
*/
function newMultiSelect(Table, Checkbox) {
var _class, _temp;
return _temp = _class = function (_Component) {
_inherits(NewMultiSelect, _Component);
function NewMultiSelect(props) {
_classCallCheck(this, NewMultiSelect);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.onAllCheckChange = function () {
var _this$state = _this.state,
data = _this$state.data,
checkedAll = _this$state.checkedAll;
var check = checkedAll ? false : true;
data.forEach(function (item) {
item.checked = check;
});
_this.setState({
checkedAll: check
});
};
_this.handleClick = function () {};
_this.onCheckboxChange = function (text, record, index) {
return function () {
var data = _this.state.data;
record.checked = record.checked ? false : true;
var checkedAll = true;
for (var i = 0; i < data.length; i++) {
var item = data[i];
if (!item.checked || item.checked == false) {
checkedAll = false;
break;
}
}
_this.setState(_extends({}, _this.state, {
checkedAll: checkedAll
}));
};
};
_this.getDefaultColumns = function (columns) {
// let checkedAll = init?false:this.state.checkedAll;
var checkedAll = _this.state.checkedAll;
var _defaultColumns = [{
title: _react2["default"].createElement(Checkbox, {
className: 'table-checkbox',
checked: checkedAll
// indeterminate={indeterminate_bool && !this.state.checkedAll}
, onChange: _this.onAllCheckChange
}),
key: "checkbox",
dataIndex: "checkbox",
fixed: "left",
width: 50,
render: function render(text, record, index) {
return _react2["default"].createElement(Checkbox, {
key: index,
className: 'table-checkbox',
checked: record.checked,
onClick: _this.handleClick,
onChange: _this.onCheckboxChange(text, record, index)
});
}
}];
return _defaultColumns.concat(columns);
};
_this.state = {
checkedAll: false,
// columns:this.getDefaultColumns(props.columns,"init"),
data: (0, _utils.ObjectAssign)(props.data)
};
return _this;
}
NewMultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
// if(this.props.columns != nextProps.columns){
// this.setState({
// columns:this.getDefaultColumns(nextProps.columns)
// })
// }
if (this.props.data != nextProps.data) {
this.setState({
data: (0, _utils.ObjectAssign)(nextProps.data)
});
}
};
NewMultiSelect.prototype.render = function render() {
var columns = this.props.columns;
var data = this.state.data;
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data }));
};
return NewMultiSelect;
}(_react.Component), _class.defaultProps = {
prefixCls: "u-table-mult-select"
}, _temp;
}
module.exports = exports['default'];

24
build/utils.js
View File

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

9
dist/demo.css vendored
View File

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

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

589
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

2
package.json
View File

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