Использование файлов Microsoft Project с диаграммой Ганта Syncfusion JavaScript: руководство для начинающих
Microsoft Project — это инструмент управления проектами, который упрощает процесс планирования задач, распределения ресурсов, управления проектами и многое другое. Однако передача данных туда и обратно при работе с людьми, использующими Microsoft Projects, может оказаться сложной задачей. Например, пользователи Mac не могут открыть сохраненные файлы Microsoft Project.
Именно здесь пригодится возможность импортировать и экспортировать XML-файлы Microsoft Project в Диаграмму Ганта Syncfusion JavaScript. Поскольку наша диаграмма Ганта является веб-компонентом, ее может открыть любой пользователь. Это позволяет пользователям легко сотрудничать с менеджерами проектов.
В этом руководстве для начинающих вы узнаете, как импортировать и экспортировать XML-файлы Microsoft Project в диаграмму Ганта Syncfusion JavaScript.
Понимание XML-файлов в Microsoft Project
Microsoft Project считывает и сохраняет файлы в формате XML, который содержит всю информацию, связанную с проектом, включая задачи, ресурсы, сроки и зависимости.
Преимущество использования XML-файлов в Microsoft Projects заключается в том, что они предоставляют стандартизированный формат для обмена данными между различными инструментами управления проектами.
Это означает, что пользователи могут импортировать и экспортировать данные проекта в Microsoft Project и обратно с помощью файлов XML, независимо от используемого ими инструмента управления проектами.
Настройка диаграммы Ганта Syncfusion JavaScript для импорта и экспорта
Прежде чем продолжить, сначала обратитесь к документации по началу работы с диаграммой Ганта в JavaScript.
Вы можете выполнять действия импорта и экспорта, используя функциональные возможности панели инструментов диаграммы Ганта. Давайте создадим настраиваемые кнопки панели инструментов для действий экспорта и импорта и привяжем к ним событие щелчка на панели инструментов.
Обратитесь к следующему примеру кода.
var ganttChart = new ej.gantt.Gantt({ … toolbar: [{ text: 'Import', tooltipText: 'Import', id: 'ImportGantt', prefixIcon: 'e-import-icon tb-icons' }, { text: 'Export', tooltipText: 'Export', id: 'ExportGantt', prefixIcon: 'e-export-icon tb-icons' }], toolbarClick: toolbarClick, }); function toolbarClick(args) { … };
Осуществление импортно-экспортных действий
Я написал вспомогательный файл JS для действий импорта и экспорта. Он преобразует свойства диаграммы Ганта Syncfusion JavaScript в XML-схему файла Microsoft Project и наоборот. Обратитесь к этому вспомогательному файлу сценария: XMLImportExporthelper.js.
В событии щелчка на панели инструментов я вызвал метод xmlExport из вспомогательного файла для действия экспорта. Этот метод получает параметр URL-адреса удаленной службы, который необходим для загрузки данных в виде файла. Мы обсудим удаленные серверы позже в этом блоге.
Обратитесь к следующему примеру кода.
function toolbarClick(args) { if (args.item.id === 'ImportGantt') { document.getElementById("fileupload").click(); // Trigger Syncfusion Uploader } else if (args.item.id == "ExportGantt") { xmlExport("https://localhost:7281/api/XMLImport/ExportToXML"); } };
Для действия импорта я использовал элемент управления Syncfusion JavaScript Uploader для загрузки XML-файла. Я передал этот файл удаленной службе для процесса обработки файлов (чтение и преобразование XML-схемы в свойства диаграммы Ганта Syncfusion JavaScript), используя метод xmlImport вспомогательного файла.
Обратитесь к следующему примеру кода.
var uploadObj = new ej.inputs.Uploader({ autoUpload: false, allowedExtensions: ".xml", multiple: false, showFileList: false, selected: function (args) { ej.popups.showSpinner(document.getElementById('Default')); xmlImport({ file: args.filesData[0].rawFile }, "https://localhost:7281/api/XmlImport/Import" ); } });
Настройка удаленного сервиса
Нам нужен удаленный сервис для обработки операций чтения и записи файлов, как обсуждалось. Удаленный сервис был создан и размещен по следующему пути репозиторий GitHub.
После клонирования репозитория вы можете запустить службу и указать URL-адрес службы API в методах xmlImport и xmlExport на странице приложения.
Чтобы запустить службу, нам необходимо установить следующие пакеты NuGet:
После установки этих пакетов вы можете собрать и запустить службу.
См. следующие выходные изображения, где данные экспортируются из диаграммы Ганта Syncfusion JavaScript и импортируются в Microsoft Project.
Таким образом, вы также можете легко импортировать XML-файлы Microsoft Project в элемент управления «Диаграмма Ганта» JavaScript.
Ссылка на GitHub
Для получения более подробной информации обратитесь к демо в этом репозитории GitHub.
Заключение
Спасибо за прочтение! В этом блоге мы рассказали вам, как импортировать и экспортировать XML-файлы Microsoft Project в Диаграмму Ганта Syncfusion JavaScript. Попробуйте выполнить эти действия и поделитесь своим мнением в разделе комментариев ниже.
Вы уже являетесь пользователем Syncfusion? Скачать настройку продукта можно здесь. Если вы не являетесь пользователем Syncfusion, вы можете скачать бесплатную 30-дневную пробную версию здесь.
Если у вас есть вопросы, вы можете связаться с нами через наш форум поддержки, портал поддержки или портал обратной связи. Мы всегда рады Вам помочь!
Связанные блоги
- Отладка как профессионал: 10 советов по эффективному устранению неполадок JavaScript
- Что нового в 2023 году, том 2: текстовый процессор JavaScript
- Развитие адаптивного веб-дизайна: введение запросов CSS-контейнеров
- 5 интерфейсных веб-фреймворков, которые стоит рассмотреть помимо React
Оригинально опубликовано на сайте https://www.syncfusion.com 16 августа 2023 г.