WEBAPP: Пример P8PDataGrid дополнен переключателем "Кнопка догрузки/старницы"

app/panels/samples/data_grid.js

@@ -7,9 +7,9 @@
 //Подключение библиотек
 //---------------------
 
-import React, { useContext } from "react"; //Классы React
+import React, { useContext, useState } from "react"; //Классы React
 import PropTypes from "prop-types"; //Контроль свойств компонента
-import { Typography, Grid, Stack, Icon, Box, Button } from "@mui/material"; //Интерфейсные элементы
+import { Typography, Grid, Stack, Icon, Box, Button, FormControlLabel, Checkbox } from "@mui/material"; //Интерфейсные элементы
 import { P8PDataGrid, P8P_DATA_GRID_SIZE, useP8PDataGrid } from "../../components/p8p_data_grid"; //Таблица данных
 import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
 import { ApplicationCtx } from "../../context/application"; //Контекст приложения
@@ -84,10 +84,14 @@ export const groupCellRender = () => ({ cellStyle: { padding: "2px" } });
 
 //Пример: Таблица данных "P8PDataGrid"
 const DataGrid = ({ title }) => {
+    //Собственное состояние - использование кнопки догрузки данных
+    const [useMoreButton, setUseMoreButton] = useState(false);
+
     //Собственное состояние - таблица данных
-    const { dataGrid, isDataLoaded, handleFilterChanged, handleOrderChanged, handlePageChange } = useP8PDataGrid({
+    const { dataGrid, isDataLoaded, handleFilterChanged, handleOrderChanged, handlePageChange, handlePagesCountChanged } = useP8PDataGrid({
         stored: "PKG_P8PANELS_SAMPLES.DATA_GRID",
-        pageSize: DATA_GRID_PAGE_SIZE
+        pageSize: DATA_GRID_PAGE_SIZE,
+        storedArgs: { NUSE_MORE_BUTTON: useMoreButton ? 1 : 0 }
     });
 
     //Подключение к контексту приложения
@@ -102,6 +106,11 @@ const DataGrid = ({ title }) => {
             <Typography sx={STYLES.TITLE} variant={"h6"}>
                 {title}
             </Typography>
+            <FormControlLabel
+                sx={STYLES.CONTROL}
+                control={<Checkbox onChange={() => setUseMoreButton(!useMoreButton)} />}
+                label="Отображать кнопку догрузки"
+            />
             <Grid container spacing={1} pt={5}>
                 <Grid item xs={12}>
                     <Box p={5} display="flex" justifyContent="center" alignItems="center">
@@ -121,6 +130,7 @@ const DataGrid = ({ title }) => {
                                     <Button onClick={() => handleAgnButtonClicked(row.SAGNABBR)}>Показать в разделе</Button>
                                 )}
                                 onPageChanged={handlePageChange}
+                                onPagesCountChanged={handlePagesCountChanged}
                             />
                         ) : null}
                     </Box>

db/PKG_P8PANELS_SAMPLES.pck

@@ -25,6 +25,7 @@ create or replace package PKG_P8PANELS_SAMPLES as
   (
     NPAGE_NUMBER            in number, -- Номер страницы (игнорируется при NPAGE_SIZE=0)
     NPAGE_SIZE              in number, -- Количество записей на странице (0 - все)
+    NUSE_MORE_BUTTON        in number, -- Использовать кнопку догрузки данных (0 - нет, 1 - да)
     CFILTERS                in clob,   -- Фильтры
     CORDERS                 in clob,   -- Сортировки
     NINCLUDE_DEF            in number, -- Признак включения описания колонок таблицы в ответ
@@ -257,6 +258,7 @@ create or replace package body PKG_P8PANELS_SAMPLES as
   (
     NPAGE_NUMBER            in number,                             -- Номер страницы (игнорируется при NPAGE_SIZE=0)
     NPAGE_SIZE              in number,                             -- Количество записей на странице (0 - все)
+    NUSE_MORE_BUTTON        in number,                             -- Использовать кнопку догрузки данных (0 - нет, 1 - да)
     CFILTERS                in clob,                               -- Фильтры
     CORDERS                 in clob,                               -- Сортировки
     NINCLUDE_DEF            in number,                             -- Признак включения описания колонок таблицы в ответ
@@ -360,9 +362,9 @@ create or replace package body PKG_P8PANELS_SAMPLES as
     /* Инициализируем таблицу данных */
     RDG := PKG_P8PANELS_VISUAL.TDG_MAKE(BFIXED_HEADER   => true,
                                         NFIXED_COLUMNS  => 2,
-                                        NPAGES_COUNT    => 10,
                                         SPAGES_POSITION => PKG_P8PANELS_VISUAL.STABLE_PAGES_POSITION_BOTTOM,
-                                        SPAGES_ALIGN    => PKG_P8PANELS_VISUAL.STABLE_PAGES_ALIGN_RIGHT);
+                                        SPAGES_ALIGN    => PKG_P8PANELS_VISUAL.STABLE_PAGES_ALIGN_RIGHT,
+                                        BMORE_PAGES     => case NUSE_MORE_BUTTON when 1 then true else false end);
     /* Описываем колонки таблицы данных */
     PKG_P8PANELS_VISUAL.TDG_ADD_COL_DEF(RDATA_GRID => RDG,
                                         SNAME      => 'SAGNABBR',
@@ -522,11 +524,13 @@ create or replace package body PKG_P8PANELS_SAMPLES as
         raise;
     end;
     /* Определяем количество отображаемых страниц */
-    NPAGES_COUNT := PAGES_COUNT_GET(NCOMPANY => NCOMPANY, RDG => RDG, RFILTERS => RF, NPAGE_SIZE => NPAGE_SIZE);
+    if (NUSE_MORE_BUTTON = 0) then
-    /* Если количество страниц определено */
+      NPAGES_COUNT := PAGES_COUNT_GET(NCOMPANY => NCOMPANY, RDG => RDG, RFILTERS => RF, NPAGE_SIZE => NPAGE_SIZE);
-    if (NPAGES_COUNT is not null) then
+      /* Если количество страниц определено */
-      /* Устанавливаем количество отображаемых страниц */
+      if (NPAGES_COUNT is not null) then
-      PKG_P8PANELS_VISUAL.TDG_PAGES_COUNT_SET(RDATA_GRID => RDG, NPAGES_COUNT => NPAGES_COUNT);
+        /* Устанавливаем количество отображаемых страниц */
+        PKG_P8PANELS_VISUAL.TDG_PAGES_COUNT_SET(RDATA_GRID => RDG, NPAGES_COUNT => NPAGES_COUNT);
+      end if;
     end if;
     /* Сериализуем описание */
     COUT := PKG_P8PANELS_VISUAL.TDG_TO_XML(RDATA_GRID => RDG, NINCLUDE_DEF => NINCLUDE_DEF);