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

页面效果图：

数据操作分析：

在查询表组件的  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  删除方法

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:[]
    }
  }
}

所有代码结构，含一个api，一个action，两个component，一个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(查询方法 / 更新选中实体数据方法 / 删除方法 / 清空实体数据方法 )

//查询表数据
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:[]
    }
  }
}

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';

//跳转路径
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>
    );
  }
}

reducers (state合并)

以上为删除功能的用法。

这篇react.js cms 删除功能的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。