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

fix(multiSelect.js): 修复全选功能中使用rowKey参数bug

This commit is contained in:
huyueb 2018-01-16 17:18:12 +08:00
parent 0dced88a46
commit 5f30910961
7 changed files with 72 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -68,7 +68,7 @@ class Demo extends Component {
| useFixedHeader | 是否使用固定表头 | bool | false |
| bodyStyle | 添加到tablebody上的style | object | {} |
| style | 添加到table上的style | object | {} |
| rowKey | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record）'的返回值将被用作键。 | string or Function(record):string | 'key' |
| rowKey | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record, index）`的返回值将被用作键。 | string or Function(record, index):string | 'key' |
| rowClassName | 获取行的classname | Function(record, index, indent):string | () => '' |
| expandedRowClassName | 获取展开行的className | Function(recode, index, indent):string | () => '' |
| onExpand | 展开行时的钩子函数 | Function(expanded, record) | () => '' |

36
build/lib/multiSelect.js
View File

@ -122,10 +122,11 @@ function multiSelect(Table) {
dataIndex: "checkbox",
width: "100px",
render: function render(text, record, index) {
var bool = checkedObj.hasOwnProperty(record["key"]);
var rowKey = record["key"] ? record["key"] : _this2.getRowKey(record, i);
var bool = checkedObj.hasOwnProperty(rowKey);
return _react2["default"].createElement(_beeCheckbox2["default"], {
className: "table-checkbox",
checked: checkedObj[record.key],
checked: checkedObj[rowKey],
disabled: !bool,
onChange: _this2.onCheckboxChange.bind(_this2, text, record, index)
});
@ -137,13 +138,23 @@ function multiSelect(Table) {
};
multiSelect.prototype.render = function render() {
var _this3 = this;
var columns = this.renderColumnsMultiSelect(this.props.columns).concat();
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns }));
return _react2["default"].createElement(Table, _extends({ ref: function ref(table_ref) {
_this3.table_ref = table_ref;
} }, this.props, { columns: columns }));
};
return multiSelect;
}(_react.Component), _initialiseProps = function _initialiseProps() {
var _this3 = this;
var _this4 = this;
this.getRowKey = function (record, index) {
var rowKey = _this4.props.rowKey || 'key';
var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
return key;
};
this.initCheckedObj = function (props) {
var checkedObj = {},
@ -153,15 +164,16 @@ function multiSelect(Table) {
for (var i = 0; i < data.length; i++) {
var bool = selectDisabled && selectDisabled(data[i], i) || false;
var rowKey = data[i]["key"] ? data[i]["key"] : _this4.getRowKey(data[i], i);
if (!bool) {
checkedObj[data[i]["key"]] = selectedRow && selectedRow(data[i], i) || false;
checkedObj[rowKey] = selectedRow && selectedRow(data[i], i) || false;
}
}
return checkedObj;
};
this.onAllCheckChange = function () {
var self = _this3;
var self = _this4;
var listData = self.state.data.concat();
var checkedObj = _extends({}, self.state.checkedObj);
var data = self.props.data;
@ -180,11 +192,12 @@ function multiSelect(Table) {
}
}
for (var i = 0; i < data.length; i++) {
var bool = checkedObj.hasOwnProperty(data[i]["key"]);
var rowKey = data[i]["key"] ? data[i]["key"] : _this4.getRowKey(data[i], i);
var bool = checkedObj.hasOwnProperty(rowKey);
if (!bool) {
selIds.splice(i, 1);
} else {
checkedObj[data[i]["key"]] = !self.state.checkedAll;
checkedObj[rowKey] = !self.state.checkedAll;
}
}
self.setState({
@ -196,7 +209,7 @@ function multiSelect(Table) {
};
this.onCheckboxChange = function (text, record, index) {
var self = _this3;
var self = _this4;
var allFlag = false;
var selIds = self.state.selIds;
var id = self.props.multiSelect ? self.props.multiSelect.param ? record[self.props.multiSelect.param] : record : record;
@ -204,12 +217,13 @@ function multiSelect(Table) {
var checkedArray = Object.keys(checkedObj);
var getSelectedDataFunc = self.props.getSelectedDataFunc;
if (checkedObj[record["key"]]) {
var rowKey = record["key"] ? record["key"] : _this4.getRowKey(record, i);
if (checkedObj[rowKey]) {
selIds.remove(id);
} else {
selIds.push(id);
}
checkedObj[record["key"]] = !checkedObj[record["key"]];
checkedObj[rowKey] = !checkedObj[rowKey];
for (var i = 0; i < checkedArray.length; i++) {
if (!checkedObj[checkedArray[i]]) {
allFlag = false;

36
dist/demo.js vendored
View File

@ -10346,10 +10346,11 @@
dataIndex: "checkbox",
width: "100px",
render: function render(text, record, index) {
var bool = checkedObj.hasOwnProperty(record["key"]);
var rowKey = record["key"] ? record["key"] : _this2.getRowKey(record, i);
var bool = checkedObj.hasOwnProperty(rowKey);
return _react2["default"].createElement(_beeCheckbox2["default"], {
className: "table-checkbox",
checked: checkedObj[record.key],
checked: checkedObj[rowKey],
disabled: !bool,
onChange: _this2.onCheckboxChange.bind(_this2, text, record, index)
});
@ -10361,13 +10362,23 @@
};
multiSelect.prototype.render = function render() {
var _this3 = this;
var columns = this.renderColumnsMultiSelect(this.props.columns).concat();
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns }));
return _react2["default"].createElement(Table, _extends({ ref: function ref(table_ref) {
_this3.table_ref = table_ref;
} }, this.props, { columns: columns }));
};
return multiSelect;
}(_react.Component), _initialiseProps = function _initialiseProps() {
var _this3 = this;
var _this4 = this;
this.getRowKey = function (record, index) {
var rowKey = _this4.props.rowKey || 'key';
var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
return key;
};
this.initCheckedObj = function (props) {
var checkedObj = {},
@ -10377,15 +10388,16 @@
for (var i = 0; i < data.length; i++) {
var bool = selectDisabled && selectDisabled(data[i], i) || false;
var rowKey = data[i]["key"] ? data[i]["key"] : _this4.getRowKey(data[i], i);
if (!bool) {
checkedObj[data[i]["key"]] = selectedRow && selectedRow(data[i], i) || false;
checkedObj[rowKey] = selectedRow && selectedRow(data[i], i) || false;
}
}
return checkedObj;
};
this.onAllCheckChange = function () {
var self = _this3;
var self = _this4;
var listData = self.state.data.concat();
var checkedObj = _extends({}, self.state.checkedObj);
var data = self.props.data;
@ -10404,11 +10416,12 @@
}
}
for (var i = 0; i < data.length; i++) {
var bool = checkedObj.hasOwnProperty(data[i]["key"]);
var rowKey = data[i]["key"] ? data[i]["key"] : _this4.getRowKey(data[i], i);
var bool = checkedObj.hasOwnProperty(rowKey);
if (!bool) {
selIds.splice(i, 1);
} else {
checkedObj[data[i]["key"]] = !self.state.checkedAll;
checkedObj[rowKey] = !self.state.checkedAll;
}
}
self.setState({
@ -10420,7 +10433,7 @@
};
this.onCheckboxChange = function (text, record, index) {
var self = _this3;
var self = _this4;
var allFlag = false;
var selIds = self.state.selIds;
var id = self.props.multiSelect ? self.props.multiSelect.param ? record[self.props.multiSelect.param] : record : record;
@ -10428,12 +10441,13 @@
var checkedArray = Object.keys(checkedObj);
var getSelectedDataFunc = self.props.getSelectedDataFunc;
if (checkedObj[record["key"]]) {
var rowKey = record["key"] ? record["key"] : _this4.getRowKey(record, i);
if (checkedObj[rowKey]) {
selIds.remove(id);
} else {
selIds.push(id);
}
checkedObj[record["key"]] = !checkedObj[record["key"]];
checkedObj[rowKey] = !checkedObj[rowKey];
for (var i = 0; i < checkedArray.length; i++) {
if (!checkedObj[checkedArray[i]]) {
allFlag = false;

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/api.md
View File

@ -26,7 +26,7 @@ import 'bee-table/build/Table.css';
| useFixedHeader | 是否使用固定表头 | bool | false |
| bodyStyle | 添加到tablebody上的style | object | {} |
| style | 添加到table上的style | object | {} |
| rowKey | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record）'的返回值将被用作键。 | string or Function(record):string | 'key' |
| rowKey | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record, index）`的返回值将被用作键。 | string or Function(record, index):string | 'key' |
| rowClassName | 获取行的classname | Function(record, index, indent):string | () => '' |
| expandedRowClassName | 获取展开行的className | Function(recode, index, indent):string | () => '' |
| onExpand | 展开行时的钩子函数 | Function(expanded, record) | () => '' |

2
package.json
View File

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

26
src/lib/multiSelect.js
View File

@ -51,13 +51,20 @@ export default function multiSelect(Table) {
});
}
}
getRowKey=(record, index) => {
const rowKey = this.props.rowKey || 'key';
const key = (typeof rowKey === 'function') ?
rowKey(record, index) : record[rowKey];
return key;
}
initCheckedObj = props => {
let checkedObj = {},
{ selectDisabled, selectedRow, data } = props;
for (var i = 0; i < data.length; i++) {
let bool = (selectDisabled && selectDisabled(data[i], i)) || false;
let rowKey = data[i]["key"] ? data[i]["key"] : this.getRowKey(data[i],i);
if (!bool) {
checkedObj[data[i]["key"]] =
checkedObj[rowKey] =
(selectedRow && selectedRow(data[i], i)) || false;
}
}
@ -82,11 +89,12 @@ export default function multiSelect(Table) {
}
}
for (var i = 0; i < data.length; i++) {
let bool = checkedObj.hasOwnProperty(data[i]["key"]);
let rowKey = data[i]["key"] ? data[i]["key"] : this.getRowKey(data[i],i);
let bool = checkedObj.hasOwnProperty(rowKey);
if (!bool) {
selIds.splice(i, 1);
} else {
checkedObj[data[i]["key"]] = !self.state.checkedAll;
checkedObj[rowKey] = !self.state.checkedAll;
}
}
self.setState({
@ -108,12 +116,13 @@ export default function multiSelect(Table) {
let checkedObj = Object.assign({}, self.state.checkedObj);
let checkedArray = Object.keys(checkedObj);
let { getSelectedDataFunc } = self.props;
if (checkedObj[record["key"]]) {
let rowKey = record["key"] ? record["key"] : this.getRowKey(record,i);
if (checkedObj[rowKey]) {
selIds.remove(id);
} else {
selIds.push(id);
}
checkedObj[record["key"]] = !checkedObj[record["key"]];
checkedObj[rowKey] = !checkedObj[rowKey];
for (var i = 0; i < checkedArray.length; i++) {
if (!checkedObj[checkedArray[i]]) {
allFlag = false;
@ -163,11 +172,12 @@ export default function multiSelect(Table) {
dataIndex: "checkbox",
width: "100px",
render: (text, record, index) => {
let bool = checkedObj.hasOwnProperty(record["key"]);
let rowKey = record["key"] ? record["key"] : this.getRowKey(record,i);
let bool = checkedObj.hasOwnProperty(rowKey);
return (
<Checkbox
className="table-checkbox"
checked={checkedObj[record.key]}
checked={checkedObj[rowKey]}
disabled={!bool}
onChange={this.onCheckboxChange.bind(
this,
@ -186,7 +196,7 @@ export default function multiSelect(Table) {
}
render() {
let columns = this.renderColumnsMultiSelect(this.props.columns).concat();
return <Table {...this.props} columns={columns} />;
return <Table ref={(table_ref) => { this.table_ref = table_ref; }} {...this.props} columns={columns} />;
}
};
}