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 相关文章推荐
arguments对象
Nov 20 Javascript
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
Javascript基础教程之变量
Jan 18 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
详细分析vue表单数据的绑定
Jul 20 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
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
Python 学习教程之networkx
2019/04/15 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
使用python实现多维数据降维操作
2020/02/24 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
工程部经理岗位职责
2013/12/08 职场文书
代办委托书怎样写
2014/04/08 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书