165 lines
4.0 KiB
JavaScript
165 lines
4.0 KiB
JavaScript
/**
|
|
*
|
|
* @title 全选功能
|
|
* @description 点击表格左列按钮即可选中,并且在选中的回调函数中能获取到选中的数据(未使用封装好的全选功能)
|
|
*
|
|
*/
|
|
|
|
|
|
import React, { Component } from 'react';
|
|
import Table from '../../src';
|
|
import Checkbox from "bee-checkbox";
|
|
|
|
const columns12 = [
|
|
{
|
|
title: "名字",
|
|
dataIndex: "a",
|
|
key: "a",
|
|
width: 100
|
|
},
|
|
{
|
|
title: "性别",
|
|
dataIndex: "b",
|
|
key: "b",
|
|
width: 100
|
|
},
|
|
{
|
|
title: "年龄",
|
|
dataIndex: "c",
|
|
key: "c",
|
|
width: 200,
|
|
sorter: (a, b) => a.c - b.c
|
|
},
|
|
{
|
|
title: "武功级别",
|
|
dataIndex: "d",
|
|
key: "d"
|
|
}
|
|
];
|
|
|
|
const data12 = [
|
|
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
|
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
|
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
|
];
|
|
|
|
const defaultProps12 = {
|
|
prefixCls: "bee-table",
|
|
multiSelect: {
|
|
type: "checkbox",
|
|
param: "key"
|
|
}
|
|
};
|
|
class Demo12 extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
checkedAll:false,
|
|
checkedArray: [
|
|
false,
|
|
false,
|
|
false,
|
|
],
|
|
data: data12
|
|
};
|
|
}
|
|
onAllCheckChange = () => {
|
|
let self = this;
|
|
let checkedArray = [];
|
|
let listData = self.state.data.concat();
|
|
let selIds = [];
|
|
// let id = self.props.multiSelect.param;
|
|
for (var i = 0; i < self.state.checkedArray.length; i++) {
|
|
checkedArray[i] = !self.state.checkedAll;
|
|
}
|
|
// if (self.state.checkedAll) {
|
|
// selIds = [];
|
|
// } else {
|
|
// for (var i = 0; i < listData.length; i++) {
|
|
// selIds[i] = listData[i][id];
|
|
// }
|
|
// }
|
|
self.setState({
|
|
checkedAll: !self.state.checkedAll,
|
|
checkedArray: checkedArray,
|
|
// selIds: selIds
|
|
});
|
|
// self.props.onSelIds(selIds);
|
|
};
|
|
onCheckboxChange = (text, record, index) => {
|
|
let self = this;
|
|
let allFlag = false;
|
|
// let selIds = self.state.selIds;
|
|
// let id = self.props.postId;
|
|
let checkedArray = self.state.checkedArray.concat();
|
|
// if (self.state.checkedArray[index]) {
|
|
// selIds.remove(record[id]);
|
|
// } else {
|
|
// selIds.push(record[id]);
|
|
// }
|
|
checkedArray[index] = !self.state.checkedArray[index];
|
|
for (var i = 0; i < self.state.checkedArray.length; i++) {
|
|
if (!checkedArray[i]) {
|
|
allFlag = false;
|
|
break;
|
|
} else {
|
|
allFlag = true;
|
|
}
|
|
}
|
|
self.setState({
|
|
checkedAll: allFlag,
|
|
checkedArray: checkedArray,
|
|
// selIds: selIds
|
|
});
|
|
// self.props.onSelIds(selIds);
|
|
};
|
|
renderColumnsMultiSelect(columns) {
|
|
const { data,checkedArray } = this.state;
|
|
const { multiSelect } = this.props;
|
|
let select_column = {};
|
|
let indeterminate_bool = false;
|
|
// let indeterminate_bool1 = true;
|
|
if (multiSelect && multiSelect.type === "checkbox") {
|
|
let i = checkedArray.length;
|
|
while(i--){
|
|
if(checkedArray[i]){
|
|
indeterminate_bool = true;
|
|
break;
|
|
}
|
|
}
|
|
let defaultColumns = [
|
|
{
|
|
title: (
|
|
<Checkbox
|
|
className="table-checkbox"
|
|
checked={this.state.checkedAll}
|
|
indeterminate={indeterminate_bool&&!this.state.checkedAll}
|
|
onChange={this.onAllCheckChange}
|
|
/>
|
|
),
|
|
key: "checkbox",
|
|
dataIndex: "checkbox",
|
|
width: "5%",
|
|
render: (text, record, index) => {
|
|
return (
|
|
<Checkbox
|
|
className="table-checkbox"
|
|
checked={this.state.checkedArray[index]}
|
|
onChange={this.onCheckboxChange.bind(this, text, record, index)}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
];
|
|
columns = defaultColumns.concat(columns);
|
|
}
|
|
return columns;
|
|
}
|
|
render() {
|
|
let columns = this.renderColumnsMultiSelect(columns12);
|
|
return <Table columns={columns} data={data12} />;
|
|
}
|
|
}
|
|
Demo12.defaultProps = defaultProps12;
|
|
|
|
export default Demo12; |