SpreadJS - таблицы для интернет приложений с функционалом Excel

среда, 23 января 2013 г.

18 января вышел альфа-релиз SpreadJS - js библиотека, дающая возможность быстрого и простого внедрения полноценных таблиц (как Excel) на сайты.


Библиотека основана на новейших технологиях: HTML5, jQuery и CSS3 и имеет очень богатое js API для работы. Редактирование, изменение размеров столбцов и строк, цветовые выделения ячеек, формулы, перетаскивания мышкой и огромное количество другого функционала, как в привычном всем Excel.

Основные возможности SpreadJS:


Формулы
Поддержка более 320 функций и совместимость с формулами из Excel, которые работают и между несколькими страницами.

Работа с данными
Фиксация строк и столбцов, изменение размера строк и столбцов, заполнение перетаскиванием и поддержка Drag-Drop.



Фильтрация

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

Использование

1. Подключить нужные скрипты и css файлы.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<!-- SpreadJS CSS and script -->
<link href="http://cdn.wijmo.com/spreadjs/gcfilter-ui.css" rel="stylesheet" title="metro-jqueryui" type="text/css" />
<link href="http://cdn.wijmo.com/themes/wijmo/jquery.wijmo.wijsuperpanel.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.full.min.js" type="text/javascript"></script>

2. Создать элемент-контейнер.

<div id="ss" style="width:100%;height:400px;"></div>

3. Инициализировать SpreadJS.

<script type="text/javascript">
    $(document).ready(function(){
        $("#ss").wijspread({sheetCount:1}); // create wijspread control
        var spread = $("#ss").wijspread("spread"); // get instance of wijspread control
        var sheet = spread.getActiveSheet(); // get active worksheet of the wijspread control
        // initializing the active worksheet here...
    });
</script>

Сайт: http://wijmo.com
Скачать: http://wijmo.com/get/SpreadJS-1.0.0a1.zip (требуется регистрация)
Примеры: http://wijmo.com/demo/spreadjs/samples/
Стоимость: бесплатно

Copyright © 2010 WEB IT blog