页面效果图:
公司主营业务:成都网站建设、做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出昆都仑免费做网站回馈大家。
数据操作分析:
在查询表组件的 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?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 < 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 选中的要删除的数据容器 } }
把删除数据的方法绑定到删除按钮,绑定前根据删除钮钮的状态,判断是否可点击
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?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 = (); 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 删除功能的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。