LEE*_*MIN 3 javascript reactjs
import React, { useState } from "react";\nimport { makeStyles } from "@material-ui/core/styles";\nimport Table from "@material-ui/core/Table";\nimport TableBody from "@material-ui/core/TableBody";\nimport TableCell from "@material-ui/core/TableCell";\nimport TableContainer from "@material-ui/core/TableContainer";\nimport TablePagination from "@material-ui/core/TablePagination";\nimport TableRow from "@material-ui/core/TableRow";\nimport Paper from "@material-ui/core/Paper";\nimport Checkbox from "@material-ui/core/Checkbox";\nimport FormControlLabel from "@material-ui/core/FormControlLabel";\nimport Switch from "@material-ui/core/Switch";\nimport { EnhancedTableToolbar } from "./EnhancedTableToolbars";\nimport EnhancedTableHead from "./EnhancedTableHeads";\n\nfunction descendingComparator(a, b, orderBy) {\n if (b[orderBy] < a[orderBy]) {\n return -1;\n }\n if (b[orderBy] > a[orderBy]) {\n return 1;\n }\n return 0;\n}\n\nfunction getComparator(order, orderBy) {\n return order === "desc"\n ? (a, b) => descendingComparator(a, b, orderBy)\n : (a, b) => -descendingComparator(a, b, orderBy);\n}\n\nfunction stableSort(array, comparator) {\n const stabilizedThis = array.map((el, index) => [el, index]);\n stabilizedThis.sort((a, b) => {\n const order = comparator(a[0], b[0]);\n if (order !== 0) return order;\n return a[1] - b[1];\n });\n return stabilizedThis.map((el) => el[0]);\n}\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: "100%",\n },\n paper: {\n width: "100%",\n marginBottom: theme.spacing(2),\n },\n table: {\n minWidth: "200px",\n },\n visuallyHidden: {\n border: 0,\n clip: "rect(0 0 0 0)",\n height: 1,\n margin: -1,\n overflow: "hidden",\n padding: 0,\n position: "absolute",\n top: 20,\n width: 1,\n },\n}));\n\nexport default function EnhancedTable() {\n const data = [\n {\n id: 1,\n name: "Leesang",\n age: "25",\n Gender: "Genderder",\n },\n {\n id: 2,\n name: "chldms",\n age: "27",\n Gender: "Genderder",\n },\n {\n id: 3,\n name: "dlsmzl",\n age: "11",\n Gender: "Genderder",\n },\n {\n id: 4,\n name: "dlsmcl",\n age: "35",\n Gender: "Genderder",\n },\n {\n id: 5,\n name: "sdafldsm",\n age: "25",\n Gender: "Genderder",\n },\n {\n id: 6,\n name: "lsdmafas",\n age: "27",\n Gender: "Genderder",\n },\n ];\n const [rows, setRows] = useState(data);\n\n const classes = useStyles();\n const [order, setOrder] = React.useState("asc");\n const [orderBy, setOrderBy] = React.useState("Age");\n const [selected, setSelected] = React.useState([]);\n const [page, setPage] = React.useState(0);\n const [dense, setDense] = React.useState(false);\n const [rowsPerPage, setRowsPerPage] = React.useState(5);\n console.log(selected);\n const handleRequestSort = (event, property) => {\n const isAsc = orderBy === property && order === "asc";\n setOrder(isAsc ? "desc" : "asc");\n setOrderBy(property);\n };\n\n const handleSelectAllClick = (event) => {\n if (event.target.checked) {\n const newSelecteds = rows.map((n) => n.id);\n setSelected(newSelecteds);\n return;\n }\n setSelected([]);\n };\n\n const handleClick = (event, id) => {\n const selectedIndex = selected.indexOf(id);\n let newSelected = [];\n\n if (selectedIndex === -1) {\n newSelected = newSelected.concat(selected, id);\n } else if (selectedIndex === 0) {\n newSelected = newSelected.concat(selected.slice(1));\n } else if (selectedIndex === selected.length - 1) {\n newSelected = newSelected.concat(selected.slice(0, -1));\n } else if (selectedIndex > 0) {\n newSelected = newSelected.concat(\n selected.slice(0, selectedIndex),\n selected.slice(selectedIndex + 1)\n );\n }\n\n setSelected(newSelected);\n };\n\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n\n const handleChangeDense = (event) => {\n setDense(event.target.checked);\n };\n\n const isSelected = (name) => selected.indexOf(name) !== -1;\n\n const emptyRows =\n rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);\n\n return (\n <div className={classes.root}>\n <Paper className={classes.paper}>\n <EnhancedTableToolbar\n rows={rows}\n setRows={setRows}\n selected={selected}\n numSelected={selected.length}\n />\n <TableContainer>\n <Table\n className={classes.table}\n aria-labelledby="tableTitle"\n size={dense ? "small" : "medium"}\n aria-label="enhanced table"\n >\n <EnhancedTableHead\n classes={classes}\n numSelected={selected.length}\n order={order}\n orderBy={orderBy}\n onSelectAllClick={handleSelectAllClick}\n onRequestSort={handleRequestSort}\n rowCount={rows.length}\n />\n <TableBody>\n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.id);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n <TableRow\n hover\n onClick={(event) => handleClick(event, row.id)}\n role="checkbox"\n aria-checked={isItemSelected}\n tabIndex={-1}\n key={row.id}\n selected={isItemSelected}\n >\n <TableCell padding="checkbox">\n <Checkbox\n checked={isItemSelected}\n inputProps={{ "aria-labelledby": labelId }}\n />\n </TableCell>\n <TableCell\n component="th"\n id={labelId}\n scope="row"\n padding="none"\n >\n {row.name}\n </TableCell>\n <TableCell align="right">{row.age}</TableCell>\n <TableCell align="right">{row.Gender}</TableCell>\n </TableRow>\n );\n })}\n {emptyRows > 0 && (\n <TableRow style={{ height: (dense ? 33 : 53) * emptyRows }}>\n <TableCell colSpan={6} />\n </TableRow>\n )}\n </TableBody>\n </Table>\n </TableContainer>\n <TablePagination\n rowsPerPageOptions={[5, 10, 25]}\n component="div"\n count={rows.length}\n rowsPerPage={rowsPerPage}\n page={page}\n onChangePage={handleChangePage}\n onChangeRowsPerPage={handleChangeRowsPerPage}\n />\n </Paper>\n <FormControlLabel\n control={<Switch checked={dense} onChange={handleChangeDense} />}\n label="Dense padding"\n />\n </div>\n );\n}\n\n//////////////////////////////////////////////////////////////////////////////////////////////////\nimport React from "react";\nimport PropTypes from "prop-types";\nimport TableHead from "@material-ui/core/TableHead";\nimport TableSortLabel from "@material-ui/core/TableSortLabel";\nimport TableCell from "@material-ui/core/TableCell";\nimport TableRow from "@material-ui/core/TableRow";\nimport Checkbox from "@material-ui/core/Checkbox";\nconst headCells = [\n {\n id: "name",\n numeric: false,\n disablePadding: true,\n label: "Dessert\xc2\xa0(100g serving)",\n },\n { id: "age", numeric: true, disablePadding: false, label: "age" },\n { id: "Gender", numeric: true, disablePadding: false, label: "Gender" },\n];\n\nfunction EnhancedTableHead(props) {\n const {\n classes,\n onSelectAllClick,\n order,\n orderBy,\n numSelected,\n rowCount,\n onRequestSort,\n } = props;\n const createSortHandler = (property) => (event) => {\n onRequestSort(event, property);\n };\n\n return (\n <TableHead>\n <TableRow>\n <TableCell padding="checkbox">\n <Checkbox\n indeterminate={numSelected > 0 && numSelected < rowCount}\n checked={rowCount > 0 && numSelected === rowCount}\n onChange={onSelectAllClick}\n inputProps={{ "aria-label": "select all desserts" }}\n />\n </TableCell>\n {headCells.map((headCell) => (\n <TableCell\n key={headCell.id}\n align={headCell.numeric ? "right" : "left"}\n padding={headCell.disablePadding ? "none" : "default"}\n sortDirection={orderBy === headCell.id ? order : false}\n >\n <TableSortLabel\n active={orderBy === headCell.id}\n direction={orderBy === headCell.id ? order : "asc"}\n onClick={createSortHandler(headCell.id)}\n >\n {headCell.label}\n {orderBy === headCell.id ? (\n <span className={classes.visuallyHidden}>\n {order === "desc" ? "sorted descending" : "sorted ascending"}\n </span>\n ) : null}\n </TableSortLabel>\n </TableCell>\n ))}\n </TableRow>\n </TableHead>\n );\n}\n\nEnhancedTableHead.propTypes = {\n classes: PropTypes.object.isRequired,\n numSelected: PropTypes.number.isRequired,\n onRequestSort: PropTypes.func.isRequired,\n onSelectAllClick: PropTypes.func.isRequired,\n order: PropTypes.oneOf(["asc", "desc"]).isRequired,\n orderBy: PropTypes.string.isRequired,\n rowCount: PropTypes.number.isRequired,\n};\nexport default EnhancedTableHead;\n\n//////////////////////////////////////////////////////////////////////////////////////////\nimport React, { useEffect, useState } from "react";\nimport PropTypes from "prop-types";\nimport clsx from "clsx";\nimport Toolbar from "@material-ui/core/Toolbar";\nimport Typography from "@material-ui/core/Typography";\nimport IconButton from "@material-ui/core/IconButton";\nimport Tooltip from "@material-ui/core/Tooltip";\nimport DeleteIcon from "@material-ui/icons/Delete";\nimport FilterListIcon from "@material-ui/icons/FilterList";\nimport { lighten, makeStyles } from "@material-ui/core";\nimport { makeStyles as inputMakeStyled } from "@material-ui/core/styles";\nimport TextField from "@material-ui/core/TextField";\nconst useToolbarStyles = makeStyles((theme) => ({\n root: {\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(1),\n },\n highlight:\n theme.palette.type === "light"\n ? {\n color: theme.palette.secondary.main,\n backgroundColor: lighten(theme.palette.secondary.light, 0.85),\n }\n : {\n color: theme.palette.text.primary,\n backgroundColor: theme.palette.secondary.dark,\n },\n title: {\n flex: "1 1 100%",\n },\n}));\nconst useStyles = inputMakeStyled((theme) => ({\n root: {\n "& > *": {\n margin: theme.spacing(1),\n width: "25ch",\n },\n },\n}));\nexport const EnhancedTableToolbar = (props) => {\n const classes = useToolbarStyles();\n const inputClasses = useStyles();\n const { numSelected, selected, setRows, rows } = props;\n const [selecNum, setSelecNum] = useState(numSelected);\n useEffect(() => {\n setSelecNum(numSelected);\n }, [numSelected]);\n const onRemove = () => {\n const reMoveRow = rows.filter((row) => !selected.includes(row.id));\n\n setRows(reMoveRow);\n setSelecNum(0);\n };\n return (\n <Toolbar\n className={clsx(classes.root, {\n [classes.highlight]: selecNum > 0,\n })}\n >\n {selecNum > 0 ? (\n <Typography\n className={classes.title}\n color="inherit"\n variant="subtitle1"\n component="div"\n >\n {selecNum} selected\n </Typography>\n ) : (\n <Typography\n className={classes.title}\n variant="h6"\n id="tableTitle"\n component="div"\n >\n Nutrition\n </Typography>\n )}\n <form className={inputClasses.root} noValidate autoComplete="off">\n <TextField id="outlined-basic" label="Search" variant="outlined" />\n </form>\n {selecNum > 0 ? (\n <Tooltip title="Delete">\n <IconButton onClick={onRemove} aria-label="delete">\n <DeleteIcon />\n </IconButton>\n </Tooltip>\n ) : (\n <Tooltip title="Filter list">\n <IconButton aria-label="filter list">\n <FilterListIcon />\n </IconButton>\n </Tooltip>\n )}\n </Toolbar>\n );\n};\n\nEnhancedTableToolbar.propTypes = {\n numSelected: PropTypes.number.isRequired,\n};\n...................................................... ...................................................... ...................................................... ...................................................... ..
\n我想使用material-ui表实现表搜索功能。如何实现在表中搜索数据的功能？Material-ui中有没有带搜索功能的API？我找不到它。我需要你的帮助。
\n...................................................... ...................................................... ...................................................... ...................................................... ..
\n| 归档时间： |
|
| 查看次数： |
26172 次 |
| 最近记录： |