1. 去重、过滤。
/*
* @interface Grid 1.行更新
* */
handleGridRowsUpdated = ({fromRow, toRow, updated })=> {
console.log('1.handleGridRowsUpdated',arguments)
let rows = this.state.rows;
for (let i = fromRow; i <= toRow; i++) {
let rowToUpdate = rows[i];
let updatedRow = React.addons.update(rowToUpdate, {$merge: updated});
rows[i] = updatedRow;
}
this.setState({ rows });
};
/*
* @interface 2.选中行接口
* @param {Array} 选中的行
* */
onRowsSelected = (rows ) =>{ /*新增选择的行*/
//进行复选。
this.setState( {
selectedIds: this.state.selectedIds.concat( rows.map(r => r.row[this.props.rowKey])),
});
this.setState({
selectedRows: this.state.selectedRows.concat( rows.map(r => r.row)),
});
//进行单选
/* this.setState({
selectedIds: rows.map(r => r.row[this.props.rowKey]),
});
this.setState({
selectedRows: rows.map(r => r.row),
});*/
};
/*
* @interface 3.取消选中行接口
* @param {Array} 取消选中的行
* */
onRowsDeselected = (rows /*取消选择的行*/) =>{
let rowIds = rows.map(r => r.row[this.props.rowKey]);
this.setState({
selectedIds: this.state.selectedIds.filter(i => rowIds.indexOf(i) === -1 ), //
});
this.setState({
selectedRows: this.state.selectedRows.filter(r => rowIds.indexOf(r[this.props.rowKey]) === -1 )
});
};
/**
* @interface 4.行选中接口
* */
onRowClick = (rowIdx, clickedRow)=>{
//console.log('选中行', rowIdx,'_行数据 ', clickedRow);
// case1. 如果是全选操作,跳过会自动调用onRowsSelected方法,如果是单选操作请隐藏全选checkbox视图操作
if(rowIdx === -1){
return;
}
// case2. 不是全选操作
const hasSelected = this.state.selectedRows.some((item)=>{
return item[this.props.rowKey] === clickedRow[this.props.rowKey]
});
if(hasSelected){
let rowIds = clickedRow[this.props.rowKey];
//console.log('选中rowIds', rowIds );
this.setState({
selectedIds: this.state.selectedIds.filter(i => rowIds.toString().indexOf(i) === -1 )
});
this.setState({
selectedRows: this.state.selectedRows.filter(r => rowIds.toString().indexOf(r[this.props.rowKey]) === -1 )
});
}else{
// case2-case1. 采用赋值,如果是只能选中一行采用赋值,如果是合并选中行,采用concat方法来合并操作
this.setState({selectedIds: [clickedRow[this.props.rowKey]]});
this.setState({selectedRows: [clickedRow]});
}
};
2. 遍历数组。
{ title: '类型', dataIndex: 'type', key: 'type', width: 80, sortable: false, render: (value, record, i)=>{ //类型模块 let _arr =[], text=''; _arr = searchTextByValues('doctor_advice_type');//模块名称---匹配字典表。 if(_arr.length > 0) { _arr.map((item)=> { if (value === item.value) { text = item.text; return } }) } return ( <span>{text}</span> ) } },
<===================== ViewLabProjectModal ==========================================>
/** 2.2 字典表的模块类型 **/ matchDictionaryList = (type, value)=>{ let moduleType = searchTextByValues(type); return ( moduleType instanceof Array ? moduleType.map((item)=>{ if(item.value === value) { //匹配 return item.text; } }) : '' ) }
使用:
<td><div className={`${inlineTrCls}`}>{ this.matchDictionaryList('project_detail_type', k.type)}</div></td> <td><div className={`${inlineTrCls}`}>{k.ageMin}- {k.ageMax}</div> </td> <td><div className={`${inlineTrCls}`}>{ this.matchDictionaryList('sex', k.sex)}</div></td> <td><div className={`${inlineTrCls}`}>{k.minValue}-{k.maxValue}</div></td>