修复在使用selectDisabled参数,点击全选按钮时获取数据不正确bug

This commit is contained in:
huyueb 2017-12-27 22:21:52 +08:00
parent d2d6d09d1e
commit 247d0b862c
4 changed files with 27 additions and 21 deletions

View File

@ -59,7 +59,7 @@ class Demo extends Component {
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- | | :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- |
| data | 传入的表格数据 | array | [] | | data | 传入的表格数据key值必需否则会导致部分功能出现问题。建议使用唯一的值如id | array | [] |
| bordered | 是否展示外边框和列边框 | boolean | false | | bordered | 是否展示外边框和列边框 | boolean | false |
| columns | 列的配置表,具体配置见下表 | array | - | | columns | 列的配置表,具体配置见下表 | array | - |
| defaultExpandAllRows | 默认是否展开所有行 | bool | false | | defaultExpandAllRows | 默认是否展开所有行 | bool | false |
@ -90,7 +90,8 @@ class Demo extends Component {
| expandRowByClick | 设置展开行是否通过点击行触发,此参数需要与上面参数搭配使用(默认是通过点击行前面的加号展开行 | bool | false | | expandRowByClick | 设置展开行是否通过点击行触发,此参数需要与上面参数搭配使用(默认是通过点击行前面的加号展开行 | bool | false |
| footerScroll | 表尾和body是否公用同一个横向滚动条。 如果footer中也是一个table组件并且也具有滚动条那么也需要加入footerScroll参数。 | bool | false | | footerScroll | 表尾和body是否公用同一个横向滚动条。 如果footer中也是一个table组件并且也具有滚动条那么也需要加入footerScroll参数。 | bool | false |
*注意: 一旦使用了expandedRowRender参数data参数中的key属性必须设置。否则会导致无法展开* *注意: data参数中的key值必需否则会导致部分功能出现问题建议使用唯一的值如id*
### Column ### Column

View File

@ -25,15 +25,6 @@ const columns13 = [
key: "b", key: "b",
width: 200 width: 200
}, },
{
title: "年龄",
dataIndex: "c",
key: "c",
width: 200,
sumCol: true,
sorter: (a, b) => a.c - b.c
},
{ {
title: "年龄", title: "年龄",
dataIndex: "c", dataIndex: "c",
@ -63,6 +54,7 @@ class Demo13 extends Component {
console.log(data); console.log(data);
}; };
selectDisabled = (record, index) => { selectDisabled = (record, index) => {
console.log(record);
if (index === 1) { if (index === 1) {
return true; return true;
} }

View File

@ -17,7 +17,7 @@ import 'bee-table/build/Table.css';
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- | | :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- |
| data | 传入的表格数据 | array | [] | | data | 传入的表格数据key值必需否则会导致部分功能出现问题。建议使用唯一的值如id | array | [] |
| bordered | 是否展示外边框和列边框 | boolean | false | | bordered | 是否展示外边框和列边框 | boolean | false |
| columns | 列的配置表,具体配置见下表 | array | - | | columns | 列的配置表,具体配置见下表 | array | - |
| defaultExpandAllRows | 默认是否展开所有行 | bool | false | | defaultExpandAllRows | 默认是否展开所有行 | bool | false |
@ -48,7 +48,8 @@ import 'bee-table/build/Table.css';
| expandRowByClick | 设置展开行是否通过点击行触发,此参数需要与上面参数搭配使用(默认是通过点击行前面的加号展开行 | bool | false | | expandRowByClick | 设置展开行是否通过点击行触发,此参数需要与上面参数搭配使用(默认是通过点击行前面的加号展开行 | bool | false |
| footerScroll | 表尾和body是否公用同一个横向滚动条。 如果footer中也是一个table组件并且也具有滚动条那么也需要加入footerScroll参数。 | bool | false | | footerScroll | 表尾和body是否公用同一个横向滚动条。 如果footer中也是一个table组件并且也具有滚动条那么也需要加入footerScroll参数。 | bool | false |
*注意: 一旦使用了expandedRowRender参数data参数中的key属性必须设置。否则会导致无法展开* *注意: data参数中的key值必需否则会导致部分功能出现问题建议使用唯一的值如id*
### Column ### Column

View File

@ -24,9 +24,17 @@ export default function multiSelect(Table) {
return class BookLoader extends Component { return class BookLoader extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
let { selectDisabled, data } = props,
checkedObj = {};
for (var i = 0; i < data.length; i++) {
let bool = selectDisabled(data[i], i);
if (!bool) {
checkedObj[data[i]["key"]] = false;
}
}
this.state = { this.state = {
checkedAll: false, checkedAll: false,
checkedObj: {}, checkedObj: checkedObj,
selIds: [], selIds: [],
data: this.props.data data: this.props.data
}; };
@ -35,12 +43,9 @@ export default function multiSelect(Table) {
let self = this; let self = this;
let listData = self.state.data.concat(); let listData = self.state.data.concat();
let checkedObj = Object.assign({}, self.state.checkedObj); let checkedObj = Object.assign({}, self.state.checkedObj);
let data = self.props.data; let { data } = self.props;
let selIds = []; let selIds = [];
let id = self.props.multiSelect.param; let id = self.props.multiSelect.param;
for (var i = 0; i < data.length; i++) {
checkedObj[data[i]["key"]] = !self.state.checkedAll;
}
if (self.state.checkedAll) { if (self.state.checkedAll) {
selIds = []; selIds = [];
} else { } else {
@ -52,6 +57,14 @@ export default function multiSelect(Table) {
} }
} }
} }
for (var i = 0; i < data.length; i++) {
let bool = checkedObj.hasOwnProperty(data[i]["key"]);
if (!bool) {
selIds.splice(i, 1);
} else {
checkedObj[data[i]["key"]] = !self.state.checkedAll;
}
}
self.setState({ self.setState({
checkedAll: !self.state.checkedAll, checkedAll: !self.state.checkedAll,
checkedObj: checkedObj, checkedObj: checkedObj,
@ -96,7 +109,6 @@ export default function multiSelect(Table) {
}; };
renderColumnsMultiSelect(columns) { renderColumnsMultiSelect(columns) {
const { data } = this.state; const { data } = this.state;
let {selectDisabled} = this.props;
let checkedObj = Object.assign({}, this.state.checkedObj); let checkedObj = Object.assign({}, this.state.checkedObj);
let checkedArray = Object.keys(checkedObj); let checkedArray = Object.keys(checkedObj);
let { multiSelect } = this.props; let { multiSelect } = this.props;
@ -127,12 +139,12 @@ export default function multiSelect(Table) {
dataIndex: "checkbox", dataIndex: "checkbox",
width: "100px", width: "100px",
render: (text, record, index) => { render: (text, record, index) => {
let bool = selectDisabled(record, index); let bool = checkedObj.hasOwnProperty(record["key"]);
return ( return (
<Checkbox <Checkbox
className="table-checkbox" className="table-checkbox"
checked={checkedObj[record.key]} checked={checkedObj[record.key]}
disabled={bool} disabled={!bool}
onChange={this.onCheckboxChange.bind( onChange={this.onCheckboxChange.bind(
this, this,
text, text,