頁面效果圖：
數據操作分析：
在查詢表組件的 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( <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 選中的要刪除的數據容器 }}把刪除數據的方法綁定到刪除按鈕，綁定前根據刪除鈕鈕的狀態，判斷是否可點擊
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> ) }刪除成功后，調用生命周期的方法，在 表查詢組件中，更新表數據。如果刪除成功，則執行兩個方法：清空實體數據與刷新加載數據
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合并)
以上為刪除功能的用法。
這篇react.js CMS 刪除功能的實現方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
