Пример создания компонента TabSheet

Перед выполнением примера ознакомьтесь с рекомендациями к написанию кода.

Для выполнения примера:

  1. Создайте файлы:

SyncDataSource.js

Expanders.js

  1. Используйте HTML-код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>TabSheet</title>
    <script src="../build/PP.js" type="text/javascript"></script>
    <script src="../build/PP.TabSheet.js" type="text/javascript"></script>
    <link href="../build/PP.css" rel="stylesheet" type="text/css" />
    <script src="../addTabSheet/Expanders.js" type="text/javascript"></script>
    <script src="../addTabSheet/SyncDataSource.js" type="text/javascript"></script>
</head>
<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>
 
<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: 600,
        Height: 290,
        Zoom: 1.5, // Задаем масштаб таблицы
        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>
</html>

Примечание. Для выполнения пользовательских скриптов над таблицей, в том числе примеров, приведённых на страницах описания методов, событий и конструктора компонента, разместите код в теле функции OnRender.

В результате выполнения примера на html-странице будет размещен компонент PP.Ui.TabSheet, а также кнопки для разворачивания и сворачивания диапазона объединённых ячеек, блоки с переключателями для управления отображением сетки и заголовков таблицы:

См. также:

TabSheet