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


Posted in Javascript onApril 17, 2017

页面效果图:

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 删除功能的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
js实现橱窗展示效果
Jan 11 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
JS实现随机点名器
Apr 12 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 #Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 #Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 #jQuery
Vue分页组件实例代码
Apr 17 #Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 #Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 #Javascript
老生常谈jacascript DOM节点获取
Apr 17 #Javascript
You might like
我的群发邮件程序
2006/10/09 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
php文件缓存方法总结
2016/03/16 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
python实现分页效果
2017/10/25 Python
Python反转序列的方法实例分析
2018/03/21 Python
numpy中矩阵合并的实例
2018/06/15 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
关于python中remove的一些坑小结
2021/01/04 Python
网管求职信
2014/03/03 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
收入证明申请书
2015/06/12 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers