davay-popozhe/P8-Panels
1
0
Fork 0
forked from CITKParus/P8-Panels
Code Issues Pull Requests Projects Releases Wiki Activity

WEB APP: Примеры для разработчиков - пример таблицы данных дополнен фиксированными колонками и заголовком, разворачивающейся областью

Browse Source
This commit is contained in:
Mikhail Chechnev 2024-05-04 15:23:27 +03:00
parent 55e98dcad0
commit 6ffd82e864
1 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/panels/samples/data_grid.js
View File

@ -9,11 +9,12 @@
import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента import PropTypes from "prop-types"; //Контроль свойств компонента
import { Typography, Grid, Stack, Icon, Box } from "@mui/material"; //Интерфейсные элементы import { Typography, Grid, Stack, Icon, Box, Button } from "@mui/material"; //Интерфейсные элементы
import { object2Base64XML } from "../../core/utils"; //Вспомогательные процедуры и функции import { object2Base64XML } from "../../core/utils"; //Вспомогательные процедуры и функции
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
import { ApplicationСtx } from "../../context/application"; //Контекст приложения
//--------- //---------
//Константы //Константы
@ -25,7 +26,8 @@ const DATA_GRID_PAGE_SIZE = 5;
//Стили //Стили
const STYLES = { const STYLES = {
CONTAINER: { textAlign: "center", paddingTop: "20px" }, CONTAINER: { textAlign: "center", paddingTop: "20px" },
TITLE: { paddingBottom: "15px" } TITLE: { paddingBottom: "15px" },
DATA_GRID_CONTAINER: { maxWidth: 700, maxHeight: 500, minHeight: 500 }
}; };
//--------------------------------------------- //---------------------------------------------
@ -93,12 +95,17 @@ const DataGrid = ({ title }) => {
rows: [], rows: [],
reload: true, reload: true,
pageNumber: 1, pageNumber: 1,
morePages: true morePages: true,
fixedHeader: false,
fixedColumns: 0
}); });
//Подключение к контексту взаимодействия с сервером //Подключение к контексту взаимодействия с сервером
const { executeStored, SERV_DATA_TYPE_CLOB } = useContext(BackEndСtx); const { executeStored, SERV_DATA_TYPE_CLOB } = useContext(BackEndСtx);
//Подключение к контексту приложения
const { pOnlineShowDocument } = useContext(ApplicationСtx);
//Загрузка данных таблицы с сервера //Загрузка данных таблицы с сервера
const loadData = useCallback(async () => { const loadData = useCallback(async () => {
if (dataGrid.reload) { if (dataGrid.reload) {
@ -115,6 +122,8 @@ const DataGrid = ({ title }) => {
}); });
setdataGrid(pv => ({ setdataGrid(pv => ({
...pv, ...pv,
fixedHeader: data.XDATA_GRID.fixedHeader,
fixedColumns: data.XDATA_GRID.fixedColumns,
columnsDef: data.XCOLUMNS_DEF ? [...data.XCOLUMNS_DEF] : pv.columnsDef, columnsDef: data.XCOLUMNS_DEF ? [...data.XCOLUMNS_DEF] : pv.columnsDef,
rows: pv.pageNumber == 1 ? [...(data.XROWS || [])] : [...pv.rows, ...(data.XROWS || [])], rows: pv.pageNumber == 1 ? [...(data.XROWS || [])] : [...pv.rows, ...(data.XROWS || [])],
groups: data.XGROUPS groups: data.XGROUPS
@ -138,6 +147,9 @@ const DataGrid = ({ title }) => {
//При изменении количества отображаемых страниц //При изменении количества отображаемых страниц
const handlePagesCountChanged = () => setdataGrid(pv => ({ ...pv, pageNumber: pv.pageNumber + 1, reload: true })); const handlePagesCountChanged = () => setdataGrid(pv => ({ ...pv, pageNumber: pv.pageNumber + 1, reload: true }));
//При нажатии на копку контрагента
const handleAgnButtonClicked = agnCode => pOnlineShowDocument({ unitCode: "AGNLIST", document: agnCode, inRnParameter: "in_AGNABBR" });
//При необходимости обновить данные таблицы //При необходимости обновить данные таблицы
useEffect(() => { useEffect(() => {
loadData(); loadData();
@ -151,14 +163,17 @@ const DataGrid = ({ title }) => {
</Typography> </Typography>
<Grid container spacing={1} pt={5}> <Grid container spacing={1} pt={5}>
<Grid item xs={12}> <Grid item xs={12}>
<Box p={5}> <Box p={5} display="flex" justifyContent="center" alignItems="center">
{dataGrid.dataLoaded ? ( {dataGrid.dataLoaded ? (
<P8PDataGrid <P8PDataGrid
{...P8P_DATA_GRID_CONFIG_PROPS} {...P8P_DATA_GRID_CONFIG_PROPS}
containerComponentProps={{ elevation: 6, style: STYLES.DATA_GRID_CONTAINER }}
columnsDef={dataGrid.columnsDef} columnsDef={dataGrid.columnsDef}
groups={dataGrid.groups} groups={dataGrid.groups}
rows={dataGrid.rows} rows={dataGrid.rows}
size={P8P_DATA_GRID_SIZE.LARGE} size={P8P_DATA_GRID_SIZE.LARGE}
fixedHeader={dataGrid.fixedHeader}
fixedColumns={dataGrid.fixedColumns}
filtersInitial={dataGrid.filters} filtersInitial={dataGrid.filters}
morePages={dataGrid.morePages} morePages={dataGrid.morePages}
reloading={dataGrid.reload} reloading={dataGrid.reload}
@ -169,6 +184,10 @@ const DataGrid = ({ title }) => {
onOrderChanged={handleOrderChanged} onOrderChanged={handleOrderChanged}
onFilterChanged={handleFilterChanged} onFilterChanged={handleFilterChanged}
onPagesCountChanged={handlePagesCountChanged} onPagesCountChanged={handlePagesCountChanged}
expandable={true}
rowExpandRender={({ row }) => (
<Button onClick={() => handleAgnButtonClicked(row.SAGNABBR)}>Показать в разделе</Button>
)}
/> />
) : null} ) : null}
</Box> </Box>