Использование файлов 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-дневную пробную версию здесь.

Если у вас есть вопросы, вы можете связаться с нами через наш форум поддержки, портал поддержки или портал обратной связи. Мы всегда рады Вам помочь!

Связанные блоги

Оригинально опубликовано на сайте https://www.syncfusion.com 16 августа 2023 г.