From 327511dda68e630a2fbc36bd9bc92b1a8f67f138 Mon Sep 17 00:00:00 2001 From: huayj Date: Tue, 27 Aug 2019 16:45:52 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BA=A7=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/ExpandIcon.js | 15 ++++- build/TableCell.js | 2 +- build/TableRow.js | 4 +- build/lib/multiSelect.js | 123 ++++++++++++++++++++++++++++++++++----- 4 files changed, 126 insertions(+), 18 deletions(-) diff --git a/build/ExpandIcon.js b/build/ExpandIcon.js index f0097ec..dbf6a59 100644 --- a/build/ExpandIcon.js +++ b/build/ExpandIcon.js @@ -41,7 +41,16 @@ var ExpandIcon = function (_Component) { function ExpandIcon(props) { _classCallCheck(this, ExpandIcon); - return _possibleConstructorReturn(this, _Component.call(this, props)); + var _this = _possibleConstructorReturn(this, _Component.call(this, props)); + + _this.onExpand = function (status, record, e) { + var onExpand = _this.props.onExpand; + + e.stopPropagation(); + onExpand(status, record, e); + }; + + return _this; } ExpandIcon.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) { @@ -49,6 +58,8 @@ var ExpandIcon = function (_Component) { }; ExpandIcon.prototype.render = function render() { + var _this2 = this; + var _props = this.props, expandable = _props.expandable, clsPrefix = _props.clsPrefix, @@ -73,7 +84,7 @@ var ExpandIcon = function (_Component) { return _react2["default"].createElement( 'span', { onClick: function onClick(e) { - return onExpand(!expanded, record, e); + return _this2.onExpand(!expanded, record, e); }, className: 'expand-icon-con' }, currentIcon ); diff --git a/build/TableCell.js b/build/TableCell.js index 5a1164f..1c09b04 100644 --- a/build/TableCell.js +++ b/build/TableCell.js @@ -129,7 +129,7 @@ var TableCell = function (_Component) { nextSymbol = config.nextSymbol; var number = (0, _utils.formatMoney)(data, precision, thousand); - if (makeUp === false && number !== '0' && number.indexOf('.') !== -1) { + if (makeUp === false && number.indexOf('.') !== -1) { number = number.replace(/0*$/, '').replace(/\.$/, ''); } var numberWidth = parseInt(width) - 16; // 减去默认的左右padding共计16px diff --git a/build/TableRow.js b/build/TableRow.js index 7c016c8..9a25c7e 100644 --- a/build/TableRow.js +++ b/build/TableRow.js @@ -631,7 +631,9 @@ var TableRow = function (_Component) { if (!visible) { style.display = 'none'; } - + if (record._checked) { + className += ' selected'; + } return _react2["default"].createElement( 'tr', { diff --git a/build/lib/multiSelect.js b/build/lib/multiSelect.js index 77f21d8..e404384 100644 --- a/build/lib/multiSelect.js +++ b/build/lib/multiSelect.js @@ -68,7 +68,7 @@ function multiSelect(Table, Checkbox) { MultiSelect.prototype.getCheckedOrIndeter = function getCheckedOrIndeter(data) { var obj = {}; - var checkStatus = this.setChecked(data); + var checkStatus = this.checkAllSelected(data); if (!checkStatus) { obj.checkedAll = false; obj.indeterminate = false; @@ -87,7 +87,7 @@ function multiSelect(Table, Checkbox) { /** * 判断数据是否全部选中 * @param {*} data - * reutnr string all(全选)、indeter(半选) + * return string all(全选)、indeter(半选) */ @@ -112,32 +112,79 @@ function multiSelect(Table, Checkbox) { }; /** - * 判断是否是数组 - * @param {*} o + * 重写：判断数据是否全部选中 */ + /** + * 判断是否是数组 + * @param {*} o + */ MultiSelect.prototype.isArray = function isArray(o) { return Object.prototype.toString.call(o) == '[object Array]'; }; + /** + * 遍历树节点和它的子孙节点，设置_checked + */ + + + /** + * 遍历树节点和它的子孙节点，获取对应状态的节点数组 + */ + + // 实现行点击时触发多选框勾选的需求 MultiSelect.prototype.render = function render() { - var columns = this.props.columns; + var _props = this.props, + columns = _props.columns, + expandIconColumnIndex = _props.expandIconColumnIndex; var data = this.state.data; - return _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data, onRowClick: this.onRowClick })); + return _react2["default"].createElement(Table, _extends({}, this.props, { + columns: this.getDefaultColumns(columns), + data: data, + onRowClick: this.onRowClick, + expandIconColumnIndex: expandIconColumnIndex ? expandIconColumnIndex + 1 : 1 + })); }; return MultiSelect; }(_react.Component), _class.defaultProps = { prefixCls: "u-table-mult-select", - getSelectedDataFunc: function getSelectedDataFunc() {} + getSelectedDataFunc: function getSelectedDataFunc() {}, + autoSelect: false }, _initialiseProps = function _initialiseProps() { var _this2 = this; + this.checkAllSelected = function (data) { + if (!_this2.isArray(data)) return false; + if (data.length == 0) return false; + var count = 0; + var disabledCount = 0; + var length = 0; + var getTree = function getTree(arr) { + arr.forEach(function (item) { + length++; + if (item._checked && !item._disabled) { + count++; + } else if (item._disabled) { + disabledCount++; + } + if (item.children) { + getTree(item.children); + } + }); + }; + getTree(data); + if (length == count + disabledCount && count > 0) { + return "all"; + } + return count == 0 ? false : "indeter"; + }; + this.onAllCheckChange = function () { var _state = _this2.state, data = _state.data, @@ -158,12 +205,17 @@ function multiSelect(Table, Checkbox) { var selectList = []; data.forEach(function (item) { - if (!item._disabled) { - item._checked = check; - } + if (item.children) { + var res = _this2.setTree(item, check, true); + selectList = selectList.concat(res); + } else { + if (!item._disabled) { + item._checked = check; + } - if (item._checked) { - selectList.push(item); + if (item._checked) { + selectList.push(item); + } } }); if (selectList.length > 0) { @@ -178,6 +230,41 @@ function multiSelect(Table, Checkbox) { _this2.props.getSelectedDataFunc(selectList); }; + this.setTree = function (node, flag, autoSelect) { + var res = []; + var setTreeNodeFlag = function setTreeNodeFlag(node, flag) { + if (!node._disabled) { + node._checked = flag; + } + if (flag) { + res.push(node); + } + if (node.children && autoSelect) { + node.children.forEach(function (item) { + setTreeNodeFlag(item, flag); + }); + } + }; + setTreeNodeFlag(node, flag); + return res; + }; + + this.getTree = function (node, key, value) { + var res = []; + var getTreeNodeByFlag = function getTreeNodeByFlag(node) { + if (node[key] === value) { + res.push(node); + } + if (node.children) { + node.children.forEach(function (item) { + getTreeNodeByFlag(item); + }); + } + }; + getTreeNodeByFlag(node); + return res; + }; + this.handleClick = function () {}; this.onCheckboxChange = function (text, record, index) { @@ -185,13 +272,21 @@ function multiSelect(Table, Checkbox) { var data = _this2.state.data; var selectList = []; - record._checked = record._checked ? false : true; + // record._checked = record._checked?false:true; + var flag = record._checked ? false : true; + if (record.children) { + _this2.setTree(record, flag, _this2.props.autoSelect); + } else { + record._checked = flag; + } var obj = _this2.getCheckedOrIndeter(data); _this2.setState(_extends({ data: data }, obj)); data.forEach(function (da) { - if (da._checked) { + if (da.children) { + selectList = selectList.concat(_this2.getTree(da, '_checked', true)); + } else if (da._checked) { selectList.push(da); } });