react.js CMS 删除功能的实现方法

searchPostCollectionByActivityId(activityId, callback) {    const queryParam = `/tob/post/search?activeId=${activityId}`;  //接口，使用``可以在URL中显示查询参数    Config.get(queryParam, callback);  }

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}  }}

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>    );  }}

deletePostCollections (activityId ,params, callback) {    let path = `/tob/post/deletePostCollection/${activityId}`; //删除接口    Config.deleteWithNoResponse(path ,params, callback);  }

checkboxFormatter(cell,row) {    return <input bsStyle="primary" type="checkbox"></input>  }

<TableCloumnsExit dataField="alter" dataFormat={this.checkboxFormatter.bind(this)}>选择</TableCloumnsExit>

checkboxFormatter(cell,row) {    return <input bsStyle="primary" type="checkbox" onClick={this.props.formatPostCollectionList.bind(this,row)}></input>  }

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} //红色变量为实体数据  }}

export const DELETE_POST_COLLECTIONS = 'DELETE_POST_COLLECTIONS';export function deletePostCollections(){  //点击删除按钮后，触发deletePostCollections删除方法  return(dispatch, getState) => {    let state = getState().postCollectionState;    let activityId = state.activityId;    let postCollections = state.postCollections; //实体对象从state中获取    Api.deletePostCollections(activityId ,postCollections, params => {  //调删除接口的方法      dispatch(deletePostCollectionsSetter(params));    });  }}function deletePostCollectionsSetter(params){  alertPre("",params);  return {    type:DELETE_POST_COLLECTIONS,    data:{deletePostCollectionsResponse:params} //deletePostCollectionsResponse 选中的要删除的数据容器  }}

render(){    let dis = true; //删除按钮状态，默认为禁用状态，返回为true    let postCollections = this.props.postCollectionState.postCollections; //获取实体中的数据    if (typeof(postCollections) == 'undefined' || postCollections.length == 0) {  //如果实体中的数据为 undefined 或者 为空      dis = true; //如果实体中没有数据，则按钮状态为禁用状态    } else {      dis = false; //如果实体中有数据，选中后的状态为可点击状态    }    const buttonsInstanceDel = (      <ButtonToolbar className="mb10">        <Button bsStyle="danger" disabled={dis} onClick={this.props.deletePostCollections}>删除贴子集</Button> //红色字体标为 删除数据的方法      </ButtonToolbar>    );    return(      <div>        {buttonsInstanceDel}      </div>    )  }

componentDidUpdate () {    let deletePostCollectionsResponse = this.props.postCollectionState.deletePostCollectionsResponse; //deletePostCollectionsResponse 删除的数据    if (typeof(deletePostCollectionsResponse) != 'undefined') { //如果这个数据类型不是 undefined      let status = deletePostCollectionsResponse.status;   //获取到这个删除的数据状态      if (200 == status) {                  //如果为200，删除成功        this.props.clearPostCollection();          //加载清空实体数据的方法 clearPostCollection，就是从实体数据中删除被删除的数据        let param = {          activityId:this.props.postCollectionState.activityId          }        this.props.initPostCollection(param);       //根据ID重新加载剩余的数据      }    }  }

export const CLEAR_POST_COLLECTION = 'CLEAR_POST_COLLECTION';export function clearPostCollection(){  return {    type: CLEAR_POST_COLLECTION,    data:{  //实体中的数据名称      addPostCollectionResponse:{},      postCollections:[],      deletePostCollectionsResponse:{},      postCollectionName:'',      postNumber:'0',      postFieldList:[]    }  }}

//查询searchPostCollectionByActivityId(activityId, callback) {    const queryParam = `/tob/post/search?activeId=${activityId}`;    Config.get(queryParam, callback);  }//删除deletePostCollections (activityId ,params, callback) {    let path = `/tob/post/deletePostCollection/${activityId}`;    Config.deleteWithNoResponse(path ,params, callback);  }

//查询表数据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}  }}//更新选中实体数据export function formatPostCollectionList(row) {  return(dispatch, getState) => {    let postCollectionId = row.postCollectionId;    let state = getState().postCollectionState;    let postCollections = state.postCollections;    let postCollectionItem = {      postCollectionId:postCollectionId    };    if (postCollections) {      let index = -1;      for (let i = 0 ;i < postCollections.length ;i++) {        let postCollection = postCollections[i];        let id = postCollection.postCollectionId;        if (postCollectionId == id) {          index = i;        }      }      if (index > -1) {        postCollections.splice(index,1);      } else {        postCollections.push(postCollectionItem);      }    } else {      postCollections = [];      postCollections.push(postCollectionItem);    }    dispatch(formatPostCollectionListSetter(postCollections));  }}function formatPostCollectionListSetter(params){  return {    type:SET_POST_COLLECTIONS,    data:{postCollections:params}  }}//删除方法export const DELETE_POST_COLLECTIONS = 'DELETE_POST_COLLECTIONS';export function deletePostCollections(){  return(dispatch, getState) => {    let state = getState().postCollectionState;    let activityId = state.activityId;    let postCollections = state.postCollections;    Api.deletePostCollections(activityId ,postCollections, params => {      dispatch(deletePostCollectionsSetter(params));    });  }}function deletePostCollectionsSetter(params){  alertPre("",params);  return {    type:DELETE_POST_COLLECTIONS,    data:{deletePostCollectionsResponse:params}  }}//清空实体数据export const CLEAR_POST_COLLECTION = 'CLEAR_POST_COLLECTION';export function clearPostCollection(){  return {    type: CLEAR_POST_COLLECTION,    data:{      addPostCollectionResponse:{},      postCollections:[],      deletePostCollectionsResponse:{},      postCollectionName:'',      postNumber:'0',      postFieldList:[]    }  }}

//删除按钮组件import React,{Component} from 'react';import {render} from 'react-dom';import ReactBootstrap , {ButtonToolbar,Button,Pagination} from 'react-bootstrap';export default class BtnDelData extends Component {  constructor(props){    super(props);  }  render(){    let dis = true;    let postCollections = this.props.postCollectionState.postCollections;    if (typeof(postCollections) == 'undefined' || postCollections.length == 0) {      dis = true;    } else {      dis = false;    }    const buttonsInstanceDel = (      <ButtonToolbar className="mb10">        <Button bsStyle="danger" disabled={dis} onClick={this.props.deletePostCollections}>删除贴子集</Button>      </ButtonToolbar>    );    return(      <div>        {buttonsInstanceDel}      </div>    )  }}//表组件import React, {Component} from 'react';import {render} from 'react-dom';import ReactBootstrap , {ButtonToolbar,Button,Pagination,Grid,Row,Col} from 'react-bootstrap';import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router';const ACTIVE = { color: 'red' };import {sessionSetItem,sessionGetItem} from 'storage';import BtnAddData from './BtnAddData.js';import BtnDelData from './BtnDelData.js';//引用公共组件import TableExit from 'public_component/table/TableExit.js';import TableCloumnsExit from 'public_component/table/TableCloumnsExit.js';//跳转路径import {invitation_main_path,post_collection_main_path,activity_main_path,question_bank_main_path} from '/build/config.js';export default class TableData extends Component {  constructor(props){    super(props);  }  componentDidMount() {    const param = this.props.queryData;    console.log("param === " + param);    this.props.initPostCollection(param);  }  componentDidUpdate () {    let deletePostCollectionsResponse = this.props.postCollectionState.deletePostCollectionsResponse;    if (typeof(deletePostCollectionsResponse) != 'undefined') {      let status = deletePostCollectionsResponse.status;      if (200 == status) {        this.props.clearPostCollection();        let param = {          activityId:this.props.postCollectionState.activityId        }        this.props.initPostCollection(param);      }    }  }  //修改  activeFormatter(cell,row) {    return <Button bsStyle="primary" onClick={this.props.sendPostCollection.bind(null,row)}>推送</Button>  }  checkboxFormatter(cell,row) {    return <input bsStyle="primary" type="checkbox" onClick={this.props.formatPostCollectionList.bind(this,row)}></input>  }  //修改  postCollectionFormatter(cell,row) {    return <Link to={{ pathname:post_collection_main_path, query: row}} activeStyle={ACTIVE}>修改</Link>  }  questionBankFormatter(cell,row) {    return <Link to={{ pathname: question_bank_main_path, query: row}} activeStyle={ACTIVE} >查看题库</Link>  }  render(){    let postCollectionEntityList = [      {        postCollectionName:'',        postCollectionId:'',        activityId:''      }    ];    if (this.props.postCollectionState.postCollectionEntityList) {      postCollectionEntityList = this.props.postCollectionState.postCollectionEntityList;      console.log("postCollectionEntityList" + postCollectionEntityList);    }    //let postCollectionEntityList = this.props.postCollectionState.postCollectionEntityList;    //添加与删除    const gridInstance = (      <Grid className="mb5">        <Row className="show-grid">          <Col sm={1} mdPush={-7}><BtnAddData {...this.props} activityParam={this.props.queryData} /></Col>          <Col sm={1}><BtnDelData {...this.props} /></Col>        </Row>      </Grid>    );    //acb 表数据    return(      <div>        {gridInstance}        <TableExit data={postCollectionEntityList} acb={this.props.initPostCollection}>          <TableCloumnsExit dataField="alter" dataFormat={this.checkboxFormatter.bind(this)}>选择</TableCloumnsExit>          <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>        <ButtonToolbar>          <Link className="btn btn-primary" to={{ pathname:activity_main_path}}>返回到活动界面</Link>        </ButtonToolbar>      </div>    );  }}