Разработчикам

Использование bitrix.ui.grid

RSS

Использование bitrix.ui.grid, Ломается страница при использовании компонента

Пользователь 8067868

Заглянувший

Сообщений: 7 Регистрация: 08.04.2024

18.04.2024 15:09:02

Я хочу использовать таблицу с сортировкой, вставил php в код страницы, но получаю нерабочие чекбоксы и кнопки в строках, при этом режим правки перестает как либо реагировать на страницу

Код компонента:

Код

<?php 
use \Bitrix\Main\Grid\Options;
use \Bitrix\Main\UI\PageNavigation;

$gridId = 'our_custom_grid_id';

$gridOptions = new Options($gridId);

$sort = $gridOptions->GetSorting([
   'sort' => ['ID' => 'DESC'],
   'vars' => ['by' => 'by', 'order' => 'order']
]);
$navOption = $gridOptions->GetNavParams();

$pageSizes = [ 
   ['NAME' => "5", 'VALUE' => '5'], 
   ['NAME' => '10', 'VALUE' => '10'], 
   ['NAME' => '20', 'VALUE' => '20'], 
   ['NAME' => '50', 'VALUE' => '50'], 
   ['NAME' => '100', 'VALUE' => '100'] 
];

$nav = (new PageNavigation('our_custom_grid_nav'))
   ->allowAllRecords(false)
   ->setPageSize($navOption['nPageSize'])
   ->setPageSizes($pageSizes)
   ;

$nav->initFromUri();

$columns = [
   ['id' => 'ID', 'name' => '№ Заявки', 'sort' => 'ID', 'default' => true], 
   ['id' => 'DATE', 'name' => 'Дата регистрации', 'sort' => 'DATE', 'default' => true], 
   ['id' => 'STATUS', 'name' => 'Статус', 'sort' => 'STATUS', 'default' => true],  
];

$list = [
   [
      'id'   => 'unique_row_id_1',
      'data' => [
         'ID'          => '68-23-цкп',
         'DATE'        => '06.12.23',
         '~DATE'       => '',
         'STATUS'      => 'Выполнена',
         '~STATUS'     => 'Выполнена',

      ],
      'actions' => [
         [
            'text'    => 'Редактировать',
            'onclick' => 'document.location.href="/accountant/reports/1/edit/"'
         ],
         [
            'text'    => 'Удалить',
            'onclick' => 'document.location.href="/accountant/reports/1/delete/"'
         ]
      ],
   ],
   [
      'id'   => 'unique_row_id_2',
      'data' => [
         'ID'          => '67-23-цкп',
         'DATE'        => '21.12.23',
         '~DATE'       => '',
         'STATUS'      => 'В работе',
         '~STATUS'     => 'В|работе',

      ],
      'actions' => [
         [
            'text'    => 'Редактировать',
            'onclick' => 'document.location.href="/accountant/reports/1/edit/"'
         ],
         [
            'text'    => 'Удалить',
            'onclick' => 'document.location.href="/accountant/reports/1/delete/"'
         ]
      ],
   ],
   [
      'id'   => 'unique_row_id_3',
      'data' => [
         'ID'          => '69-23-цкп',
         'DATE'        => '21.12.23',
         '~DATE'       => '',
         'STATUS'      => 'В работе',
         '~STATUS'     => 'В|работе',

      ],
      'actions' => [
         [
            'text'    => 'Редактировать',
            'onclick' => 'document.location.href="/accountant/reports/1/edit/"'
         ],
         [
            'text'    => 'Удалить',
            'onclick' => 'document.location.href="/accountant/reports/1/delete/"'
         ]
      ],
   ],
   [
      'id'   => 'unique_row_id_4',
      'data' => [
         'ID'          => '70-24-цкп',
         'DATE'        => '16.01.24',
         '~DATE'       => '',
         'STATUS'      => 'В работе',
         '~STATUS'     => 'В|работе',

      ],
      'actions' => [
         [
            'text'    => 'Редактировать',
            'onclick' => 'document.location.href="/accountant/reports/1/edit/"'
         ],
         [
            'text'    => 'Удалить',
            'onclick' => 'document.location.href="/accountant/reports/1/delete/"'
         ]
      ],
   ],
   [
      'id'   => 'unique_row_id_5',
      'data' => [
         'ID'          => '71-24-цкп',
         'DATE'        => '29.01.24',
         '~DATE'       => '',
         'STATUS'      => 'В работе',
         '~STATUS'     => 'В|работе',

      ],
      'actions' => [
         [
            'text'    => 'Редактировать',
            'onclick' => 'document.location.href="/accountant/reports/1/edit/"'
         ],
         [
            'text'    => 'Удалить',
            'onclick' => 'document.location.href="/accountant/reports/1/delete/"'
         ]
      ],
   ],
   [
      'id'   => 'unique_row_id_6',
      'data' => [
         'ID'          => '72-24-цкп',
         'DATE'        => '12.02.24',
         '~DATE'       => '',
         'STATUS'      => 'В работе',
         '~STATUS'     => 'В|работе',

      ],
      'actions' => [
         [
            'text'    => 'Редактировать',
            'onclick' => 'document.location.href="/accountant/reports/1/edit/"'
         ],
         [
            'text'    => 'Удалить',
            'onclick' => 'document.location.href="/accountant/reports/1/delete/"'
         ]
      ],
   ],
];

$APPLICATION->IncludeComponent(
   'bitrix:main.ui.grid',
   '',
   [
      'GRID_ID'    => $gridId,
      'COLUMNS'    => $columns, 
      'ROWS'       => $list,
      'NAV_OBJECT' => $nav, 

      'AJAX_MODE' => 'Y', 
      'AJAX_ID'   => \CAjax::getComponentID('bitrix:main.ui.grid', '.default', ''), 
      'AJAX_OPTION_JUMP'          => 'N', 
      'AJAX_OPTION_HISTORY'       => 'N' ,

      'SHOW_ROW_CHECKBOXES' => true, 
      'SHOW_CHECK_ALL_CHECKBOXES' => true, 
      'SHOW_ROW_ACTIONS_MENU'     => true, 
      'SHOW_GRID_SETTINGS_MENU'   => true, 
      'SHOW_NAVIGATION_PANEL'     => false, 
      'SHOW_PAGINATION'           => false, 

      'SHOW_SELECTED_COUNTER'     => false, 
      'SHOW_TOTAL_COUNTER'        => false, 
      'SHOW_PAGESIZE'             => false, 
      'ALLOW_COLUMNS_SORT'        => true, 
      'ALLOW_COLUMNS_RESIZE'      => false, 
      'ALLOW_HORIZONTAL_SCROLL'   => false, 
      'ALLOW_SORT'                => true, 
      'ALLOW_PIN_HEADER'          => false, 
   ]
);
?>

Прикрепил скрин получившийся, подскажите с чем проблема, я только начал изучать битрикс, в гугле решения не нашел(

Снизу компонент, до этого идет обычная верстка, хочу чтобы была возможность визуальным редактором добавлять строчки в него

Прикрепленные файлы

Снимок экрана 2024-04-18 150755.png (60.64 КБ)

Пользователь 8067868 Заглянувший Сообщений: 7 Регистрация: 08.04.2024	#2 18.04.2024 15:57:43 В консоли ошибка Uncaught BX.Main.grid.init: Failed to find table

Пользователь 114926

Постоянный посетитель

Сообщений: 368 Баллов: 40 Регистрация: 13.08.2012

21.04.2024 23:59:09

1. Сортировку вам придется самому делать на сервере, параметры ее вы получите из переменной $sort, в соответствии с ними пересортируете массив $list
2. скрипт работающий, хоть и устаревший. Единственное, нужно ALLOW_HORIZONTAL_SCROLL передать true, иначе в js ошибка. Скопипастил на пустую страницу, работает. Причина ошибки у вас где-то еще.
3. "хочу чтобы была возможность визуальным редактором добавлять строчки в него" - вообще то этот компонент для того, чтобы выводить сущности из БД. Можно, наверное, и такое реализовать - если скрипт прочитает на диске файл, в котором он вызывается, спарсит html код и найдет скрытую (display:none) статическую таблицу, в которую вы визуальным редактором добавляли строки, сформирует из html кода этой таблицы массив $list и отдаст его компоненту. Но это извращение. Лучше держите содержимое таблицы в БД, например, в highload блоке и там добавляйте строки. Ну или кнопка Добавить, а с нее ссылка на страницу с формой добавления элемента, которую вы сделаете на отдельной странице. Это если нужно дать возможность пользователю добавлять строки (записи в БД).

Пользователь 8067868

Заглянувший

Сообщений: 7 Регистрация: 08.04.2024

22.04.2024 12:38:41

Цитата
2. скрипт работающий, хоть и устаревший. Единственное, нужно ALLOW_HORIZONTAL_SCROLL передать true, иначе в js ошибка. Скопипастил на пустую страницу, работает. Причина ошибки у вас где-то еще.

Я просто не нашел как еще можно реализовать таблицу через компоненты, какой сейчас для этого подход используется? Мне нужно чтобы пользователи не могли редактировать таблицу а просто видели ее содержимое и могли сортировать табличку, а вот админинстратор или контент-менеджер мог уже ее редактировать

Цитата
написал: Лучше держите содержимое таблицы в БД, например, в highload блоке и там добавляйте строки

Попробую, спасибо, еще не работал с highload блоками, придется разбираться

Пользователь 114926

Постоянный посетитель

Сообщений: 368 Баллов: 40 Регистрация: 13.08.2012

24.04.2024 07:08:25

Цитата
написал: Мне нужно чтобы пользователи не могли редактировать таблицу а просто видели ее содержимое и могли сортировать табличку, а вот админинстратор или контент-менеджер мог уже ее редактировать

если просто сортировать, то проще и экономнее с точки зрения нагрузки написать несколько строк js кода, который это будет делать. Брать строки из БД и редактировать их в админке как хайлоад или инфоблок или хранить и редактировать как html - это уж как удобнее менеджеру/заказчику. Если же таблица на несколько страниц (пагинация) и/или надо дать возможность выбирать сущности, делать с ними какие-то операции, в т.ч. групповые, то этот компонент самое то. Если менеджеру в админку кроме как редактировать эту таблицу незачем лезть, то лучше использовать это компонент, давая авторизованному менеджеру проводить операции редактирования прямо на фронте. Но только не визуальным редактором - не пройдет и нескольких дней, как менеджер разворотит и сломает весь хтмл на странице, он не для него. Сделайте ему инпуты для редактирования. А остальным пользователям только просмотр - проверяете $USER и в зависимости от принадлежности его к группе включаете actions в элементы $list или нет. Короче, выбор вариантов реализации определяется задачей и временем/деньгами, которые заказчик готов платить за нее.

Пользователь 8067868

Заглянувший

Сообщений: 7 Регистрация: 08.04.2024

24.04.2024 12:40:17

Цитата

написал:
Сделайте ему инпуты для редактирования. А остальным пользователям только просмотр - проверяете $USER и в зависимости от принадлежности его к группе включаете actions в элементы $list или нет. Короче, выбор вариантов реализации определяется задачей и временем/деньгами, которые заказчик готов платить за нее.

Я решил так делать только динамически реализовывать таблицу html из highload блока. По клику на кнопку "Добавить", которая видна только админам открывается страница с формой которая должна сделать новую запись в highload.
Вот код этой страницы.

Код

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("add-service");
?>

<h1> Добавить запись в таблицу услуг </h1>

<sc ript type="text/javascript">

var number = '';
var date = '';
var status = '';

</sc ript>


<?php

if (isset($_POST['u_number']) && isset($_POST['u_date']) && isset($_POST['u_status']))
{
   \Bitrix\Main\Loader::IncludeModule("highloadblock");

   $hlblock_id = 2;
   $hlblock = Bitrix\Highloadblock\HighloadBlockTable::getById($hlblock_id)->fetch();
   $entity = Bitrix\Highloadblock\HighloadBlockTable::compileEntity($hlblock);

   $entity_data_class = $entity->getDataClass();

   $arFields = array (
       'UF_NUMBER'=> $_POST['u_number'],
       'UF_DATE'=> $_POST['u_date'],
       'UF_STATUS'=> $_POST['u_status']
   );


   $result=$entity_data_class::add($arFields);


   if ($result->isSuccess()){
      echo 'Запись добавлена успешно! ID записи: '. $result->getId();
   } else {
      print_r($result->getErrorMessages());
   }

}

else
{
    echo "<sc ript type='text/javascript'>";
    echo "document.write('<fo rm method=\'post\'>');";
    echo "document.write('<p>№ Заявки:<br />');";
    echo "document.write('<input type=\'text\' name=\'u_number\' value = \'' + number + '\'</p>');";
   echo "document.write('<p>Дата регистрации:<br />');";
    echo "document.write('<input type=\'text\' name=\'u_date\' value = \'' + date + '\'</p>');";
   echo "document.write('<p>Статус:<br />');";
    echo "document.write('<input type=\'text\' name=\'u_status\' value = \'' + status + '\'</p>');";
    echo "document.write('<input type=\'submit\' />');";
    echo "document.write('</form>');";
    echo "</sc ript>";

    exit();
}
?>


<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>ъ

Но Беда в том, что я в $_POST получаю корректные значения из инпутов, но передавая их в add() получаю ошибку "Array ( [0] => Не введено значение обязательного поля № Заявки.
Не введено значение обязательного поля Статус.
Не введено значение обязательного поля Дата.
)"

Хотя их поля указаны абсолютно верно, если вместо их полей указать рандомные значения ошибка пропадает и создается пустая запись.
Так выглядит мой highload (прикрепил скрин). Может знаете в чем проблема?

Прикрепленные файлы

Снимок экрана 2024-04-24 124042.png (28.27 КБ)

Пользователь 114926

Постоянный посетитель

Сообщений: 368 Баллов: 40 Регистрация: 13.08.2012

24.04.2024 13:28:28

Цитата
написал: Может знаете в чем проблема?

в том, что у вас поля множественные, поэтому они ждут массив. Убейте их и сделайте заново обычными (изменить уже не получится)

Пользователь 8067868 Заглянувший Сообщений: 7 Регистрация: 08.04.2024	#8 24.04.2024 13:37:56 Спасибо большое! Целый день мучался а даже не заметил этот момент! Все получилось)

Использование bitrix.ui.grid

Продукты

Управление сайтом

Битрикс24

Интернет-магазин + CRM

Решения

Для интернет-магазинов

Каталог готовых решений

Внедрение

Выбрать партнера

Проверить партнера

Стать партнером