Material UI之Table Checkbox问题

• enableSelectAll : [boolean]，默认true，启用全选, table props

• displaySelectAll: [boolean]，默认true，全选按钮显示，table header props

• multiSelectable: [boolean]，默认false，不启用多选，table props

• displayRowCheckbox: [boolean]，默认true，显示表记录的勾选按钮，table body props

• onRowSelection: [function]，(rows)=>{}。 rows为选中行行号的数组。若[0,5]则表示第1，6条记录checked为true并选中, table props

• selected: [boolean]，设置特定行被选中。结合onRowSelection完成特定行勾选记住。table row props

• deselectOnClickaway!!!巨坑!!！：[boolean] ，默认true，表外点击是否取消已勾选的行选，默认取消

核心代码

    //==========parent component:=================
    onRowSelection(rows){
        console.log('rows:',rows)// rows返回选中行的索引数组，
                                 // 另一个巨坑！！！当全选或取消全选为字符串'all'/'none'
        this.setState({selectRows:rows})
    }

        //==========table component:=================

        return (

                //...
                <TableBody 
                    showRowHover={true} 
                    deselectOnClickaway={false}//!!!important
                    displayRowCheckbox = { this.props.displayRowCheckbox || false } 
                    stripedRows={false}>
                    {
                        this.props.data.map((hd, index)=>{
                            let _selected = 
                            this.props.selectRows && (
                            this.props.selectRows == 'all' ? true :
                                 (
                                     this.props.selectRows != 'none' ? 
                                     this.props.selectRows.findIndex((val,i,arr)=>val ==index)>-1 
                                     : false) || false
                                 );
                                     //！！！通过selected更新当前选中项 ！！！注意'all' 和 'none'的处理
                            return 
                                <TableRow
                                     key={'tableBody' + index}
                                     selected={_selected}>
                                        {
                                        this.props.body.map((col, id)=>{
                                            let data = hd[col.column];
                                            return <TableRowColumn 
                                                        style={this.props.header[id].style} 
                                                        key={'tableRowColumn' + id} 
                                                        title={col.hideTitle ? '' : data}>{data}
                                                    </TableRowColumn>
                                        })
                                    }
                            </TableRow>;
                        })
                    }

                </TableBody>

记录坑，让更少的人踩同样的坑