数据操作分析：
在查询表组件的 TableData.js 中操作如下内容：
给每一行绑定一个checkbox，且在点击这个 checkbox 时，触发 action 中的一个方法(formatPostCollectionList)，这个方法是用来更新选中的实体数组。formatPostCollectionList为action中的方法，需要export
定义每一行的实体为一个数组，用变量 postCollections 表示
如果选中当前行，则更新实体数组中的数据；如果取消当前行，则删除实体中的数据；
参数为 row ；
点击删除按钮后，使用 componentDitUpdate() 生命周期方法，在组件更新后调用。
如果删除成功，则执行 action 中的方法 clearPostCollection()。这个方法是用来清空当前行实体中的数据；
如果删除成功，最后执行 查询表的刷新重新加载数据的方法
更新实体数据与清空实体数据的方法，在 action 中执行。
代码分析：
表查询操作
1、调查询接口，Api中的方法
searchPostCollectionByActivityId(activityId, callback) { const queryParam = `/tob/post/search?activeId=${activityId}`; //接口，使用``可以在URL中显示查询参数 Config.get(queryParam, callback); }
2、action中操作查询数据的方法 postCollectionEntityList 存放接口中的所有数据
export function initPostCollection(row){ return (dispatch, getState) => { let activityId = row.activityId; Api.searchPostCollectionByActivityId(activityId, params => { dispatch(initPostCollectionSetter(activityId,params)); }); } } function initPostCollectionSetter(activityId,params){ return { type:INIT_POST_COLLECTION, activityId:activityId, data:{postCollectionEntityList:params} } }
3、TatleData 表组件中调用 action 的方法，至此 表数据 OK
export default class TableData extends Component { constructor(props){ super(props); } componentDidMount() { const param = this.props.queryData; console.log("param === " + param); this.props.initPostCollection(param);//action中获取接口数据的方法 } render(){ // 定义postCollectionEntityList中的数据 let postCollectionEntityList = [ { postCollectionName:'', postCollectionId:'', activityId:'' } ]; //判断，如果postCollectionEntityList中有数据，则把数据显示出来 if (this.props.postCollectionState.postCollectionEntityList) { postCollectionEntityList = this.props.postCollectionState.postCollectionEntityList; console.log("postCollectionEntityList" + postCollectionEntityList); } //acb 表数据 return( <div><TableExit data={postCollectionEntityList} acb={this.props.initPostCollection}> <TableCloumnsExit dataField="activityTitle">活动名称</TableCloumnsExit> <TableCloumnsExit dataField="postCollectionName">帖子集名称</TableCloumnsExit> <TableCloumnsExit dataField="postCollectionId">帖子集编号</TableCloumnsExit> <TableCloumnsExit dataField="active" dataFormat={this.postCollectionFormatter}>修改</TableCloumnsExit> <TableCloumnsExit dataField="send" dataFormat={this.activeFormatter.bind(this)}>发送</TableCloumnsExit> <TableCloumnsExit dataField="send" dataFormat={this.questionBankFormatter.bind(this)}>题库</TableCloumnsExit> </TableExit> </div> ); } }
删除表数据操作
调删除接口，API中的方法
deletePostCollections (activityId ,params, callback) { let path = `/tob/post/deletePostCollection/${activityId}`; //删除接口 Config.deleteWithNoResponse(path ,params, callback); }
action 中写删除数据的方法
删除实体
删除实体前要先 插入 checkbox
checkboxFormatter(cell,row) { return <input bsStyle="primary" type="checkbox"></input> }
查询表中使用 checkbox
<TableCloumnsExit dataField="alter" dataFormat={this.checkboxFormatter.bind(this)}>选择</TableCloumnsExit>
点击 checkbox 会触发 更新选中的实体数据的方法
checkboxFormatter(cell,row) { return <input bsStyle="primary" type="checkbox" onClick={this.props.formatPostCollectionList.bind(this,row)}></input> }
更新选中实体数据的方法，在action中编写
export function formatPostCollectionList(row) { return(dispatch, getState) => { let postCollectionId = row.postCollectionId; //获取每一行的ID let state = getState().postCollectionState; //从postCollectionState（）中拿到state并赋值给全局state let postCollections = state.postCollections; // 红色字体标注为实体中的数据容器 let postCollectionItem = { postCollectionId:postCollectionId //实体中的数据ID }; if (postCollections) { //postCollections 实体数据，可能 有数据 let index = -1; // index = -1 指默认实体中没有数据 for (let i = 0 ;i < postCollections.length ;i++) { //如果实体中有数据，则循环 let postCollection = postCollections[i]; //拿实体中的数据，给变量postCollection let id = postCollection.postCollectionId; //从拿到的实体数据中，取每一个ID，方法对比（选中的数据与实体中的数据对比） if (postCollectionId == id) { //如果实体中的ID == 选中的ID index = i; //把实体中选中的的数据 赋值为 i } } if (index > -1) { //如果实体的数据存在，不为空 postCollections.splice(index,1); //删除实体对象中index位置中的一个数据 } else { postCollections.push(postCollectionItem); //如果实体数据为空，则push实体中的ID数据 } } else { postCollections = []; // 第一次render时，实体数据可能为空 / 为undefined，那么将它定义为一个数组 postCollections.push(postCollectionItem); //给这个空数组push数据 } dispatch(formatPostCollectionListSetter(postCollections)); } } function formatPostCollectionListSetter(params){ return { type:SET_POST_COLLECTIONS, data:{postCollections:params} //红色变量为实体数据 } }
选中实体数据后，点击删除按钮，会触发deletePostCollections 删除方法