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

Автор megabax

22.12.2011 г.

Урок 13. Управление шрифтами в CSS New Page 1

Тема сегодняшнего выпуска: «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>

</SCRIPT>

</SCRIPT>

</SCRIPT>

</SCRIPT>

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

var vo1;

</SCRIPT>

</head>

<BODY>

div1

</div>

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>

</BODY>

</HTML>

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

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

.head_style_table_view {

color:red;

background-color:yellow;

}

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

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

« След.		Пред. »

Вернуться