Компонент  DBGridHTML

для отображения таблицы с помощью простого html

 

Версия 1.19

Украина, Киев, 2009

 

1) поддерживает через  свойство $DataSource связь с компонетом DataSource

 

2) корректно работает с Pager

 

3) так как унаследован от  ExtPanel то имеет все его свойства, а также

     свойство $Align которое имеет значения alClient, alTop и др.

 

4) имеет редактор свойств колонок в свойстве Columns

  (там поддерживается пока:

   - Caption

   - TitleColor

   - Width

   - FontColor

   - Alignment

   - Color

   - Fieldname

  )

  особенность: если width колонок в сумме меньше чем ширина таблицы, то они могут

  растягиватся и не отрисовываться с указанным размером

  это решается указанием одной из колонок width=100%

  тогда она становится авторастягиваемой, а у отальных размер как указано

   Примечание:

   В режиме дизайна результат применения свойств не отображается,

   т.к. в этом режиме не происходит подключание к базе

   и, соответственно, данные не доступны.

 

   последовательность отображения полей соответствует последовательности в columns

   если нет ни одного поля в columns, то отображаются все колонки в соответствии с запросом

 

5) имеет ряд общих для таблицы свойств

   - $TableBorder

   - $TableColor

   - $TitleColor

   - $TitleFontColor

   - $TitleFontSize

   - $TitleFontAlign

   - $TitleFontBold

   - $CellColor

   - $CellFontColor

   - $CellFontSize

   все эти свойства могут быть перекрыты свойствами из Columns или стилем из Style

 

   Примечание:

   В режиме дизайна свойства отображаются правильно

 

   - $AttrTRField     // имя поля, значение которого передаётся в событие типа tr по onbeforeshow

                      // например, можно определить в событии  назначение цвета строке по значению

                      // контролируемого поля

                      // подробнее смотри пример...

   - $InvertFontColor  // задумывалось как альтернативный цвет шрифта для случая,

                       // когда, например, фон строки переназначенный с помощью $AttrTRField и события (см. выше)

                       // сливается со стандартным цветом шрифта

                       // автоматически не применяется, используем вручную

                       // подробнее смотри пример...

 

6) свойство $Style

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

   при этом если стиль в свойстве указан, то другие свойства компонента

   влияющие на цвет, фон и т.д. не используются (кроме Columns и вроде ещё TitleFontBold)

   в этом случае если указаны свойства в Columns, то они накладываются на указанный стиль

 

7) свойство $CellLink - массив с указанием гиперссылки для ячейки

  формат: [имя поля, гиперссылка]

  в гиперссылке можно задавать как шаблон подстановки (с помощью символов {имя} ):

  - имена полей - тогда они будут заменены на значения полей из текущей записи

  - {AND} заменяется на символ &

  - {TARGET_BLANK} - в ссылке будет удалено, но свойство target в теге href будет установлено как '_blank'

                     т.е. обозначает, что ссылку открывать в другом окне

  Пример:

  пусть в текушей записи поле ID = 34, а поле NAME='Киев'

  а в свойстве компонента CellLink укажем

  [ID]    [http://ait.org.ua?x={ID}{AND}eee={name_en}{TARGET_BLANK}]

  [NAME]  [http://ait.org.ua?x={ID}]

  [TEST]  [javascript:alert('{ID}')]

  при таких исходных данных в полученной таблице получим:

    в колонке поля ID   будет ссылка   <a href="http://ait.org.ua?x=34&eee=Киев target=_blank">

    в колонке поля NAME будет ссылка   <a href="http://ait.org.ua?x=34>"

    в колонке поля TEST будет ссылка   <a href="javascript:alert('{34}')"> (пи нажатии выведет окно с цирой 34)

 

8) свойство $CellRule - массив с указанием изменения цвета фона, цвета шрифта и жирность шрифта для ячейки

  формат: [имя поля,параметры правила]

  формат параметров правила: значение поля(проверка на равно);цвет фона ячейки;цвет шрифта; жирность фона;

  если условие не выполнено, то параметры условия не применяются

 

9) компонент поддерживает событие onbeforeshow

 

    в это событие при отрисовке компонента через $params события передаются:

    1. при отрисовке ячейки (td) массив

      array('evtype'=>'td','fname'=>$nameField, 'fvalue'=>$query->Fields[$nameField],'fields'=>$query->Fields)

      т.е. 'evtype'=>'td' обозначает что событие сработало в ячейке td

           'fname'=>$nameField                  - это имя поля

           'fvalue'=>$query->Fields[$nameField] - значение ячейки

           'fields'=>$query->Fields - массив значений всех ячеейк строки

      полученный результат заменяет значение в ячейке

      Примеры использования в обработчике события:

      а) выделить значение чёрным цветом если это поле ='CITY_NAME_en':

             function DBGridHTML1BeforeShow($sender, $params)

             {

              if ($params['evtype']=='td')

                {

                if ($params['fname'])

                  {

                  if ($params['fname'] == 'CITY_NAME_en')

                    {

                    return "<B>".$params['fvalue']."</B>";

                    }

                    else

                    {

                    return $params['fvalue'];

                    }

                  }

                }

              }

      б) если поле называется ID, то заменить информацию в ячейке на изображение

         типа img_"значение поля".jpg и текст из значения в строке с именем поля 'make'

 

             function DBGridHTML1BeforeShow($sender, $params)

             {

              if ($params['evtype']=='td')

                {

                  if ($params['fname']=='ID')

                      {

                      $make_val = $this->DBGridHTML1->GetArrayValue($params['fields'],'make'); // здесь мы получили значение нужного нам поля в этой строке

                      $id_val = $params['fvalue'];

                       return " <img src=\"/img/small/img_$make_val.jpg\" align=left> - $make_val";

 

                      }

                }

              }

 

      в) если поле называется  CLIENT_ID, то в ячейку вставить панель со всеми компонентами на ней

         при этом в режиме редактирования панель находится на форме в любо месте (типа визуально редактируемого шаблона)

         а во время выполнения копируется в нужные ячейки

         делаем так:

         - ставим панель на форму (например с именем PanelNewCode)

         - панели устанавливаем в режиме редактирования :

                 $this->PanelNewCode->Visible = false;

                 $this->PanelNewCode->Layout->Type = 'REL_XY_LAYOUT';

         - прописываем событие для DBGridHTML1 на

 

             function DBGridHTML1BeforeShow($sender, $params)

             {

              if ($params['evtype']=='td')

                {

                  if ($params['fname']=='CLIENT_ID')

                      {

                      $tempval = $params['fvalue'];

                      if ((!$tempval) or ($tempval=='0'))

                        {

                        return "";

                        }

                        else

                        {

                        return 'текущий код: '.$tempval.'<br>'.$this->PanelNewCode->show(true);

 

                        }

                      }

 

                }

              }

         - т.к.  PanelNewCode невидимая, то есть проблема

           если на этой панели есть компоненты у которых прописаны обработчики событий (например кнопка)

           то vcl не сгенерирует их в страницу, т.к. родитель не видимый

           решение здесь такое:

           прописываем сгенерировать код события принудительно

           (например для кнопки Button1, которая находится на невидимой панели и имеет обработчик события)

               function zakazinfoAfterShow($sender, $params)

               {

               echo "<script type=\"text/JavaScript\">";

                      $this->Button1->dumpJsEvents();

               echo "</script>";

 

               }

           это событие здесь для формы с названием zakazinfo    

 

 

 

    2. при отрисовке строки (tr) массив

      array('evtype'=>'tr','fname'=>$this->AttrTRField , 'fvalue'=>$tr_value,'fields'=>$query->Fields)

      т.е. 'evtype'=>'tr' обозначает что событие сработало в строке tr

           'fname'=>$this->AttrTRField   - это имя поля указанное нами в свойстве $AttrTRField компонента

           'fvalue'=>$tr_value - текуще значение поля указанного нами в свойстве $AttrTRField компонента

           'fields'=>$query->Fields - массив значений всех ячеейк строки

      перед срабатыванием события типа tr сначала формируется строка <td> со значениями полей

      при этом если указано поле в $AttrTRField, то его значение запоминается для передачи в обработчик события

      кроме этого в обработчике доступны все значения полей этой строки

      полученный результат добавляет дополнительные атрибуты в тег строки <tr ...

      Примеры использования в обработчике события:

        а)выделить всю строку если в указанном поле (в $AttrTRField) текущее значение равно 'Mukachevo':

        function DBGridHTML1BeforeShow($sender, $params)

        {

              if ($params['evtype']=='tr')

                {

                  if ($params['fname'])

                    {

                    if  ($params['fvalue'] == 'Mukachevo')

                      {

                      return "bgcolor=\"".$this->DBGridHTML1->InvertFontColor."\"";

                      }

                    }

                }

        }

 

10) свойство $TableFormat - вид отображаемых данных

имеет следующие предустановленные значения:

tfTable - отображени данных в виде обычной таблицы (заголовки в первой строке, а данные в последующих)

tfList  - отображени данных в виде списка с помощью таблицы в две колонки (заголовки в первой колонке, а данные во второй)

по умолчанию используется tfTable

 

11) свойство $ListTitleName - выводимый текст над колонкой названий полей в режиме  TableFormat = tfList

 

12) свойство $ListCellName - выводимый текст над колонкой значений полей в режиме  TableFormat = tfList

 

13) свойство $TitleVisible = [true,false] - отображать названия полей или нет

 

14) свойство $ListRowSeparator - ширина пустой строки под каждой записью для режима TableFormat = tfList

    если <1 то строка не формируется

 

15) полезные функции:

    GetArrayValue($array,'имя поля') - возвращает значение указанного поля базы данных в текущей строке

                                       предполагает использование в обработчике onbeforeshow

                                       пример:

                                       // здесь мы получили значение нужного нам поля 'make' в текущей строке

                                       // полный пример см. в справке по обработчику onbeforeshow

                                       $this->DBGridHTML1->GetArrayValue($params['fields'],'make');

 

16) устанавливает прокрутку если данные не влазят в указанную область

 

17) свойство $FieldPrefixIDforTD - имя поля из которого брать префикс для атрибута ID тега TD с данными записи таблицы

    если это свойство установлено, то в результирующей html таблице

    в тегах TD с данными будет установлен атрибут ID равный:

    текущее(для_записи)_значение_поля_$FieldPrefixIDforTD.имя_поля_в_данном_TD

    если FieldPrefixIDforTD не установлено, то атрибут ID в тегах TD не генерируется

    это нужно для того, что бы с помощью JavaScript найти нужную ячейку с данными

    в тексте полученной на клиенте html страницы

    т.е. не перечитывать данные с сервера лишний раз

             например:

             на форме компонент с именем  DBGridHTML1

             запрос 'select XID,NAME_CITY,NAME_COUNTRY'

             устанавливаем в инспекторе $this->DBGridHTML->TDprefixID=XID  // т.е. поле префикса ID

             при генерации html таблицы получаем:

              <html>

              заголовок таблицы <tr>.....</tr>

              данные таблицы для строки у которой id=12:

                <tr><td id="12.XID">12</td><td id="12.NAME_CITY">Kiev</td><td id="12.NAME_COUNTRY">Ukraine</td></tr>...

              данные таблицы для строки у которой id=13:

                <tr><td id="13.XID">13</td><td id="13.NAME_CITY">Simferopol</td><td id="13.NAME_COUNTRY">Ukraine</td></tr>...

                ...  </html>

              теперь для того что бы получить значение в JavaScript известных нам полей

              (в данном примере это имя города) по коду какой то записи

              можно использовать такой код (например, для записи у которой XID=13):

                recid = 13;

                xvalue = document.getElementById(recid+'.NAME_CITY').innerHTML;

                например, присвоить его html элементу cityName для редактирования

                document.getElementById('cityName').value=xvalue;