jExcel — плагин jQuery для создания интерактивных таблиц, как в Excel

«jExcel» – это очень легкий плагин jQuery для размещения электронных таблиц, совместимых с Excel, в вашем браузере. Можно загружать данные прямо в jExcel таблицы из массива в JS.

Вы можете скопировать и вставить данные в Excel прямо из таблицы сайта. Также плагин способен легко интегрировать jExcel с любым другим плагином jQuery, чтобы создавать ваши собственные пользовательские столбцы, специализированные редакторы и многое другое. jExcel имеет много хороших функций, таких как: ключ-значение в выпадающем списке, загрузка из CSV/экспорт/импорт нескольких электронных таблиц и многое другое.

Библиотека имеет обширную и понятную документацию, а автор готов ответить на любые вопросы.

Инсталляция и настройка jQuery плагина таблицы

HTML-структура. Подключаем файлы:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>

<script src="http://cdn.bossanova.uk/js/jquery.jexcel.js"></script>
<link rel="stylesheet" href="http://cdn.bossanova.uk/css/jquery.jexcel.css" type="text/css" />

Указываем разметку нашей таблицы:

<div id="my"></div>

<p><button id='download'>Export my spreadsheet as CSV</button></p>

И задаем параметры загрузки страницы из CSV-файла и опции:

$('#my').jexcel({
    csv:'http://cdn.bossanova.uk/demo/demo1.csv',
    csvHeaders:true,
    colWidths: [70, 200, 300],
});

$('#download').on('click', function () {
    $('#my').jexcel('download');
})

Вы можете ознакомиться со всеми примерами работы плагина на страничке автора. Скачать файлы можно по ссылке выше с репозитория Github.

4910 просмотров