Содержимое файла
SyncDataSource.jsДля выполнения примера необходимо создать html-страницу и выполнить следующие действия:
1. Добавить ссылку на css-файл PP.css.
Также нужно добавить ссылки на js-файлы: PP.js, PP.TabSheet.js, SyncDataSource.js, и Expanders.js.
Файл SyncDataSource.js содержит описание класса PP.Ui.ExampleAsyncDataSource, представляющего собой синхронный источник данных для таблицы.
Содержимое файла
SyncDataSource.js
Файл Expanders.js содержит переменную, которой присвоен JSON-объект со значениями свойств таблицы и данных её ячеек.
2. Внутри тега <body> размещаем блок для хранения таблицы, кнопки для разворачивания и сворачивания диапазона объединённых ячеек, а также блоки с переключателями для управления отображением сетки и заголовков таблицы:
<body onselectstart="return false"> <div>Отображать заголовки столбцов:</div> <div id="coly"></div> <div id="coln"></div> <div style="padding-top: 10px;">Отображать заголовки строк:</div> <div id="rowy"></div> <div id="rown"></div> <div style="padding-top: 10px;">Отображать сетку:</div> <div id="gry"></div> <div id="gryc"></div> <div id="grn"></div> <!-- Кнопка «Развернуть» --> <div id="Button1" style="float: left;"></div> <!-- Кнопка «Свернуть» --> <div id="Button2"></div> <!-- Таблица --> <div id="table" style="padding-top: 10px;"></div> </body>
3. Далее на страницу необходимо добавить скрипт, который создает таблицу:
<script type="text/javascript">
// Создаём асинхронный источник данных для таблицы
var dataSource = new PP.Ui.ExampleAsyncDataSource();
// Создаём таблицу
var tabSheet = new PP.Ui.TabSheet({
ParentNode: document.getElementById("table"),
DataSource: dataSource, // Указываем источник данных
Id: "tabSheet1",
IsEditable: PP.Ui.TabSheetEditMode.Enable, // Разрешаем редактирование ячеек
Width: 350,
Height: 190,
EnableSelection: true, // Разрешаем вручную выделять ячейки таблицы
CacheEnabled: true, // Разрешаем кэширование
CacheSize: 20, // Определяем относительный размер кэша
ImagePath: "../build/img/", // Путь к папке с пиктограммами
MouseWheelScrollStep: 5, // Количество строк, на которое прокручивается колесо мыши
Rendered: onRender // Указываем функцию, вызываемую после отрисовки таблицы
});
var radioButns = [];
// Создаём переключатель для отображения сетки таблицы
var gry = new PP.Ui.RadioButton({
ParentNode: document.getElementById("gry"),
Content: "Да",
Checked: true,
Click: function setVisGridYes() {
// Отобразим сетку
tabSheet.setVisibleGrid(true);
// Обесцветим сетку
var borders = tabSheet.getModel().getDefaultStyle().Borders;
borders[PP.Ui.TabSheetCellBorderIndex.EdgeBottom].setColor("#FFFFFF");
borders[PP.Ui.TabSheetCellBorderIndex.EdgeRight].setColor("#FFFFFF");
// Обновим таблицу
tabSheet.rerender()
},
GroupName: "groupg"
});
radioButns.push(gry);
// Создаём переключатель для отображения сетки с цветом
var gryc = new PP.Ui.RadioButton({
ParentNode: document.getElementById("gryc"),
Content: "Да (с цветом)",
Click: function setVisGridNo() {
// Отобразим сетку
tabSheet.setVisibleGrid(true);
// Закрасим сетку таблицы
var borders = tabSheet.getModel().getDefaultStyle().Borders;
borders[PP.Ui.TabSheetCellBorderIndex.EdgeBottom].setColor("#CCCCCC");
borders[PP.Ui.TabSheetCellBorderIndex.EdgeRight].setColor("#CCCCCC");
// Обновим таблицу
tabSheet.rerender()
},
Checked: false,
GroupName: "groupg"
});
radioButns.push(gryc);
// Создаём переключатель для скрытия сетки таблицы
var grn = new PP.Ui.RadioButton({
ParentNode: document.getElementById("grn"),
Content: "Нет",
Click: function setVisGridNo() {
// Скроем сетку
tabSheet.setVisibleGrid(false);
// Обсцветим сетку
var borders = tabSheet.getModel().getDefaultStyle().Borders;
borders[PP.Ui.TabSheetCellBorderIndex.EdgeBottom].setColor("#FFFFFF");
borders[PP.Ui.TabSheetCellBorderIndex.EdgeRight].setColor("#FFFFFF");
// Обновим таблицу
tabSheet.rerender()
},
Checked: false,
GroupName: "groupg"
});
radioButns.push(grn);
// Создаём переключатель для отображения заголовков столбцов
var coly = new PP.Ui.RadioButton({
ParentNode: document.getElementById("coly"),
Content: "Да",
Checked: true,
Click: function setVisGridYes() {
// Отобразим заголовки столбцов
tabSheet.setVisibleColHeaders(true);
},
GroupName: "groupCol"
});
radioButns.push(coly);
// Создаём переключатель для скрытия заголовков столбцов
var coln = new PP.Ui.RadioButton({
ParentNode: document.getElementById("coln"),
Content: "Нет",
Click: function setVisGridNo() {
// Скроем заголовки столбцов
tabSheet.setVisibleColHeaders(false);
},
Checked: false,
GroupName: "groupCol"
});
radioButns.push(coln);
// Создаём переключатель для отображения заголовков строк
var rowy = new PP.Ui.RadioButton({
ParentNode: document.getElementById("rowy"),
Content: "Да",
Checked: true,
Click: function setVisGridYes() {
// Отобразим заголовки строк
tabSheet.setVisibleRowHeaders(true);
},
GroupName: "groupRow"
});
radioButns.push(rowy);
// Создаём переключатель для скрытия заголовков строк
var rown = new PP.Ui.RadioButton({
ParentNode: document.getElementById("rown"),
Content: "Нет",
Click: function setVisGridNo() {
// Скроем заголовки строк
tabSheet.setVisibleRowHeaders(false);
},
Checked: false,
GroupName: "groupRow"
});
radioButns.push(rown);
// Создаём кнопку для разворачивания диапазона объединённых ячеек
var button1 = new PP.Ui.Button({
ParentNode: document.getElementById("Button1"),
Id: "Button1",
ResourceKey: "Button1",
Content: "Развернуть",
Click: function btnOnClick() {
tabSheet.setWidth(660);
tabSheet.setHeight(350);
}
});
// Создаём кнопку для сворачивания диапазона объединённых ячеек
var button2 = new PP.Ui.Button({
ParentNode: document.getElementById("Button2"),
Id: "Button2",
ResourceKey: "Button2",
Content: "Свернуть",
Click: function btnOnClick() {
tabSheet.setWidth(350);
tabSheet.setHeight(190);
}
});
// В данную функцию можно вставлять программный код, который нужно выполнить над таблицей
function onRender(sender, args) {
}
</script>
Для выполнения пользовательских скриптов над таблицей, в том числе примеров, приведённых на страницах описания свойств, методов, событий и конструктора компонента, требуется разместить код в теле функции OnRender.
В результате выполнения примера на html-странице будет размещен компонент PP.Ui.TabSheet, а также кнопки для разворачивания и сворачивания диапазона объединённых ячеек, блоки с переключателями для управления отображением сетки и заголовков таблицы:
См. также: