添加禁用的逻辑流程图
代码
/*
* @Author: wangxinyue
* @Date: 2018-12-28 18:13:04
* @Last Modified by: wangxinyue
* @Last Modified time: 2018-12-29 11:14:28
* groupList 全选的数组集合
* checkboxKey 对象型数组时使用（唯一标识）
* changeCheck 多选框的回调函数返回数据（isSelectAll是否全选，checked 是否选中, checkedArr选中数组, changeArr变化数组, checkedList选中集合数组, changeList变化集合数组）
* checkboxGroupChild 子元素node
* defaultCheckedArr 默认选中的数组
* selectAllClass 全选样式
* selectAllNode 全选node
* disabledOption 禁用函数
*/
import React, { Component } from 'react'
import { Checkbox } from 'antd';
import PropTypes from 'prop-types'
const CheckboxGroup = Checkbox.Group;
class WXYCheckboxGroup extends Component {
static propTypes = {
groupList: PropTypes.array.isRequired,//全选集合
checkboxGroupChild: PropTypes.node.isRequired,//多选框子元素
changeCheck: PropTypes.func,//获取数据变化信息
checkboxKey: PropTypes.string,//多选框的唯一标识
defaultCheckedArr: PropTypes.array,//默认选中的数组
}
state = {
checkedArr: [],//当前选中的多选框数组
indeterminate: true,//全选框状态
checkAll: false,//是否全选
lastcheckedArr: [],//上一次选中的多选框数组
allCheckedAll: [],//全选数组
disableAndCheckedArr: []
};
componentDidMount = () => {
const { defaultCheckedArr = [], checkboxKey, groupList, disabledOption } = this.props
let allCheckedAll = []
if (disabledOption) {
//过滤掉禁用未选中的数据
allCheckedAll = groupList.filter(one => !disabledOption(one) || defaultCheckedArr.includes(one[checkboxKey]))
}
allCheckedAll = checkboxKey ? allCheckedAll.map(one => one[checkboxKey]) : allCheckedAll
this.setState({
checkedArr: defaultCheckedArr,
lastcheckedArr: defaultCheckedArr,
allCheckedAll: allCheckedAll,
disableAndCheckedArr: this.getDisableAndChecked()
})
}
//获取禁用且选中的数据
getDisableAndChecked = () => {
const { defaultCheckedArr = [], checkboxKey, groupList, disabledOption } = this.props
let disableAndChecked = groupList.filter(one => disabledOption(one) && defaultCheckedArr.includes(one[checkboxKey]))
//只返回key
return disableAndChecked.map(one => one[checkboxKey])
}
//单选操作
onChange = (checkedArr) => {
const { allCheckedAll } = this.state
this.setState({
checkedArr,
lastcheckedArr: checkedArr,
indeterminate: !!checkedArr.length && (checkedArr.length < allCheckedAll.length),
checkAll: checkedArr.length === allCheckedAll.length,
});
this.getChangeObject(checkedArr, false)
}
//全选操作
onCheckAllChange = (e) => {
const { disabledOption } = this.props
const { allCheckedAll, disableAndCheckedArr } = this.state
let checkedArr = e.target.checked ? allCheckedAll : []
if (disabledOption) {
checkedArr = [...checkedArr, ...disableAndCheckedArr]
}
this.setState({
checkedArr: checkedArr,
lastcheckedArr: checkedArr,
indeterminate: false,
checkAll: e.target.checked,
});
this.getChangeObject(checkedArr, true)
}
//获取并返回变化数据
getChangeObject = (checkedArr, isSelectAll) => {
const { changeCheck } = this.props
const { lastcheckedArr } = this.state
let checked = checkedArr.length > lastcheckedArr.length
let changeArr = this.diff(checkedArr, lastcheckedArr)
changeCheck && changeCheck(isSelectAll, checked, checkedArr, changeArr, this.getListByArr(checkedArr), this.getListByArr(changeArr))
}
//根据字符串数组返回对象型数组
getListByArr = (arr) => {
const { groupList, checkboxKey } = this.props
return groupList && checkboxKey ? groupList.filter(one => arr.includes(one[checkboxKey])) : []
}
//比较两个数组中不同的元素[1,2,3] [1,2] 返回[3]
diff(arr1, arr2) {
var newArr = [];
var arr3 = [];
for (var i = 0; i < arr1.length; i++) {
if (arr2.indexOf(arr1[i]) === -1)
arr3.push(arr1[i]);
}
var arr4 = [];
for (var j = 0; j < arr2.length; j++) {
if (arr1.indexOf(arr2[j]) === -1)
arr4.push(arr2[j]);
}
newArr = arr3.concat(arr4);
return newArr;
}
render() {
const { checkboxGroupChild, selectAllClass, selectAllNode = "全选" } = this.props
return (
<Checkbox
indeterminate={this.state.indeterminate}
onChange={this.onCheckAllChange}
checked={this.state.checkAll}>
{selectAllNode}
Checkbox>
<CheckboxGroup value={this.state.checkedArr} onChange={(checkedValues) => this.onChange(checkedValues, this)}>
{checkboxGroupChild}
CheckboxGroup>
);
}
}
class Test extends Component {
constructor(props) {
super(props);
this.state = {};
}
changeCheck = (checked, checkedArr, changeArr, checkedList, changeList) => {
console.log("checked", checked,
"checkedArr", checkedArr,
"changeArr", changeArr,
"checkedList", checkedList,
"changeList", changeList);
}
disabledOption = (one) => {
return one.disabled
}
render() {
const defaultcheckedArr = ['pite', 'jiake', 'xuzi'];
const plainList = [
{ name: "皮特", key: "pite" },
{ name: "夹克", key: "jiake" },
{ name: "徐子", key: "xuzi", disabled: true },
{ name: "孟获", key: "menghuo" },
{ name: "秋季", key: "qiuji" },
{ name: "子曰", key: "ziyue", disabled: true },
{ name: "雪儿", key: "xueer", disabled: true },
]
return (
<WXYCheckboxGroup
defaultCheckedArr={defaultcheckedArr}
groupList={plainList}
checkboxKey='key'
checkboxGroupChild={plainList.map(one => <Item key={one.key} one={one} />)}
changeCheck={this.changeCheck}
disabledOption={this.disabledOption} />
);
}
}
export default Test;
class Item extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
const { one } = this.props
return (
<Checkbox value={one.key} disabled={one.disabled} />
{one.name}
);
}
}