Show/Hide Toolbars

Руководство администратора

Изменение цвета отображения ДП в зависимости от значения

Ссылки Назад Вверх Вперед

Старый МТФ

Для большей наглядности в карточке задачи наиболее критичные ДП можно отображать разными цветами в зависимости от их значений.

Пример 1

ДП "% предоплаты по договору" необходимо отображать зеленым цветом если его значение менее 20, желтым цветом если значение от 20 до 40, красным если свыше 40.

Команда .replace(',','.').replace(/\s+/g,' ') приводит значение ДП к виду, который можно будет сконвертировать в float для сравнения с другими числами.

function paintYellow ( a )
  {
  a.css({"background-color" : "yellow", "font-weight" : "bolder"});
  a.blur(function ()
     {
    $(this).css({"background-color" : "yellow", "font-weight" : "bolder"});
             });
  a.hover(function ()
     {
    $(this).css({"background-color" : "yellow", "font-weight" : "bolder"});
     });
  }
 
function paintGreen ( a )
  {
  a.css({"background-color" : "green", "font-weight" : "bolder"});
  a.blur(function ()
     {
    $(this).css({"background-color" : "green", "font-weight" : "bolder"});
     });
  a.hover(function ()
     {
    $(this).css({"background-color" : "green", "font-weight" : "bolder"});
     });
  }
 
function paintRed ( a )
  {
  a.css({"background-color" : "red", "font-weight" : "bolder"});
  a.blur(function ()
     {
    $(this).css({"background-color" : "red", "font-weight" : "bolder"});
     });
  a.hover(function ()
     {
    $(this).css({"background-color" : "red", "font-weight" : "bolder"});
     });
  }
 
function paintWhite ( a )
  {
  a.css({"background-color" : "white", "font-weight" : "bolder"});
  a.blur(function ()
     {
    $(this).css({"background-color" : "white", "font-weight" : "bolder"});
     });
  a.hover(function ()
     {
    $(this).css({"background-color" : "white", "font-weight" : "bolder"});
     });
  }
 
$(document).ready(function ()
{
var Prepayment = new ExtParam (1234);
Prepayment.change ( funсtion ()
 {
    if ( parseFloat( Prepayment.val().replace(',','.').replace(/\s+/g,' ')) == 0 )
  { paintWhite ( Prepayment ); }
    if ( parseFloat( Prepayment.val().replace(',','.').replace(/\s+/g,' ')) > 0 && parseFloat( Prepayment.val().replace(',','.').replace(/\s+/g,' ')) <= 20 )
  { paintGreen ( Prepayment ); }
    if ( parseFloat( Prepayment.val().replace(',','.').replace(/\s+/g,' ')) > 20 && parseFloat( Prepayment.val().replace(',','.').replace(/\s+/g,' ')) <= 40 )
  { paintYellow ( Prepayment ); }
    if ( parseFloat( Prepayment.val().replace(',','.').replace(/\s+/g,' ')) > 40 )
  { paintRed ( Prepayment ); }
 };
});

warning_icon Если ДП доступен только для чтения, то "подкраска" по приведенному выше способу не будет производится, так как в данном случае "подкрашивается" ввод ДП. Чтобы "подкрасить" ДП, доступный только для чтения, необходимо аналогичным образом "подкрасить" ячейку таблицы, в которой расположен данный ДП.

Пример 2

Изменение цвета ДП + запрет на ввод нового значения в зависимости от значения другого ДП.

 

(window).addEventListener('MTFMainLoadFinished', function() // для карточки задачи
(window).addEventListener('NewTaskLoadFinished', function() // для карточки новой задачи
 {
         var paramControl666 = document.querySelector('#ExtParamEditControl666');
         var ep301 = new ExtParam(301);   // переменная (ДП с ID=301)
         ep301.change(function() {         // вызов функции на изменение этой переменной
                 switch (ep301.val()) {
                         case 'Рубли':
                                 paramControl666.style.pointerEvents = "none";           // контрол ДП с ID=666 становится неактивным
                                 paramControl666.style.backgroundColor = "gainsboro";   // цвет фона для ДП с ID=666
                                 break;
                         default:
                                 paramControl666.style.pointerEvents = "auto";
                                 paramControl666.style.backgroundColor = "white";
                                 break;
                 }
         });
         ep301.change();

 });

Полезные ссылки