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

Гриды: Свои стили на строчки и ячейки

RSS

Гриды: Свои стили на строчки и ячейки, Необходимо добавить свои стили в грид

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

Эксперт

Сообщений: 465 Баллов: 95 Регистрация: 19.10.2012

29.04.2021 09:47:24

Доброго дня всем!!!
может кто сталкивался с ситуацией:
необходимо при определенных условиях добавить свой стиль (CSS Class) в строчках или ячейках грида.
при этом они должны подгружаться при постраничной пагинации.
Не нашел как добавить свой стилевой класс.
===================
область применения:
1. подсветка строки или ячейки грида
---------------------------------
В верстке грида хотелось бы видеть так:
ADDITIONAL-CUSTOM-CLASS-TR
ADDITIONAL-CUSTOM-CLASS-TD-1
ADDITIONAL-CUSTOM-CLASS-TD-2

Код

<table class="main-grid-table" id="CRMDEBTS_LIST_table">
   <thead class="main-grid-header" data-relative="CRMDEBTS_LIST">
      <tr class="main-grid-row-head">
         ... heder
      </tr>
   </thead>

   <tbody>
      <tr class="ADDITIONAL-CUSTOM-CLASS-TR main-grid-row main-grid-row-body" data-child-loaded="false" data-depth="" data-id="522">
         <td class="main-grid-cell main-grid-cell-checkbox">
            <span class="main-grid-cell-content">
               <input type="checkbox" class="main-grid-row-checkbox main-grid-checkbox" name="ID[]" value="522" title="Отметить для редактирования" id="checkbox_CRMDEBTS_LIST_522">
               <label class="main-grid-checkbox" for="checkbox_CRMDEBTS_LIST_522"></label>
            </span>
         </td>
         <td class="ADDITIONAL-CUSTOM-CLASS-TD-1 main-grid-cell main-grid-cell-action">
            <span class="main-grid-cell-content">
               <a href="#" class="main-grid-row-action-button" data-actions="[{'title':'Редактировать комментарий','text':'Комментарий','onclick':'BX.W4aDebt.saveComment(522);'}]"></a>
            </span>
         </td>
         <td class="ADDITIONAL-CUSTOM-CLASS-TD-2 main-grid-cell main-grid-cell-left" data-editable="true">
            <span class="main-grid-cell-content" data-prevent-default="true">522</span>
         </td>
         <td class="main-grid-cell main-grid-cell-left" data-editable="true">
            <span class="main-grid-cell-content" data-prevent-default="true">
               <a href="/crm/company/details/31315/" target="_self">Ответсвенный</a>
            </span>
         </td>
         <td class="main-grid-cell main-grid-cell-left" data-editable="true">
            <span class="main-grid-cell-content" data-prevent-default="true">
               <a href="/crm/company/details/8440/" target="_self">название компании</a>
            </span>
         </td>
      </tr>
   </tbody>
</table>

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

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

Сообщений: 400 Баллов: 37 Регистрация: 28.03.2018

30.04.2021 07:07:07

Цитата

Ахат Баязи написал:
Доброго дня всем!!!
может кто сталкивался с ситуацией:
необходимо при определенных условиях добавить свой стиль (CSS Class) в строчках или ячейках грида.
при этом они должны подгружаться при постраничной пагинации.
Не нашел как добавить свой стилевой класс.
===================
область применения:
1. подсветка строки или ячейки грида
---------------------------------
В верстке грида хотелось бы видеть так:
ADDITIONAL-CUSTOM-CLASS-TR
ADDITIONAL-CUSTOM-CLASS-TD-1
ADDITIONAL-CUSTOM-CLASS-TD-2

Код

 <table class="main-grid-table" id="CRMDEBTS_LIST_table">
   <thead class="main-grid-header" data-relative="CRMDEBTS_LIST">
      <tr class="main-grid-row-head">
         ... heder
      </tr>
   </thead>

   <tbody>
      <tr class="ADDITIONAL-CUSTOM-CLASS-TR main-grid-row main-grid-row-body" data-child-loaded="false" data-depth="" data-id="522">
         <td class="main-grid-cell main-grid-cell-checkbox">
            <span class="main-grid-cell-content">
               <input type="checkbox" class="main-grid-row-checkbox main-grid-checkbox" name="ID[]" value="522" title="Отметить для редактирования" id="checkbox_CRMDEBTS_LIST_522">
               <label class="main-grid-checkbox" for="checkbox_CRMDEBTS_LIST_522"></label>
            </span>
         </td>
         <td class="ADDITIONAL-CUSTOM-CLASS-TD-1 main-grid-cell main-grid-cell-action">
            <span class="main-grid-cell-content">
               <a href="#" class="main-grid-row-action-button" data-actions="[{'title':'Редактировать комментарий','text':'Комментарий','onclick':'BX.W4aDebt.saveComment(522);'}]"></a>
            </span>
         </td>
         <td class="ADDITIONAL-CUSTOM-CLASS-TD-2 main-grid-cell main-grid-cell-left" data-editable="true">
            <span class="main-grid-cell-content" data-prevent-default="true">522</span>
         </td>
         <td class="main-grid-cell main-grid-cell-left" data-editable="true">
            <span class="main-grid-cell-content" data-prevent-default="true">
               <a href="/crm/company/details/31315/" target="_self">Ответсвенный</a>
            </span>
         </td>
         <td class="main-grid-cell main-grid-cell-left" data-editable="true">
            <span class="main-grid-cell-content" data-prevent-default="true">
               <a href="/crm/company/details/8440/" target="_self">название компании</a>
            </span>
         </td>
      </tr>
   </tbody>
</table>

Вам в данном случае надо зарегистрировать свою js-библиотеку и встроиться в dom-дерево.
Я таким образом поменял страницу элемента универсальных списков, теперь по клику на название выезжает слайдер, в котором отображены данные конкретного элемента. Для этого я даже создавал отдельный модуль, можете посмотреть, как там всё реализовано.

Соответственно, в вашем конкретном случае, надо просто вешать нужный класс на нужные элементы

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

Эксперт

Сообщений: 465 Баллов: 95 Регистрация: 19.10.2012

30.04.2021 08:42:22

Цитата
Роман написал: Для этого я даже создавал отдельный модуль , можете посмотреть, как там всё реализовано.

Благодарочка за модуль, поглазею!!!

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

Эксперт

Сообщений: 465 Баллов: 95 Регистрация: 19.10.2012

30.04.2021 11:22:43

Цитата
Роман написал: Вам в данном случае надо зарегистрировать свою js-библиотеку и встроиться в dom-дерево.

хотелось бы не привязываться к JS
для строчек нашел хак-решение:

используем (не используемое в данном решении) дата-тег: data-depth
которое можно подсунуть в грид при его формировании:

Код

$marker = '';if(intval($debt['DEBT_STATUS_ID'])  !== 1 && empty($debt['COMMENT']))
    $marker = 'color-danger';


$rows[] = array(
    'id' => $debt['ID'],
    'depth' => $marker,
    'actions' => $actions,
    'data' => $debt,
    'columns' => array(
        'ID' => $debt['ID'],
        'MY_COMPANY' => '<a href="/crm/company/details/' . $debt['MY_COMPANY']['ID'] . '/" target="_self">' . $debt['MY_COMPANY']['TITLE'] . '</a>',
        'COMPANY' => '<a href="/crm/company/details/' . $debt['COMPANY']['ID'] . '/" target="_self">' . $debt['COMPANY']['TITLE'] . '</a>',
        'COMPANY_BIN' => $debt['COMPANY']['W4A_BIN'],
        'CONTRACT_NAME' => $debt['CONTRACT_NAME'],
        'DOCUMENT_NAME' => $documentName,
        'ASSIGNED_BY' => empty($debt['ASSIGNED_BY']) ? '' : CCrmViewHelper::PrepareUserBaloonHtml(
            array(
                'PREFIX' => "DEBT_{$debt['ID']}_RESPONSIBLE",
                'USER_ID' => $debt['ASSIGNED_BY_ID'],
                'USER_NAME'=> CUser::FormatName(CSite::GetNameFormat(), $debt['ASSIGNED_BY']),
                'USER_PROFILE_URL' => "/company/personal/user/{$debt['ASSIGNED_BY_ID']}/"
            )
        ),
        'DEBT_STATUS' => $debt['DEBT_STATUS']['NAME'],
        'DATE_SALE' => $debt['DATE_SALE'],
        'DATE_PAY_PLAN' => $debt['DATE_PAY_PLAN'],
        'DELAYED_DAYS' => $debt['DELAYED_DAYS'],
        'SUM' => $debt['SUM'],
        'SUM_PAY' => $debt['SUM_PAY'],
        'SUM_RETURN' => $debt['SUM_RETURN'],
        'SUM_DEBT' => $debt['SUM_DEBT'],
        'SUM_PERIOD_1_30' => $debt['SUM_PERIOD_1_30'],
        'SUM_PERIOD_30_60' => $debt['SUM_PERIOD_30_60'],
        'SUM_PERIOD_60' => $debt['SUM_PERIOD_60'],
        'COMMENT' => '<span id="'.$arResult['GRID_ID'].'_comment_'.$debt['ID'].'">' .$comment. '</span>',
        'COMMENT_DATE' => $debt['COMMENT_DATE'],
    )
);

и тогда через файл стилей можно управлять его цветом:

Код

tr.main-grid-row[data-depth="color-danger"]>.main-grid-cell{
    background-color: #f7cfcf!important;
}
tr.main-grid-row[data-depth="color-danger"]:hover>.main-grid-cell{
    background-color: #f7b4b4!important;
}

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

2021-04-30_142416.png (105.56 КБ)

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

Эксперт

Сообщений: 465 Баллов: 95 Регистрация: 19.10.2012

03.05.2021 09:03:25

Цитата
Роман написал: Для этого я даже создавал отдельный модуль , можете посмотреть, как там всё реализовано.

Роман, поюзал модуль ваш.
при открытии элемента списка, не подгружаются его скрипты.
не подскажите как подгрузить их?
проблему описал в этом топике: Приложение для Б24: HTML-редактор в слайдере

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

Гуру

Сообщений: 5443 Баллов: 649 Регистрация: 16.07.2012

04.05.2021 18:03:13

Ахат Баязи, в коробке есть решение для добавления доп. аттрибутов к строке, на основании которых можно покрасить всю строку, а так же есть доп. аттрибуты для классов, которые позволяют покрасить ячейку в строке.

Посмотрите компонент bitrix:timeman.worktime.grid там есть примеры реализаций на bitrix:main.ui.grid

Голосуй за идеи по развитию API Bitrix:
https://idea.1c-bitrix.ru/26707/
https://idea.1c-bitrix.ru/26709/
https://idea.1c-bitrix.ru/the-local-extension-folder-js/

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

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

Сообщений: 400 Баллов: 37 Регистрация: 28.03.2018

06.05.2021 07:00:05

Цитата
Ахат Баязи написал: при открытии элемента списка, не подгружаются его скрипты.

это обычное явление при открытии страницы в слайдере, для этого есть компонент-обёртка
Либо можно попробовать другой вариант:

Код

use Bitrix\Main\Context;

require $_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_before.php';

$request = Context::getCurrent()->getRequest();

if($request['IFRAME'] === 'Y') {

    $APPLICATION->RestartBuffer();
    $APPLICATION->ShowHead();

    $elementId = (int) $request['elementId'];
    $APPLICATION->IncludeComponent('quantumart.roster:uapb', 'details');

}


require $_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/epilog_after.php';

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

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

Эксперт

Сообщений: 465 Баллов: 95 Регистрация: 19.10.2012

06.07.2021 19:10:32

Цитата

Ахат Баязи написал:
Доброго дня всем!!!может кто сталкивался с ситуацией:необходимо при определенных условиях добавить свой стиль (CSS Class) в строчках или ячейках грида.при этом они должны подгружаться при постраничной пагинации.
Не нашел как добавить свой стилевой класс.
===================
область применения:1. подсветка строки или ячейки грида
---------------------------------
В верстке грида хотелось бы видеть так:
ADDITIONAL-CUSTOM-CLASS-TR
ADDITIONAL-CUSTOM-CLASS-TD-1
ADDITIONAL-CUSTOM-CLASS-TD-2

Решение:
для добавления класса к ячейке необходимо в массив $row добавить массив описывающий классы ячеей с ключем: columnClasses:

Код

$columnClasses = array(
    'COMPANY_BIN' => 'ADDITIONAL-CUSTOM-CLASS-TD-1',
    'CONTRACT_NAME' => 'ADDITIONAL-CUSTOM-CLASS-TD-2',
    'DOCUMENT_NAME' => 'ADDITIONAL-CUSTOM-CLASS-TD-3',            
);

$rows[] = array(    'id' => $debt['ID'],
    'depth' => $marker,
    'actions' => $actions,
    'data' => $debt,
    'columns' => array(
        'ID' => $debt['ID'],
        'MY_COMPANY' => '<a href="/crm/company/details/' . $debt['MY_COMPANY']['ID'] . '/" target="_self">' . $debt['MY_COMPANY']['TITLE'] . '</a>',
        'COMPANY' => '<a href="/crm/company/details/' . $debt['COMPANY']['ID'] . '/" target="_self">' . $debt['COMPANY']['TITLE'] . '</a>',
        'COMPANY_BIN' => $debt['COMPANY']['W4A_BIN'],
        'CONTRACT_NAME' => $debt['CONTRACT_NAME'],
        'DOCUMENT_NAME' => $documentName,

    ),
    'columnClasses' => $columnClasses,
);

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

Заглянувший

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

28.02.2023 09:43:23

Добавлю еще к этой старой теме сведения о передаче информации в строчку GRID-а.

Если в элемент параметра ROWS добавить элемент attrs, то этот массив добавится в качестве атрибутов к тегу TR данной строки. Например:

Код
$rows[] = array( 'data' => $rowData, 'actions' => $rowActions, 'attrs' => array( 'data-customdata'=>'custom_mark', ), );

Можно это использовать для подсветки строк, чтобы не залезать в атрибут depth стандартного функционала.

Гриды: Свои стили на строчки и ячейки

Продукты

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

Битрикс24

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

Решения

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

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

Внедрение

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

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

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