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

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"&gt;活动<a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a></TableCloumnsExit>
      <TableCloumnsExit dataField="postCollectionName"&gt;帖子集<a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a></TableCloumnsExit>
      <TableCloumnsExit dataField="postCollectionId"&gt;帖子集编号</TableCloumnsExit>
      <TableCloumnsExit dataField="active" dataFormat={this.postCollectionFormatter}><a href="/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>
);

}
}

删除接口 Config.deleteWithNoResponse(path,callback); }

BoxFormatter(cell,row) { return Box"> }

选择

BoxFormatter(cell,row) { return }

{ 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} //红色变量为实体数据 } }

{ 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 选中的要删除的数据容器 } }

删除按钮状态，默认为禁用状态，返回为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"&gt;
    <Button bsStyle="danger" disabled={dis} onClick={this.props.deletePostCollections}><a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>贴子集</Button> //红色字体标为 <a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>数据的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>
  </ButtonToolbar>
);

return(
  <div>
    {buttonsInstanceDel}
  </div>
)

}

删除的数据 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重新加载剩余的数据 } } }

名称 addPostCollectionResponse:{},postCollections:[],deletePostCollectionsResponse:{},postCollectionName:'',postNumber:'0',postFieldList:[] } } }

查询 searchPostCollectionByActivityId(activityId,callback) { const queryParam = `/tob/post/search?activeId=${activityId}`; Config.get(queryParam,callback); }

//删除
deletePostCollections (activityId,callback) {
let path = /tob/post/deletePostCollection/${activityId};
Config.deleteWithNoResponse(path,callback);
}

//更新选中实体数据
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,params => {
dispatch(deletePostCollectionsSetter(params));
});
}
}
function deletePostCollectionsSetter(params){
alertPre("",data:{deletePostCollectionsResponse:params}
}
}

//清空实体数据
export const CLEAR_POST_COLLECTION = 'CLEAR_POST_COLLECTION';
export function clearPostCollection(){
return {
type: CLEAR_POST_COLLECTION,data:{
addPostCollectionResponse:{},postFieldList:[]
}
}
}

删除按钮组件 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"&gt;
    <Button bsStyle="danger" disabled={dis} onClick={this.props.deletePostCollections}><a href="/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,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)}>
}

//修改
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="/tag/tianjia/" target="_blank" class="keywords">添加</a>与<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>
const gridInstance = (
  <Grid className="mb5"&gt;
    <Row className="show-grid"&gt;
      <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"&gt;活动<a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a></TableCloumnsExit>
      <TableCloumnsExit dataField="postCollectionName"&gt;帖子集<a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a></TableCloumnsExit>
      <TableCloumnsExit dataField="postCollectionId"&gt;帖子集编号</TableCloumnsExit>
      <TableCloumnsExit dataField="active" dataFormat={this.postCollectionFormatter}><a href="/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>
);

}
}

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

数据操作分析：

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

表查询操作

删除表数据操作

action 中写删除数据的方法

更新选中实体数据的方法

deletePostCollections

api(查询 / 删除)

猜你在找的JavaScript相关文章