PP.TS.Ui.WbkDataBox (settings);
settings. JSON-объект со значениями свойств компонента.
Конструктор WbkDataBox создает экземпляр класса WbkDataBox.
Для выполнения примера в теге HEAD html-страницы укажите ссылки на следующие js-файлы и css-файлы:
jquery.js;
Silverlight.js;
PP.ChartMaster.js;
PP.MapMaster.js;
PP.MapChart.js;
PP.Metabase.js;
PP.Express.js;
PP.TabSheet.js;
PP.TS.js.
В разных версиях браузера поместите в тег script и добавьте в тег HEAD html-страницы соответствующие css-файлы:
1. else if (PP.IsIE && PP.IEVer < 8) // Old IE
PP.App.css;
PP.Express.css;
PP.TS.css;
PP.Metabase.css;
PP_IE7.css;
PP.css.
2. else // All other
PP.css;
PP.App.css;
PP.Express.css;
PP.TS.css;
PP.Metabase.css.
Для отображения на экране Retina поместите в тег script и добавьте в тег HEAD html-страницы следующие css-файлы:
3. if (window.devicePixelRatio == 2) // Retina
PP.retina.css;
PP.App.retina.css;
PP.Express.retina.css;
PP.TS.retina.css;
Также необходимо наличие рабочей книги с ключом 5183.
В теге <body> в качестве значения атрибута «onLoad» укажите имя функции, которая выполняется после окончания загрузки тела страницы:
<body onselectstart="return false" class="PPNoSelect" onload="Ready()"> <div id='params'></div> <div id='example'></div> </body>
В конце документа вставьте код для установки стилей к вершине «document.body», которые соответствуют операционной системе клиента:
<script type="text/javascript"> PP.initOS(document.body); </script>
В теге SCRIPT добавьте следующий скрипт:
<script type="text/javascript"> // Устанавливаем языковые настройки для ресурсов PP.setCurrentCulture(PP.Cultures.ru); // Объявляем константы var KEY = 5183; //ключ документа var IMG_PATH = "build/img/"; //путь к папке с пиктограммами // Объявляем переменные var waiter, metabase, tsService, wbk, wbkDataBox, sheets, sheet, keySheet; //Функция для получения функций обработчиков //В качестве параметра принимает вспомогательную информацию, выводимую в консоль при вызове обработчика. //Это может быть, например, строка, содержащая имя класса и события function onDummyActionFactory(actionCaption){ return function (sender, args){ console.log(actionCaption); console.log(sender); console.log(args); }; } function Ready() //обработчик события загрузки body { // Создаём индикатор загрузки waiter = new PP.Ui.Waiter(); // Создаём соединение с репозиторием metabase = new PP.Mb.Metabase({ Id: "WAREHOUSE", UserCreds: { UserName: "user", Password: "password" }, StartRequest: function(){waiter.show();}, EndRequest: function(){waiter.hide();}, Error: function(sender, args){alert(args.ResponseText);} }); // Открываем соединение с репозиторием metabase.open(); // Создаём сервис для работы с временными рядами tsService = new PP.TS.TSService({ Metabase: metabase }); // Открываем документ tsService.editDocument(KEY, onFirstOpened); // Обработчик события открытия документа function onFirstOpened (sender, args) { wbk = args.Workbook; // Получаем рабочую книгу // Создаём экземпляр класса компонента отображения и управления данными рабочей книги wbkDataBox = new PP.TS.Ui.WbkDataBox({ Source: wbk, //источник ParentNode: "example", //родительский узел DOM Width: 1035, //ширина Height: 500, //высота ImagePath: IMG_PATH //путь к папке с пиктограммами }); } } </script>
После выполнения примера на html-странице будет размещен компонент WbkDataBox, имеющий следующий вид:
См. также: