java—在物料表中使用onclick事件时如何重画表中的数据

dldeef67  于 2021-06-26  发布在  Java
关注(0)|答案(2)|浏览(264)

我正在尝试使用springboot、reactjs和axios创建关于表行数据的delete函数。
我可以删除行数据时,我点击删除图标。但我不知道删除数据后如何重新绘制表中的数据。
如果你知道,请告诉我。
frontend:reactjs,材质表库,axios
后端:spring boot、sprind jpa、mysql
表.js

import React from 'react';
import MaterialTable from 'material-table';
import CheckListService from '../services/CheckList';
import { useEffect } from 'react'
import { useState } from 'react';
import Typography from '@material-ui/core/Typography';
import Link from '@material-ui/core/Link';
import Box from '@material-ui/core/Box';
import { makeStyles } from '@material-ui/core';
import axios from 'axios'

//日本語化設定
const localizationJapanese = {
    error: "エラー",
    body: {
        emptyDataSourceMessage: "表示するレコードがありません。",
        filterRow: {
            filterPlaceHolder: "",
            filterTooltip: "フィルター",
        },
        editRow: {
            saveTooltip: "保存",
            cancelTooltip: "キャンセル",
            deleteText: "この行を削除しますか?",
        },
        addTooltip: "追加",
        deleteTooltip: "削除",
        editTooltip: "編集",
    },
    header: {
        actions: "編集・削除",
    },
    grouping: {
        groupedBy: "グループ化:",
        placeholder: "ヘッダーをドラッグ ...",
    },
    pagination: {
        firstTooltip: "最初のページ",
        firstAriaLabel: "最初のページ",
        previousTooltip: "前のページ",
        previousAriaLabel: "前のページ",
        nextTooltip: "次のページ",
        nextAriaLabel: "次のページ",
        labelDisplayedRows: "{from}-{to} 全{count}件",
        labelRowsPerPage: "ページあたりの行数:",
        lastTooltip: "最後のページ",
        lastAriaLabel: "最後のページ",
        labelRowsSelect: "行",
    },
    toolbar: {
        addRemoveColumns: "列の追加、削除",
        nRowsSelected: "{0} 行選択",
        showColumnsTitle: "列の表示",
        showColumnsAriaLabel: "列の表示",
        exportTitle: "出力",
        exportAriaLabel: "出力",
        exportCSVName: "CSV出力",
        exportPDFName: "PDF出力",
        searchTooltip: "検索",
        searchPlaceholder: "検索",
        searchAriaLabel: "検索",
        clearSearchAriaLabel: "クリア",
    },
};

//footer
function Copyright() {
    return (
        <Typography variant="body2" color="textSecondary" align="center">
            {'Copyright © '}
            <Link color="inherit" href="https://material-ui.com/">
                株式会社ウィラム. All rights reserved.
        </Link>{' '}
            {new Date().getFullYear()}
            {'.'}
        </Typography>
    );
}

//独自CSS
const useStyles = makeStyles({
    root: {
        marginTop: '50px',
        marginBottom: '50px',

    }
});

export const Table = () => {
    const classes = useStyles();
    const [dataAll, setDataAll] = useState([]);
    useEffect(() => {
        CheckListService.getList().then((response) =>
            setDataAll(response.data)
        )
    }, [])

    const columns = [
        {
            title: 'リスト番号', field: 'listNo'
        },

        {
            title: 'ソフトウェア名', field: 'softwareName'
        },
        {
            title: '採用日', field: 'saiyouDate'
        },
        {
            title: 'バージョン', field: 'version'
        },
        {
            title: '種別', field: 'shubetu'
        },
        {
            title: 'ライセンス', field: 'licenseManage'
        },
        {
            title: '用途', field: 'youto'
        },
        {
            title: '備考', field: 'bikou'
        },
        {
            title: '承認者', field: 'authorizer'
        },
        {
            title: '承認日', field: 'approvalDate'
        },
        {
            title: 'URL', field: 'url'
        }
    ]
    return (
        <div>
            <div className="container">
                <div className={classes.root}>
                    <MaterialTable
                        title="使用許可ソフトウェアリスト"
                        data={dataAll}
                        columns={columns}
                        style={{
                            marginTop: '50px',
                            whiteSpace: 'nowrap',
                        }}
                        options={{

                            headerStyle: {
                                backgroundColor: '#75A9FF',
                                color: '#FFF'
                            }

                        }}
                        localization={localizationJapanese}

                        actions={[
                            {
                                icon: 'edit',
                                tooltip: '編集',
                                onClick: (event, rowData) => window.confirm(rowData.listNo + "を編集しますか?")
                            },
                            {
                                icon: 'delete',
                                tooltip: '削除',
                                onClick: (event, rowData) => {
                                    axios.get("http://localhost:8080/action/" + rowData.listNo)
                                        .then(response => {
                                            if (response.data != null) {
                                                alert("delete success!");

                                                let newDataAll = dataAll.filter(item => rowData.listNo)

                                                setDataAll(newDataAll)
                                            }
                                        })

                                }
                            }
                        ]}
                    />

                </div>
            </div>
            <Box pt={4}>
                <Copyright />
            </Box>
        </div>
    )

}

动作控制器.java

package com.example.demo.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.example.demo.repository.CheckListRepository;
import com.example.demo.service.CheckListService;

@CrossOrigin
@RequestMapping("action/")
@RestController
public class ActionController {

    @Autowired
    CheckListRepository clr;

    @Autowired
    CheckListService cls;

    @RequestMapping(path = "{deleteId}")
    public void deleteAction(@PathVariable Integer deleteId) {

        clr.deletebyListNo(deleteId);

    }

}
0sgqnhkj

0sgqnhkj1#

当我点击删除图标时,我可以用下面的方式重新绘制我的表数据

CheckListService.getList().then((response) => setDataAll(response.data))

这样好吗?我已经做了,即使它可能不是好代码。

hfyxw5xn

hfyxw5xn2#

你可以试试react redux。使用redux存储时,(表数据的)状态在需要时总是可用的。redux允许您将您的状态存储在所谓的“redux存储”中,并使用操作来调用reducer,而redux又反过来以您认为合适的方式操纵您的状态。
这里有一篇很好的文章,你可以跟着来学习和实现逻辑。

相关问题