From 6d10f6258bc7234fee09a12c2bffe4a6c47c8f38 Mon Sep 17 00:00:00 2001 From: Mikhail Chechnev Date: Fri, 14 Feb 2025 14:09:36 +0300 Subject: [PATCH] =?UTF-8?q?WEBAPP:=20P8PDataGrid=20-=20=D0=BD=D0=B5=D0=BE?= =?UTF-8?q?=D0=B1=D1=8F=D0=B7=D0=B0=D1=82=D0=B5=D0=BB=D1=8C=D0=BD=D0=BE?= =?UTF-8?q?=D1=81=D1=82=D1=8C=20=D0=B4=D0=BB=D1=8F=20columnsDef,=20rows,?= =?UTF-8?q?=20=D0=B7=D0=BD=D0=B0=D1=87=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BF?= =?UTF-8?q?=D0=BE=20=D1=83=D0=BC=D0=BE=D0=BB=D1=87=D0=B0=D0=BD=D0=B8=D1=8E?= =?UTF-8?q?=20=D0=B4=D0=BB=D1=8F=20groups=20(=D1=82=D0=B0=D0=BA=20=D0=BC?= =?UTF-8?q?=D0=BE=D0=B6=D0=BD=D0=BE=20=D1=83=D0=BF=D1=80=D0=BE=D1=89=D0=B0?= =?UTF-8?q?=D1=82=D1=8C=20state=20=D0=B2=20=D0=B2=D0=B5=D1=80=D1=85=D0=BD?= =?UTF-8?q?=D0=B5=D1=83=D1=80=D0=BE=D0=B2=D0=BD=D0=B5=D0=B2=D1=8B=D1=85=20?= =?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D0=B0?= =?UTF-8?q?=D1=85)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 23 +++++++++-------------- app/components/p8p_data_grid.js | 10 +++++----- app/components/p8p_table.js | 6 +++--- app/panels/samples/data_grid.js | 19 +++++++------------ 4 files changed, 24 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index a74a831..65ccda3 100644 --- a/README.md +++ b/README.md @@ -1291,10 +1291,10 @@ const MyPanel = () => { **Свойства** -`columnsDef` - обязательный, массив, описание колонок таблицы, содержит объекты вида `{caption: <ЗАГОЛОВОК_КОЛОНКИ>, dataType: <ТИП_ДАННЫХ - NUMB|STR|DATE>, filter: <ПРИЗНАК_ВОЗМОЖНОСТИ_ОТБОРА - true|false>, hint: <ОПИСАНИЕ_КОЛОНКИ_МОЖЕТ_СОДЕРЖАТЬ_HTML_РАЗМЕТКУ>, name: <НАИМЕНОВАНИЕ_КОЛОНКИ>, order: <ПРИЗНАК_ВОЗМОЖНОСТИ_СОРТИРОВКИ - true|false>, values: <МАССИВ_ПРЕДОПРЕДЕЛЁННЫХ_ЗНАЧЕНИЙ>, visible: <ПРИЗНАК_ВИДИМОСТИ_КОЛОНКИ - true|false>,expandable: <ПРИЗНАК_РАЗВОРАЧИВАЕМОСТИ_ГРУППОВОГО_ЗАГОЛОВКА - true|false>, expanded: <ПРИЗНАК_РАЗВЕРНУТОСТИ_ГРУППОВОГО_ЗАГОЛОВКА - true|false>, parent: <НАИМЕНОВАНИЕ_РОДИТЕЛЬСКОЙ_КОЛОНКИ_В_ГРУППОВОМ_ЗАГОЛОВКЕ>, width: <ШИРИНА_КОЛОНКИ>}`\ +`columnsDef` - необязательный, массив, описание колонок таблицы, содержит объекты вида `{caption: <ЗАГОЛОВОК_КОЛОНКИ>, dataType: <ТИП_ДАННЫХ - NUMB|STR|DATE>, filter: <ПРИЗНАК_ВОЗМОЖНОСТИ_ОТБОРА - true|false>, hint: <ОПИСАНИЕ_КОЛОНКИ_МОЖЕТ_СОДЕРЖАТЬ_HTML_РАЗМЕТКУ>, name: <НАИМЕНОВАНИЕ_КОЛОНКИ>, order: <ПРИЗНАК_ВОЗМОЖНОСТИ_СОРТИРОВКИ - true|false>, values: <МАССИВ_ПРЕДОПРЕДЕЛЁННЫХ_ЗНАЧЕНИЙ>, visible: <ПРИЗНАК_ВИДИМОСТИ_КОЛОНКИ - true|false>,expandable: <ПРИЗНАК_РАЗВОРАЧИВАЕМОСТИ_ГРУППОВОГО_ЗАГОЛОВКА - true|false>, expanded: <ПРИЗНАК_РАЗВЕРНУТОСТИ_ГРУППОВОГО_ЗАГОЛОВКА - true|false>, parent: <НАИМЕНОВАНИЕ_РОДИТЕЛЬСКОЙ_КОЛОНКИ_В_ГРУППОВОМ_ЗАГОЛОВКЕ>, width: <ШИРИНА_КОЛОНКИ>}`\ `filtersInitial` - необязательныей, массив, начальное состояние фильтров таблицы, содержит объекты вида `{name: <НАИМЕНОВАНИЕ_КОЛОНКИ>, from: <НАЧАЛО_ДИАПАЗОНА_ЗНАЧЕНИЙ_ФИЛЬТРА>, to: <ОКОНЧАНИЕ_ДИАПАЗОНА_ЗНАЧЕНИЙ_ФИЛЬТРА>}`\ `groups` - необязательный, массив групп данных, содержит объекты вида `{name: <ИМЯ_ГРУППЫ>, caption: <ЗАГОЛОВОК_ГРУППЫ>, expandable: <ПРИЗНАК_РАЗВОРАЧИВАЕМОСТИ_ГРУППЫ - true|false>, expanded: <ПРИЗНАК_РАЗВЕРНУТОСТИ_ГРУППЫ - true|false>}`\ -`rows` - обязательный, массив, отображаемые таблицой строки данных, содержит объекты вида `{groupName: <ИМЯ_ГРУППЫ_СОДЕРЖАЩЕЙ_СТРОКУ>, <ИМЯ_КОЛОНКИ>: <ЗНАЧЕНИЕ>}`\ +`rows` - необязательный, массив, отображаемые таблицой строки данных, содержит объекты вида `{groupName: <ИМЯ_ГРУППЫ_СОДЕРЖАЩЕЙ_СТРОКУ>, <ИМЯ_КОЛОНКИ>: <ЗНАЧЕНИЕ>}`\ `size` - необязательный, строка, размер отступов при вёрстке таблицы, `small|medium` (см. константу `P8P_DATA_GRID_SIZE` в исходном коде компонента)\ `fixedHeader` - необязательный, логический, признак фиксации заголовка таблицы, по умолчанию - `false`\ `fixedColumns` - необязательный, число, количество фиксированных колонок слева, по умолчанию - 0\ @@ -1635,16 +1635,12 @@ const DataGrid = ({ title }) => { //Собственное состояние - таблица данных const [dataGrid, setDataGrid] = useState({ dataLoaded: false, - columnsDef: [], filters: null, orders: null, - groups: [], - rows: [], - reloading: true, pageNumber: 1, morePages: true, - fixedHeader: false, - fixedColumns: 0 + expandable: true, + reloading: true }); //Подключение к контексту взаимодействия с сервером @@ -1670,13 +1666,13 @@ const DataGrid = ({ title }) => { setDataGrid(pv => ({ ...pv, ...data.XDATA_GRID, - columnsDef: data.XDATA_GRID.columnsDef ? [...data.XDATA_GRID.columnsDef] : pv.columnsDef, - rows: pv.pageNumber == 1 ? [...(data.XDATA_GRID.rows || [])] : [...pv.rows, ...(data.XDATA_GRID.rows || [])], + columnsDef: data.XDATA_GRID.columnsDef ? [...data.XDATA_GRID.columnsDef] : pv.columnsDef || [], + rows: pv.pageNumber == 1 ? [...(data.XDATA_GRID.rows || [])] : [...(pv.rows || []), ...(data.XDATA_GRID.rows || [])], groups: data.XDATA_GRID.groups ? pv.pageNumber == 1 ? [...data.XDATA_GRID.groups] - : [...pv.groups, ...data.XDATA_GRID.groups.filter(g => !pv.groups.find(pg => pg.name == g.name))] - : [...pv.groups], + : [...(pv.groups || []), ...data.XDATA_GRID.groups.filter(g => !pv.groups.find(pg => pg.name == g.name))] + : [...(pv.groups || [])], dataLoaded: true, reloading: false, morePages: (data.XDATA_GRID.rows || []).length >= DATA_GRID_PAGE_SIZE @@ -1713,9 +1709,9 @@ const DataGrid = ({ title }) => { {dataGrid.dataLoaded ? ( { onOrderChanged={handleOrderChanged} onFilterChanged={handleFilterChanged} onPagesCountChanged={handlePagesCountChanged} - expandable={true} rowExpandRender={({ row }) => ( )} diff --git a/app/components/p8p_data_grid.js b/app/components/p8p_data_grid.js index fc743cc..3107f2e 100644 --- a/app/components/p8p_data_grid.js +++ b/app/components/p8p_data_grid.js @@ -36,10 +36,10 @@ const P8P_DATA_GRID_FILTERS_HEIGHT = P8P_TABLE_FILTERS_HEIGHT; //Таблица данных const P8PDataGrid = ({ - columnsDef, + columnsDef = [], filtersInitial, - groups, - rows, + groups = [], + rows = [], size, fixedHeader = false, fixedColumns = 0, @@ -154,10 +154,10 @@ const P8PDataGrid = ({ //Контроль свойств - Таблица данных P8PDataGrid.propTypes = { - columnsDef: PropTypes.array.isRequired, + columnsDef: PropTypes.array, filtersInitial: PropTypes.arrayOf(P8P_DATA_GRID_FILTER_SHAPE), groups: PropTypes.array, - rows: PropTypes.array.isRequired, + rows: PropTypes.array, size: PropTypes.string, fixedHeader: PropTypes.bool, fixedColumns: PropTypes.number, diff --git a/app/components/p8p_table.js b/app/components/p8p_table.js index 0cb7c34..e3fa147 100644 --- a/app/components/p8p_table.js +++ b/app/components/p8p_table.js @@ -488,9 +488,9 @@ P8PTableFiltersChips.propTypes = { //Таблица const P8PTable = ({ - columnsDef, - groups, - rows, + columnsDef = [], + groups = [], + rows = [], orders, filters, size, diff --git a/app/panels/samples/data_grid.js b/app/panels/samples/data_grid.js index 9421d03..f7009f0 100644 --- a/app/panels/samples/data_grid.js +++ b/app/panels/samples/data_grid.js @@ -89,16 +89,12 @@ const DataGrid = ({ title }) => { //Собственное состояние - таблица данных const [dataGrid, setDataGrid] = useState({ dataLoaded: false, - columnsDef: [], filters: null, orders: null, - groups: [], - rows: [], - reloading: true, pageNumber: 1, morePages: true, - fixedHeader: false, - fixedColumns: 0 + expandable: true, + reloading: true }); //Подключение к контексту взаимодействия с сервером @@ -124,13 +120,13 @@ const DataGrid = ({ title }) => { setDataGrid(pv => ({ ...pv, ...data.XDATA_GRID, - columnsDef: data.XDATA_GRID.columnsDef ? [...data.XDATA_GRID.columnsDef] : pv.columnsDef, - rows: pv.pageNumber == 1 ? [...(data.XDATA_GRID.rows || [])] : [...pv.rows, ...(data.XDATA_GRID.rows || [])], + columnsDef: data.XDATA_GRID.columnsDef ? [...data.XDATA_GRID.columnsDef] : pv.columnsDef || [], + rows: pv.pageNumber == 1 ? [...(data.XDATA_GRID.rows || [])] : [...(pv.rows || []), ...(data.XDATA_GRID.rows || [])], groups: data.XDATA_GRID.groups ? pv.pageNumber == 1 ? [...data.XDATA_GRID.groups] - : [...pv.groups, ...data.XDATA_GRID.groups.filter(g => !pv.groups.find(pg => pg.name == g.name))] - : [...pv.groups], + : [...(pv.groups || []), ...data.XDATA_GRID.groups.filter(g => !pv.groups.find(pg => pg.name == g.name))] + : [...(pv.groups || [])], dataLoaded: true, reloading: false, morePages: (data.XDATA_GRID.rows || []).length >= DATA_GRID_PAGE_SIZE @@ -167,9 +163,9 @@ const DataGrid = ({ title }) => { {dataGrid.dataLoaded ? ( { onOrderChanged={handleOrderChanged} onFilterChanged={handleFilterChanged} onPagesCountChanged={handlePagesCountChanged} - expandable={true} rowExpandRender={({ row }) => ( )}