甚么微信小程序_react.js CMS 删除功用的完成方法

react.js CMS 删除功能的实现方法     投稿:jingxian   下面小编就为大家带来一篇react.js CMS 删除功能的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

页面效果图:

数据操作分析:

在查询表组件的  TableData.js 中操作如下内容:

给每一行绑定一个checkbox,且在点击这个 checkbox 时,触发 action 中的一个方法(formatPostCollectionList),这个方法是用来更新选中的实体数组。formatPostCollectionList为action中的方法,需要export

定义每一行的实体为一个数组,用变量 postCollections 表示

如果选中当前行,则更新实体数组中的数据;如果取消当前行,则删除实体中的数据;

参数为  row  ;

ponentDitUpdate() 生命周期方法,在组件更新后调用。

如果删除成功,则执行 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(pro凡科抠图){
 super(pro凡科抠图);
 componentDidMount() {
 const param = this.pro凡科抠图.queryData;
 console.log("param === " + param);
 this.pro凡科抠图.initPostCollection(param);//action中获取接口数据的方法
 render(){
 // 定义postCollectionEntityList中的数据
 let postCollectionEntityList = [
 postCollectionName:'',
 postCollectionId:'',
 activityId:''
 //判断,如果postCollectionEntityList中有数据,则把数据显示出来
 if (this.pro凡科抠图.postCollectionState.postCollectionEntityList) {
 postCollectionEntityList = this.pro凡科抠图.postCollectionState.postCollectionEntityList;
 console.log("postCollectionEntityList" + postCollectionEntityList);
 //acb 表数据
 return(
 div TableExit data={postCollectionEntityList} acb={this.pro凡科抠图.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 bs type="checkbox" /input 
 }

查询表中使用 checkbox

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

点击 checkbox 会触发 更新选中的实体数据的方法

checkboxFormatter(cell,row) {
 return input bs type="checkbox" this.pro凡科抠图.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.pro凡科抠图.postCollectionState.postCollections; //获取实体中的数据
 if (typeof(postCollections) == 'undefined' || postCollections.length == 0) { //如果实体中的数据为 undefined 或者 为空
 dis = true; //如果实体中没有数据,则按钮状态为禁用状态
 } else {
 dis = false; //如果实体中有数据,选中后的状态为可点击状态
 const buttonsInstanceDel = (
 ButtonToolbar className="mb10" 
 Button bs disabled={dis} this.pro凡科抠图.deletePostCollections} 删除贴子集 /Button //红色字体标为 删除数据的方法
 /ButtonToolbar 
 return(
 div 
 {buttonsInstanceDel}
 /div 
 }

删除成功后,调用生命周期的方法,在 表查询组件中,更新表数据。如果删除成功,则执行两个方法:清空实体数据与刷新加载数据

componentDidUpdate () {
 let deletePostCollectionsResponse = this.pro凡科抠图.postCollectionState.deletePostCollectionsResponse; //deletePostCollectionsResponse 删除的数据
 if (typeof(deletePostCollectionsResponse) != 'undefined') { //如果这个数据类型不是 undefined
 let status = deletePostCollectionsResponse.status; //获取到这个删除的数据状态
 if (200 == status) { //如果为200,删除成功
 this.pro凡科抠图.clearPostCollection(); //加载清空实体数据的方法 clearPostCollection,就是从实体数据中删除被删除的数据
 let param = {
 activityId:this.pro凡科抠图.postCollectionState.activityId 
 this.pro凡科抠图.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,ponent,一个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(pro凡科抠图){
 super(pro凡科抠图);
 render(){
 let dis = true;
 let postCollections = this.pro凡科抠图.postCollectionState.postCollections;
 if (typeof(postCollections) == 'undefined' || postCollections.length == 0) {
 dis = true;
 } else {
 dis = false;
 const buttonsInstanceDel = (
 ButtonToolbar className="mb10" 
 Button bs disabled={dis} this.pro凡科抠图.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 'ponent/table/TableExit.js';
import TableCloumnsExit from 'ponent/table/TableCloumnsExit.js';
//跳转路径
import {invitation_main_path,post_collection_main_path,activity_main_path,question_bank_main_path} from '/build/config.js';

componentDidUpdate () { let deletePostCollectionsResponse = this.pro凡科抠图.postCollectionState.deletePostCollectionsResponse; if (typeof(deletePostCollectionsResponse) != 'undefined') { let status = deletePostCollectionsResponse.status; if (200 == status) { this.pro凡科抠图.clearPostCollection(); let param = { activityId:this.pro凡科抠图.postCollectionState.activityId this.pro凡科抠图.initPostCollection(param); //修改 activeFormatter(cell,row) { return Button bs this.pro凡科抠图.sendPostCollection.bind(null,row)} 推送 /Button checkboxFormatter(cell,row) { return input bs type="checkbox" this.pro凡科抠图.formatPostCollectionList.bind(this,row)} /input //修改 postCollectionFormatter(cell,row) { return Link to={{ pathname:post_collection_main_path, query: row}} active '', postCollectionId:'', activityId:'' if (this.pro凡科抠图.postCollectionState.postCollectionEntityList) { postCollectionEntityList = this.pro凡科抠图.postCollectionState.postCollectionEntityList; console.log("postCollectionEntityList" + postCollectionEntityList); //let postCollectionEntityList = this.pro凡科抠图.postCollectionState.postCollectionEntityList; //添加与删除 const gridInstance = ( Grid className="mb5" Row className="show-grid" Col sm={1} mdPush={-7} BtnAddData {...this.pro凡科抠图} activityParam={this.pro凡科抠图.queryData} / /Col Col sm={1} BtnDelData {...this.pro凡科抠图} / /Col /Row /Grid //acb 表数据 return( div {gridInstance} TableExit data={postCollectionEntityList} acb={this.pro凡科抠图.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 删除功能的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。