react.js CMS 刪除功能的實(shí)現(xiàn)方法

更新時(shí)間：2017年04月17日 09:10:56 投稿：jingxian

下面小編就為大家?guī)?lái)一篇react.js CMS 刪除功能的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

頁(yè)面效果圖：

數(shù)據(jù)操作分析：

在查詢表組件的 TableData.js 中操作如下內(nèi)容：

給每一行綁定一個(gè)checkbox，且在點(diǎn)擊這個(gè) checkbox 時(shí)，觸發(fā) action 中的一個(gè)方法(formatPostCollectionList)，這個(gè)方法是用來(lái)更新選中的實(shí)體數(shù)組。formatPostCollectionList為action中的方法，需要export

定義每一行的實(shí)體為一個(gè)數(shù)組，用變量 postCollections 表示

如果選中當(dāng)前行，則更新實(shí)體數(shù)組中的數(shù)據(jù)；如果取消當(dāng)前行，則刪除實(shí)體中的數(shù)據(jù)；

參數(shù)為 row ；

點(diǎn)擊刪除按鈕后，使用 componentDitUpdate() 生命周期方法，在組件更新后調(diào)用。

如果刪除成功，則執(zhí)行 action 中的方法 clearPostCollection()。這個(gè)方法是用來(lái)清空當(dāng)前行實(shí)體中的數(shù)據(jù)；

如果刪除成功，最后執(zhí)行查詢表的刷新重新加載數(shù)據(jù)的方法

更新實(shí)體數(shù)據(jù)與清空實(shí)體數(shù)據(jù)的方法，在 action 中執(zhí)行。

代碼分析：

表查詢操作

1、調(diào)查詢接口，Api中的方法

searchPostCollectionByActivityId(activityId, callback) {
    const queryParam = `/tob/post/search?activeId=${activityId}`;  //接口，使用``可以在URL中顯示查詢參數(shù)
    Config.get(queryParam, callback);
  }

2、action中操作查詢數(shù)據(jù)的方法 postCollectionEntityList 存放接口中的所有數(shù)據(jù)

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 表組件中調(diào)用 action 的方法，至此表數(shù)據(jù) 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中獲取接口數(shù)據(jù)的方法
  }

  render(){
　　   // 定義postCollectionEntityList中的數(shù)據(jù)
    let postCollectionEntityList = [
      {
        postCollectionName:'',
        postCollectionId:'',
        activityId:''
      }
    ];
    //判斷，如果postCollectionEntityList中有數(shù)據(jù)，則把數(shù)據(jù)顯示出來(lái)
    if (this.props.postCollectionState.postCollectionEntityList) {
      postCollectionEntityList = this.props.postCollectionState.postCollectionEntityList;
      console.log("postCollectionEntityList" + postCollectionEntityList);
    }

    //acb 表數(shù)據(jù)
    return(
      <div><TableExit data={postCollectionEntityList} acb={this.props.initPostCollection}>
          <TableCloumnsExit dataField="activityTitle">活動(dòng)名稱</TableCloumnsExit>
          <TableCloumnsExit dataField="postCollectionName">帖子集名稱</TableCloumnsExit>
          <TableCloumnsExit dataField="postCollectionId">帖子集編號(hào)</TableCloumnsExit>
          <TableCloumnsExit dataField="active" dataFormat={this.postCollectionFormatter}>修改</TableCloumnsExit>
          <TableCloumnsExit dataField="send" dataFormat={this.activeFormatter.bind(this)}>發(fā)送</TableCloumnsExit>
          <TableCloumnsExit dataField="send" dataFormat={this.questionBankFormatter.bind(this)}>題庫(kù)</TableCloumnsExit>
        </TableExit>
      </div>
    );
  }
}

刪除表數(shù)據(jù)操作

調(diào)刪除接口，API中的方法

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

action 中寫刪除數(shù)據(jù)的方法

刪除實(shí)體

刪除實(shí)體前要先插入 checkbox

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

查詢表中使用 checkbox

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

點(diǎn)擊 checkbox 會(huì)觸發(fā) 更新選中的實(shí)體數(shù)據(jù)的方法

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

更新選中實(shí)體數(shù)據(jù)的方法，在action中編寫

export function formatPostCollectionList(row) {
  return(dispatch, getState) => {
    let postCollectionId = row.postCollectionId; //獲取每一行的ID
    let state = getState().postCollectionState;  //從postCollectionState（）中拿到state并賦值給全局state
    let postCollections = state.postCollections; // 紅色字體標(biāo)注為實(shí)體中的數(shù)據(jù)容器
    let postCollectionItem = {
      postCollectionId:postCollectionId     //實(shí)體中的數(shù)據(jù)ID
    };
    if (postCollections) {  //postCollections 實(shí)體數(shù)據(jù)，可能 有數(shù)據(jù)
      let index = -1;   // index = -1 指默認(rèn)實(shí)體中沒有數(shù)據(jù)
      for (let i = 0 ;i < postCollections.length ;i++) { //如果實(shí)體中有數(shù)據(jù)，則循環(huán)
        let postCollection = postCollections[i];    //拿實(shí)體中的數(shù)據(jù)，給變量postCollection
        let id = postCollection.postCollectionId;   //從拿到的實(shí)體數(shù)據(jù)中，取每一個(gè)ID，方法對(duì)比（選中的數(shù)據(jù)與實(shí)體中的數(shù)據(jù)對(duì)比）
        if (postCollectionId == id) { //如果實(shí)體中的ID == 選中的ID
          index = i;         //把實(shí)體中選中的的數(shù)據(jù) 賦值為 i 
        }
      }
      if (index > -1) {         //如果實(shí)體的數(shù)據(jù)存在，不為空
        postCollections.splice(index,1);  //刪除實(shí)體對(duì)象中index位置中的一個(gè)數(shù)據(jù)
      } else {
        postCollections.push(postCollectionItem); //如果實(shí)體數(shù)據(jù)為空，則push實(shí)體中的ID數(shù)據(jù)
      }
    } else {
      postCollections = []; // 第一次render時(shí)，實(shí)體數(shù)據(jù)可能為空 / 為undefined，那么將它定義為一個(gè)數(shù)組
      postCollections.push(postCollectionItem);  //給這個(gè)空數(shù)組push數(shù)據(jù)
    }
    dispatch(formatPostCollectionListSetter(postCollections));
  }
}
function formatPostCollectionListSetter(params){
  return {
    type:SET_POST_COLLECTIONS,
    data:{postCollections:params} //紅色變量為實(shí)體數(shù)據(jù)
  }
}

選中實(shí)體數(shù)據(jù)后，點(diǎn)擊刪除按鈕，會(huì)觸發(fā)deletePostCollections 刪除方法

export const DELETE_POST_COLLECTIONS = 'DELETE_POST_COLLECTIONS';
export function deletePostCollections(){  //點(diǎn)擊刪除按鈕后，觸發(fā)deletePostCollections刪除方法
  return(dispatch, getState) => {
    let state = getState().postCollectionState;
    let activityId = state.activityId;
    let postCollections = state.postCollections; //實(shí)體對(duì)象從state中獲取
    Api.deletePostCollections(activityId ,postCollections, params => {  //調(diào)刪除接口的方法
      dispatch(deletePostCollectionsSetter(params));
    });
  }
}
function deletePostCollectionsSetter(params){
  alertPre("",params);
  return {
    type:DELETE_POST_COLLECTIONS,
    data:{deletePostCollectionsResponse:params} //deletePostCollectionsResponse 選中的要?jiǎng)h除的數(shù)據(jù)容器
  }
}

把刪除數(shù)據(jù)的方法綁定到刪除按鈕，綁定前根據(jù)刪除鈕鈕的狀態(tài)，判斷是否可點(diǎn)擊

render(){
    let dis = true; //刪除按鈕狀態(tài)，默認(rèn)為禁用狀態(tài)，返回為true
    let postCollections = this.props.postCollectionState.postCollections; //獲取實(shí)體中的數(shù)據(jù)
    if (typeof(postCollections) == 'undefined' || postCollections.length == 0) {  //如果實(shí)體中的數(shù)據(jù)為 undefined 或者 為空
      dis = true; //如果實(shí)體中沒有數(shù)據(jù)，則按鈕狀態(tài)為禁用狀態(tài)
    } else {
      dis = false; //如果實(shí)體中有數(shù)據(jù)，選中后的狀態(tài)為可點(diǎn)擊狀態(tài)
    }

    const buttonsInstanceDel = (
      <ButtonToolbar className="mb10">
        <Button bsStyle="danger" disabled={dis} onClick={this.props.deletePostCollections}>刪除貼子集</Button> //紅色字體標(biāo)為 刪除數(shù)據(jù)的方法
      </ButtonToolbar>
    );

    return(
      <div>
        {buttonsInstanceDel}
      </div>
    )
  }

刪除成功后，調(diào)用生命周期的方法，在表查詢組件中，更新表數(shù)據(jù)。如果刪除成功，則執(zhí)行兩個(gè)方法：清空實(shí)體數(shù)據(jù)與刷新加載數(shù)據(jù)

componentDidUpdate () {
    let deletePostCollectionsResponse = this.props.postCollectionState.deletePostCollectionsResponse; //deletePostCollectionsResponse 刪除的數(shù)據(jù)
    if (typeof(deletePostCollectionsResponse) != 'undefined') { //如果這個(gè)數(shù)據(jù)類型不是 undefined
      let status = deletePostCollectionsResponse.status;   //獲取到這個(gè)刪除的數(shù)據(jù)狀態(tài)
      if (200 == status) {                  //如果為200，刪除成功
        this.props.clearPostCollection();          //加載清空實(shí)體數(shù)據(jù)的方法 clearPostCollection，就是從實(shí)體數(shù)據(jù)中刪除被刪除的數(shù)據(jù)
        let param = {
          activityId:this.props.postCollectionState.activityId  
        }
        this.props.initPostCollection(param);       //根據(jù)ID重新加載剩余的數(shù)據(jù)
      }
    }
  }

清空實(shí)體

export const CLEAR_POST_COLLECTION = 'CLEAR_POST_COLLECTION';
export function clearPostCollection(){
  return {
    type: CLEAR_POST_COLLECTION,
    data:{  //實(shí)體中的數(shù)據(jù)名稱
      addPostCollectionResponse:{},
      postCollections:[],
      deletePostCollectionsResponse:{},
      postCollectionName:'',
      postNumber:'0',
      postFieldList:[]
    }
  }
}

所有代碼結(jié)構(gòu)，含一個(gè)api，一個(gè)action，兩個(gè)component，一個(gè)reducers

api(查詢 / 刪除)

//查詢
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);
  }

action(查詢方法 / 更新選中實(shí)體數(shù)據(jù)方法 / 刪除方法 / 清空實(shí)體數(shù)據(jù)方法 )

//查詢表數(shù)據(jù)
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}
  }
}

//更新選中實(shí)體數(shù)據(jù)
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}
  }
}

//清空實(shí)體數(shù)據(jù)
export const CLEAR_POST_COLLECTION = 'CLEAR_POST_COLLECTION';
export function clearPostCollection(){
  return {
    type: CLEAR_POST_COLLECTION,
    data:{
      addPostCollectionResponse:{},
      postCollections:[],
      deletePostCollectionsResponse:{},
      postCollectionName:'',
      postNumber:'0',
      postFieldList:[]
    }
  }
}

component(BtnDelData.js / TableData.js (checkbox))

//刪除按鈕組件
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';

//跳轉(zhuǎn)路徑
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} >查看題庫(kù)</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 表數(shù)據(jù)
    return(
      <div>
        {gridInstance}
        <TableExit data={postCollectionEntityList} acb={this.props.initPostCollection}>
          <TableCloumnsExit dataField="alter" dataFormat={this.checkboxFormatter.bind(this)}>選擇</TableCloumnsExit>
          <TableCloumnsExit dataField="activityTitle">活動(dòng)名稱</TableCloumnsExit>
          <TableCloumnsExit dataField="postCollectionName">帖子集名稱</TableCloumnsExit>
          <TableCloumnsExit dataField="postCollectionId">帖子集編號(hào)</TableCloumnsExit>
          <TableCloumnsExit dataField="active" dataFormat={this.postCollectionFormatter}>修改</TableCloumnsExit>
          <TableCloumnsExit dataField="send" dataFormat={this.activeFormatter.bind(this)}>發(fā)送</TableCloumnsExit>
          <TableCloumnsExit dataField="send" dataFormat={this.questionBankFormatter.bind(this)}>題庫(kù)</TableCloumnsExit>
        </TableExit>
        <ButtonToolbar>
          <Link className="btn btn-primary" to={{ pathname:activity_main_path}}>返回到活動(dòng)界面</Link>
        </ButtonToolbar>
      </div>
    );
  }
}

reducers (state合并)

以上為刪除功能的用法。

這篇react.js CMS 刪除功能的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。