diff --git a/src/ExpandIcon.js b/src/ExpandIcon.js index 1ea0b0a..7f19427 100644 --- a/src/ExpandIcon.js +++ b/src/ExpandIcon.js @@ -18,6 +18,12 @@ class ExpandIcon extends Component{ shouldComponentUpdate(nextProps) { return !shallowequal(nextProps, this.props); } + + onExpand = (status, record, e) => { + const { onExpand } = this.props; + e.stopPropagation(); + onExpand(status, record, e); + }; render() { const { expandable, clsPrefix, onExpand, needIndentSpaced, expanded, record, isHiddenExpandIcon,expandedIcon,collapsedIcon } = this.props; if (expandable && !isHiddenExpandIcon) { @@ -30,7 +36,7 @@ class ExpandIcon extends Component{ }else if(!expanded && collapsedIcon){ currentIcon = collapsedIcon; } - return ( onExpand(!expanded, record, e)} className='expand-icon-con'>{currentIcon}); + return ( this.onExpand(!expanded, record, e)} className='expand-icon-con'>{currentIcon}); } else if (needIndentSpaced || isHiddenExpandIcon) { return ; } diff --git a/src/TableCell.js b/src/TableCell.js index ece74ba..a0fae66 100644 --- a/src/TableCell.js +++ b/src/TableCell.js @@ -90,7 +90,7 @@ class TableCell extends Component{ renderNumber = (data, config={}, width=200) => { const { precision, thousand, makeUp, preSymbol, nextSymbol } = config; let number = formatMoney(data, precision, thousand); - if(makeUp === false && number !== '0' && number.indexOf('.') !== -1) { + if(makeUp === false && number.indexOf('.') !== -1) { number = number.replace(/0*$/,'').replace(/\.$/,''); } let numberWidth = parseInt(width) - 16; // 减去默认的左右padding共计16px diff --git a/src/TableRow.js b/src/TableRow.js index 64957ab..a6bcc18 100644 --- a/src/TableRow.js +++ b/src/TableRow.js @@ -517,7 +517,9 @@ class TableRow extends Component{ if (!visible) { style.display = 'none'; } - + if(record._checked){ + className += ' selected'; + } return ( {} + getSelectedDataFunc:()=>{}, + autoSelect: false } constructor(props) { @@ -40,7 +41,7 @@ export default function multiSelect(Table, Checkbox) { */ getCheckedOrIndeter(data){ let obj = {}; - let checkStatus = this.setChecked(data); + let checkStatus = this.checkAllSelected(data); if(!checkStatus){ obj.checkedAll = false; obj.indeterminate = false; @@ -59,7 +60,7 @@ export default function multiSelect(Table, Checkbox) { /** * 判断数据是否全部选中 * @param {*} data - * reutnr string all(全选)、indeter(半选) + * return string all(全选)、indeter(半选) */ setChecked(data){ if(!this.isArray(data))return false; @@ -81,6 +82,36 @@ export default function multiSelect(Table, Checkbox) { return count == 0?false:"indeter"; } + /** + * 重写:判断数据是否全部选中 + */ + checkAllSelected = ( data ) => { + if(!this.isArray(data))return false; + if(data.length == 0)return false; + let count = 0; + let disabledCount = 0; + let length = 0; + let getTree = ( arr ) => { + arr.forEach( item => { + length++; + if(item._checked && !item._disabled){ + count ++; + } + else if(item._disabled){ + disabledCount ++; + } + if(item.children){ + getTree(item.children); + } + }) + } + getTree(data); + if(length == count + disabledCount && count>0){ + return "all"; + } + return count == 0?false:"indeter"; + } + /** * 判断是否是数组 * @param {*} o @@ -106,12 +137,18 @@ export default function multiSelect(Table, Checkbox) { let selectList = []; data.forEach(item => { - if(!item._disabled){ - item._checked = check; + if( item.children ){ + let res = this.setTree(item,check, true); + selectList = selectList.concat(res); } - - if(item._checked){ - selectList.push(item); + else { + if(!item._disabled){ + item._checked = check; + } + + if(item._checked){ + selectList.push(item); + } } }); if(selectList.length > 0){ @@ -126,6 +163,47 @@ export default function multiSelect(Table, Checkbox) { this.props.getSelectedDataFunc(selectList); } + /** + * 遍历树节点和它的子孙节点,设置_checked + */ + setTree = ( node, flag, autoSelect) => { + let res = []; + let setTreeNodeFlag = ( node, flag) => { + if(!node._disabled){ + node._checked = flag; + } + if(flag){ + res.push(node); + } + if(node.children && autoSelect){ + node.children.forEach( item => { + setTreeNodeFlag(item, flag); + }) + } + } + setTreeNodeFlag(node, flag); + return res; + } + + /** + * 遍历树节点和它的子孙节点,获取对应状态的节点数组 + */ + getTree = ( node, key, value ) => { + let res = []; + let getTreeNodeByFlag = ( node) => { + if(node[key] === value){ + res.push(node); + } + if(node.children){ + node.children.forEach( item => { + getTreeNodeByFlag(item); + }) + } + } + getTreeNodeByFlag(node); + return res; + } + handleClick=()=>{ } @@ -133,14 +211,24 @@ export default function multiSelect(Table, Checkbox) { onCheckboxChange = (text, record, index) => () => { let {data} = this.state; let selectList = []; - record._checked = record._checked?false:true; + // record._checked = record._checked?false:true; + let flag = record._checked ? false : true; + if (record.children) { + this.setTree(record, flag, this.props.autoSelect); + } + else { + record._checked = flag; + } let obj = this.getCheckedOrIndeter(data); this.setState({ data:data, ...obj }) data.forEach((da)=>{ - if(da._checked){ + if(da.children){ + selectList = selectList.concat(this.getTree(da,'_checked',true)) + } + else if(da._checked){ selectList.push(da); } }) @@ -202,9 +290,14 @@ export default function multiSelect(Table, Checkbox) { } render() { - const {columns} = this.props; + const {columns, expandIconColumnIndex} = this.props; const {data} = this.state; - return + return
} }; }