Отправляет email-рассылки с помощью сервиса Sendsay

Web-программирование - это просто!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 680 RSS
←   Июнь 2011   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

680 подписчиков
0 за неделю
←   Все выпуски   →

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

В платном разделе

В бесплатном разделе

Добрый день, уважаемые подписчики!

Тема сегодняшнего выпуска: «Java Script(JS): Библиотека визуальных компонентов. Класс CXBrTableView».

 

Скачать файлы с описанными классами можно  здесь(версия 1.2)..

 

 Продолжим изучать библиотеку визуальных компонентов. Сегодня мы познакомимся с классом CXBrTableView. Он предназначен для визуального отображения и редактирования таблиц. Но пока мы рассмотрим только отображение, так как для редактирования нам понадобиться  класс CXBrDataSource, предназначенный для связи с таблицей MySQL через AJAX, но он пока в стадии разработки. Да и сам AJAX мы пока с вами еще не изучали. Поэтому знакомство с CXBrTableView будет немного поверхностным, после чего мы перейдем к другим класса библиотеки.

И так, конструктор класса:

// *********************** CXBrTableView **********************

function CXBrTableView(object,data_source) {

    СХBrVisualObject.call(this,object);

    this._get_class_name=CXBrTableView_get_class_name

    this._hierarchy_classes.push(this._get_class_name())

    this._fields=new Array;

    this._palette_styles.push("head_style_table_view");

    this._palette_styles.push("rows_style_table_view");

    this._palette_styles.push("control_item_table_view");

    this._palette_styles.push("href_item_table_view");

    this._data_source=data_source;

    this._show_page=CXBrTableView_show_page;

    this._refresh=CXBrTableView_refresh;

    this._event_handler=CXBrTableView_event_handler;

    this._test_need_refresh=CXBrTableView_test_need_refresh;

    this._read_page=CXBrTableView_read_page;

    this._get_control_item=CXBrTableView_get_control_item;

    this._to_bool=CXBrTableView_to_bool;

    this._get_href=CXBrTableView_get_href;

    this._on_hyper_click=CXBrTableView_on_hyper_click;

    this._on_input_click=CXBrTableView_on_input_click;

    this._current_row=0;

    this._set_row=CXBrTableView_set_row;

    this._set_col_vis=CXBrTableView_set_col_vis;

    this._get_num_col_field=CXBrTableView_get_num_col_field;

}

 

как видим, полей и методом у данного класса достаточно много.  Обратите внимание на поле _palette_styles - это палитра стилей. В ней хранятся стили различных элементов визуального компонента, который реализует данный класс. Многие компоненты данной библиотеки имеют такую палитру. Но до нее мы еще дойдем. А сейчас давайте изучим метод _show_page, он предназначен для отображения в виде таблицы переданных данных.  Эти данные хранятся в специальном формате и описываться структурой:

Поле Описание
fields Описание полей
data Данные

 

Описание полей это массив вот таких вот структур:

Поле Описание
name Идентификатор поля
caption Заголовок поля, как он виден в таблице
visible Признак видимости поля
width Ширина поля

 

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

Все это демонстрирует следующий пример:

<HTML>

    <head>

      <title></title>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="XBrBase.js">

        </SCRIPT>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="XBrGlobalVars.js">

        </SCRIPT>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="XBrGlobalProc.js">

        </SCRIPT>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="XBrVisual.js">

        </SCRIPT>

        <SCRIPT Language="JavaScript" type="text/javascript">

       

            //объявляем переменные

            var vo1;

        </SCRIPT>

    </head>

 

    <BODY>

        <div id="1">

            div1

        </div>

        <SCRIPT Language="JavaScript" type="text/javascript">

            function NewField(name,caption,width) {

                ob=new Object();

                ob["name"]=name;

                ob["caption"]=caption;

                ob["visible"]=true;

                ob["width"]=width;

                return ob;

            }

           

            function NewValue(AVal) {

                ob2=new Object();

                ob2["value"]=AVal;

                return ob2;

            }

           

            function NewRow(id,ware,price) {

                ob1=new Object();

                ob1["ID"]=NewValue(id);

                ob1["Ware"]=NewValue(ware);

                ob1["Price"]=NewValue(price);

                return ob1;

            }

       

            function ButtonClick() {

                div1=document.getElementById("1");

                vo1=new CXBrTableView(div1);

               

                //создадим массив полей

                fields=new Array();

                fields.push(NewField("ID","Код",5));

                fields.push(NewField("Ware","Товар",50));

                fields.push(NewField("Price","Цена",10));

                vo1._fields=fields;

               

                //создаем данные

                data=new Array();

                data.push(NewRow(1,"Ботинки",3000));

                data.push(NewRow(2,"Куртка",5000));

                data.push(NewRow(3,"Джинсы",2500));

                data.push(NewRow(4,"Пальто",8000));

               

                //создадим таблицу

                mas=new Object();

                mas["fields"]=fields;

                mas['data']=data;

               

                vo1._show_page(mas);

            }

        </SCRIPT>

        <input type="submit" value="Нажать сюда" OnClick="ButtonClick()"><br>

    </BODY>

</HTML>

 

Вот результат работы данной программы:

 

Тема сегодняшнего выпуска: «Java Script(JS): Библиотека визуальных компонентов. Класс CXBrTableView».

 

А теперь попробуем как то выделить заголовок. Для этого создадим файл css:

.head_style_table_view {

    color:red;

    background-color:yellow;

}

 

И подключим его, добавив в хеадер HTML-файла такие вот строки:

<LINK HREF="styles.css" REL="stylesheet" TYPE="text/css">

 

после чего таблица будет выглядеть вот так:

Тема сегодняшнего выпуска: «Java Script(JS): Библиотека визуальных компонентов. Класс CXBrTableView».

 

 

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 
В избранное