这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇 react.js CMS 删除功能的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
页面效果图:
数据操作分析:
在查询表组件的 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 删除功能的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0715/334018.html