react.js CMS 删除功能的实现方法
页面 效果 图:
数据操作分析:
在查询表 组件的 TableData.js 中操作如下内容 :
给每一行绑定一个 checkBox ,且在点击这个 checkBox 时,触发 action 中的一个 方法 (formatPostCollectionList),这个方法 是用来更新选中的实体数组。formatPostCollectionList为action中的方法 ,需要export
定义每一行的实体为一个 数组,用变量 postCollections 表示
如果选中当前行,则更新实体数组中的数据;如果取消当前行,则删除 实体中的数据;
参数为 row ;
点击删除 按钮后,使用 componentDitUpdate() 生命周期方法 ,在组件更新后调用 。
如果删除 成功,则执行 action 中的方法 clearPostCollection()。这个方法 是用来清空当前行实体中的数据;
如果删除 成功,最后执行 查询表 的刷新重新加载数据的方法
更新实体数据与清空实体数据的方法 ,在 action 中执行。
代码 分析:
1、调查询 接口,Api中的方法
rush:js;">
searchPostCollectionByActivityId(activityId,callback) {
const queryP
ara m = `/tob/post/search?activeId=${activityId}`; //接口,使用``可以在URL中
显示 查询 参数
Con
fig .get(queryP
ara m,callback);
}
2、action中操作查询 数据的方法 postCollectionEntityList 存放接口中的所有数据
<div class="jb51code">
<pre class="brush:js;">
export function initPostCollection(row){
return (dispatch,getState) => {
let activityId = row.activityId;
Api.searchPostCollectionByActivityId(activityId,para ms => {
dis patch(initPostCollectionSetter(activityId,para ms));
});
}
}
function initPostCollectionSetter(activityId,para ms){
return {
type:INIT_POST_COLLECTION,activityId:activityId,data:{postCollectionEntityList:para ms}
}
}
3、TatleData 表组件中调用 action 的方法 ,至此 表数据 OK
rush:js;">
export default class TableData extends Component {
constructor(props){
super(props);
}
componentDidMount() {
const para m = this.props.queryData;
console.log("para m === " + para m);
this.props.initPostCollection(para m);//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 <a href="https://www.jb51.cc/tag/datafield/" target="_blank" class="keywords">datafield</a>="activityTitle">活动<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a></TableCloumnsExit>
<TableCloumnsExit <a href="https://www.jb51.cc/tag/datafield/" target="_blank" class="keywords">datafield</a>="postCollectionName">帖子集<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a></TableCloumnsExit>
<TableCloumnsExit <a href="https://www.jb51.cc/tag/datafield/" target="_blank" class="keywords">datafield</a>="postCollectionId">帖子集编号</TableCloumnsExit>
<TableCloumnsExit dataField="active" dataFormat={this.postCollectionFormatter}><a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a></TableCloumnsExit>
<TableCloumnsExit dataField="send" dataFormat={this.activeFormatter.bind(this)}>发送</TableCloumnsExit>
<TableCloumnsExit dataField="send" dataFormat={this.questionBankFormatter.bind(this)}>题库</TableCloumnsExit>
</TableExit>
</div>
);
}
}
删除 表数据操作
调删除 接口,API中的方法
rush:js;">
deletePostCollections (activityId,p
ara ms,callback) {
let path = `/tob/post/deletePostCollection/${activityId}`; //
删除 接口
Con
fig .deleteWith
nor esponse(path,callback);
}
action 中写删除 数据的方法
删除 实体
删除 实体前要先 插入 checkBox
rush:js;">
check
Box Formatter(cell,row) {
return
sstyle="primary" type="check
Box ">
}
查询表 中使用 checkBox
点击 checkBox 会触发 更新选中的实体数据的方法
rush:js;">
check
Box Formatter(cell,row) {
return
}
更新选中实体数据的方法 ,在action中编写
{
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数据
}
dis patch(formatPostCollectionListSetter(postCollections));
}
}
function formatPostCollectionListSetter(p
ara ms){
return {
type:SET_POST_COLLECTIONS,data:{postCollections:p
ara ms} //红色变量为实体数据
}
}
选中实体数据后,点击删除 按钮,会触发
deletePostCollections 删除 方法
{
let state = getState().postCollectionState;
let activityId = state.activityId;
let postCollections = state.postCollections; //实体对象从state中
获取
Api.deletePostCollections(activityId,postCollections,p
ara ms => { //调
删除 接口的
方法
dis patch(deletePostCollectionsSetter(p
ara ms));
});
}
}
function deletePostCollectionsSetter(p
ara ms){
alertPre("",p
ara ms);
return {
type:DELETE_POST_COLLECTIONS,data:{deletePostCollectionsResponse:p
ara ms} //deletePostCollectionsResponse 选中的要
删除 的数据容器
}
}
把删除 数据的方法 绑定到删除 按钮,绑定前根据删除 钮钮的状态,判断是否可点击
rush:js;">
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}><a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>贴子集</Button> //红色字体标为 <a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>数据的<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>
</ButtonToolbar>
);
return(
<div>
{buttonsInstanceDel}
</div>
)
}
删除 成功后,调用 生命周期的方法 ,在 表查询 组件中,更新表数据。如果删除 成功,则执行两个方法 :清空实体数据与刷新加载数据
rush:js;">
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 p
ara m = {
activityId:this.props.postCollectionState.activityId
}
this.props.initPostCollection(p
ara m); //根据ID重新加载剩余的数据
}
}
}
清空实体
rush:js;">
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
rush:js;">
//
查询
searchPostCollectionByActivityId(activityId,callback) {
const queryP
ara m = `/tob/post/search?activeId=${activityId}`;
Con
fig .get(queryP
ara m,callback);
}
//删除
deletePostCollections (activityId,callback) {
let path = /tob/post/deletePostCollection/${activityId}
;
Config .deleteWithnor esponse(path,callback);
}
action(查询 方法 / 更新选中实体数据方法 / 删除 方法 / 清空实体数据方法 )
//更新选中实体数据
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);
}
dis patch(formatPostCollectionListSetter(postCollections));
}
}
function formatPostCollectionListSetter(p
ara ms){
return {
type:SET_POST_COLLECTIONS,data:{postCollections:p
ara ms}
}
}
//删除 方法
export const DELETE_POST_COLLECTIONS = 'DELETE_POST_COLLECTIONS';
export function deletePostCollections(){
return(dis patch,getState) => {
let state = getState().postCollectionState;
let activityId = state.activityId;
let postCollections = state.postCollections;
Api.deletePostCollections(activityId,para ms => {
dis patch(deletePostCollectionsSetter(para ms));
});
}
}
function deletePostCollectionsSetter(para ms){
alertPre("",data:{deletePostCollectionsResponse:para ms}
}
}
//清空实体数据
export const CLEAR_POST_COLLECTION = 'CLEAR_POST_COLLECTION';
export function clearPostCollection(){
return {
type: CLEAR_POST_COLLECTION,data:{
addPostCollectionResponse:{},postFieldList:[]
}
}
}
component(BtnDelData.js / TableData.js (checkBox ))
rush:js;">
//
删除 按钮组件
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}><a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>贴子集</Button>
</ButtonToolbar>
);
return(
<div>
{buttonsInstanceDel}
</div>
)
}
}
//表组件
import React,Pagination,Grid,Row,Col} from 'react-bootstrap';
import { Router,Route,IndexRoute,Link,IndexLink,bro wserHistory } 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 para m = this.props.queryData;
console.log("para m === " + para m);
this.props.initPostCollection(para m);
}
componentDidUpdate () {
let deletePostCollectionsResponse = this.props.postCollectionState.deletePostCollectionsResponse;
if (typeof(deletePostCollectionsResponse) != 'undefined') {
let status = deletePostCollectionsResponse.status;
if (200 == status) {
this.props.clearPostCollection();
let para m = {
activityId:this.props.postCollectionState.activityId
}
this.props.initPostCollection(para m);
}
}
}
//修改
activeFormatter(cell,row) {
return 推送
}
checkBox Formatter(cell,row)}>
}
//修改
postCollectionFormatter(cell,row) {
return <Link to={{ pathname:post_collection_main_path,query: row}} activeStyle={ACTIVE}>修改
}
questionBankFormatter(cell,row) {
return <Link to={{ pathname: question_bank_main_path,query: row}} activeStyle={ACTIVE} >查看题库
}
render(){
let postCollectionEntityList = [
{
postCollectionName:'',activityId:''
}
];
if (this.props.postCollectionState.postCollectionEntityList) {
postCollectionEntityList = this.props.postCollectionState.postCollectionEntityList;
console.log("postCollectionEntityList" + postCollectionEntityList);
}
//let postCollectionEntityList = this.props.postCollectionState.postCollectionEntityList;
//<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>与<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>
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 <a href="https://www.jb51.cc/tag/datafield/" target="_blank" class="keywords">datafield</a>="activityTitle">活动<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a></TableCloumnsExit>
<TableCloumnsExit <a href="https://www.jb51.cc/tag/datafield/" target="_blank" class="keywords">datafield</a>="postCollectionName">帖子集<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a></TableCloumnsExit>
<TableCloumnsExit <a href="https://www.jb51.cc/tag/datafield/" target="_blank" class="keywords">datafield</a>="postCollectionId">帖子集编号</TableCloumnsExit>
<TableCloumnsExit dataField="active" dataFormat={this.postCollectionFormatter}><a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a></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 删除 功能 的实现方法 就是小编分享 给大家的全部内容 了,希望能给大家一个 参考,也希望大家多多支持 编程之家。