页面效果图：
数据操作分析：
在查询表组件的 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&＃63;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(
活动名称
帖子集名称
帖子集编号
修改
发送
题库
);
}
}
删除表数据操作
调删除接口，API中的方法
deletePostCollections (activityId ,params, callback) {
let path = `/tob/post/deletePostCollection/${activityId}`; //删除接口
Config.deleteWithNoResponse(path ,params, callback);
}
action 中写删除数据的方法
删除实体
删除实体前要先 插入 checkbox
checkboxFormatter(cell,row) {
return
}
查询表中使用 checkbox
选择
点击 checkbox 会触发 更新选中的实体数据的方法
checkboxFormatter(cell,row) {
return
}
更新选中实体数据的方法，在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 -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= (
//红色字体标为 删除数据的方法
);
return(
{buttonsInstanceDel}
)
}
删除成功后，调用生命周期的方法，在 表查询组件中，更新表数据。如果删除成功，则执行两个方法：清空实体数据与刷新加载数据
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&＃63;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 -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= (
);
return(
{buttonsInstanceDel}
)
}
}
//表组件
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
}
checkboxFormatter(cell,row) {
return
}
//修改
postCollectionFormatter(cell,row) {
return 修改
}
questionBankFormatter(cell,row) {
return 查看题库
}
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 = (
);
//acb 表数据
return(
{gridInstance}
选择
活动名称
帖子集名称
帖子集编号
修改
发送
题库
返回到活动界面
);
}
}
reducers (state合并)
以上为删除功能的用法。
这篇react.js CMS 删除功能的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 