//查询表数据 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 删除功能的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。