react.js CMS 删除功能的实现
2016-05-12 16:29
711 查看
页面效果图:
数据操作分析:
在查询表组件的 TableData.js 中操作如下内容:
给每一行绑定一个checkbox,且在点击这个 checkbox 时,触发 action 中的一个方法(formatPostCollectionList),这个方法是用来更新选中的实体数组。formatPostCollectionList为action中的方法,需要export
定义每一行的实体为一个数组,用变量 postCollections 表示
如果选中当前行,则更新实体数组中的数据;如果取消当前行,则删除实体中的数据;
参数为 row ;
点击删除按钮后,使用 componentDitUpdate() 生命周期方法,在组件更新后调用。
如果删除成功,则执行 action 中的方法 clearPostCollection()。这个方法是用来清空当前行实体中的数据;
如果删除成功,最后执行 查询表的刷新重新加载数据的方法
更新实体数据与清空实体数据的方法,在 action 中执行。
代码分析:
表查询操作
调查询接口,Api中的方法
action中操作查询数据的方法 postCollectionEntityList 存放接口中的所有数据
3. TatleData 表组件中调用 action 的方法,至此 表数据 OK
删除表数据操作
调删除接口,API中的方法
action 中写删除数据的方法
删除实体
删除实体前要先 插入 checkbox
查询表中使用 checkbox
点击 checkbox 会触发 更新选中的实体数据的方法
更新选中实体数据的方法,在action中编写
选中实体数据后,点击删除按钮,会触发deletePostCollections 删除方法
6. 把删除数据的方法绑定到删除按钮,绑定前根据删除钮钮的状态,判断是否可点击
7. 删除成功后,调用生命周期的方法,在 表查询组件中,更新表数据。如果删除成功,则执行两个方法:清空实体数据与刷新加载数据
清空实体
所有代码结构,含一个api,一个action,两个component,一个reducers
api(查询 / 删除)
action(查询方法 / 更新选中实体数据方法 / 删除方法 / 清空实体数据方法 )
component(BtnDelData.js / TableData.js (checkbox))
reducers (state合并)
以上为删除功能的用法。
数据操作分析:
在查询表组件的 TableData.js 中操作如下内容:
给每一行绑定一个checkbox,且在点击这个 checkbox 时,触发 action 中的一个方法(formatPostCollectionList),这个方法是用来更新选中的实体数组。formatPostCollectionList为action中的方法,需要export
定义每一行的实体为一个数组,用变量 postCollections 表示
如果选中当前行,则更新实体数组中的数据;如果取消当前行,则删除实体中的数据;
参数为 row ;
点击删除按钮后,使用 componentDitUpdate() 生命周期方法,在组件更新后调用。
如果删除成功,则执行 action 中的方法 clearPostCollection()。这个方法是用来清空当前行实体中的数据;
如果删除成功,最后执行 查询表的刷新重新加载数据的方法
更新实体数据与清空实体数据的方法,在 action 中执行。
代码分析:
表查询操作
调查询接口,Api中的方法
searchPostCollectionByActivityId(activityId, callback) { const queryParam = `/tob/post/search?activeId=${activityId}`; //接口,使用``可以在URL中显示查询参数 Config.get(queryParam, callback); }
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( <div><TableExit data={postCollectionEntityList} acb={this.props.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 bsStyle="primary" type="checkbox"></input> }
查询表中使用 checkbox
<TableCloumnsExit dataField="alter" dataFormat={this.checkboxFormatter.bind(this)}>选择</TableCloumnsExit>
点击 checkbox 会触发 更新选中的实体数据的方法
checkboxFormatter(cell,row) { return <input bsStyle="primary" type="checkbox" onClick={this.props.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 选中的要删除的数据容器 } }
6. 把删除数据的方法绑定到删除按钮,绑定前根据删除钮钮的状态,判断是否可点击
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}>删除贴子集</Button> //红色字体标为 删除数据的方法 </ButtonToolbar> ); return( <div> {buttonsInstanceDel} </div> ) }
7. 删除成功后,调用生命周期的方法,在 表查询组件中,更新表数据。如果删除成功,则执行两个方法:清空实体数据与刷新加载数据
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?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(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合并)
以上为删除功能的用法。
相关文章推荐
- ReactOS实现的兼容NT内核分析--KfLowerIrql函数
- React-Native入门指导之iOS篇 —— 一、准备工作
- Webpack打包React踩到的坑
- React入门-高清视频
- React-Native的环境配置与第一个HelloWorld
- SUBLIME TEXT 3配置react native开发环境以及插件安装
- React Native
- React Native生命周期整理
- 【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例
- 【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例
- 【REACT NATIVE 系列教程之一】触摸事件的两种形式与四种TOUCHABLE组件详解
- [ReactiveCocoa]入门教程:第二部分
- [ReactiveCocoa]入门教程:第一部分
- 学习react,redux,router,antd的一些感悟(见解)
- mocha+ React + enzyme 单元测试
- react-native-vector-icons的简单使用,图片,按钮,标签视图,导航条
- iOS 第三方框架-ReactiveCocoa 下的 MVVM
- react-native项目之样式总结
- React.js入门实例教程之创建hello world 的5种方式
- react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)