Во многих системных модулях нам может потребоваться выполнить определенную обработку обмена данными, то есть операции импорта данных или экспорта. Такая пакетная обработка может дать пользователям системы лучший опыт работы и повысить эффективность пользователей, вводящих данные. На основании платформы начальной загрузки этот модуль обновляется и просматривается для офисных документов или картин.
1. Операция импорта данных
Как правило, в системных модулях существуют операции импорта данных и экспорта. Поэтому, когда интерфейс автоматически генерируется, я склонен автоматически генерировать эти стандартные запросы, импорт, экспорт и другие функции работы для пользователей. Эффект интерфейса выглядит следующим образом.
В платформе начальной загрузки я поместил его в качестве слоя и поместил его в файл index.cshtml, который может сделать весь интерфейс более обработанным. Пример кода показан ниже.
В целом, автоматически генерируются следующие коды, включая все необходимые поля. Как правило, мы приспособим поля по мере необходимости для удовлетворения нашего бизнеса и фактических потребностей.
<!--Import data operation layer-><div id="import" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true"></button> <h4>File import</h4> </div> <div> <div> <div style = "text-align: right; padding: 5px"> <a href = "~/content/template/user-template.xls" onclick = "javascript: preview ();"> <img src = "~/content/ico_excel.png"/> <span Style = "Font-Size: больше; /> <input id = "file_upload" name = "file_upload" type = "file" multy = "multy"> <a href = "javascript:;" " id = "btnupload" onclick = "javascript: $ ('#file_upload'). uploadify ('upload', '*')"> upload </a> <a href = "javascript:;" id = "btncancelupload" onclick = "javascript: $ ('#file_upload'). uploadify ('cancel', '*')"> Cancel </a> <div Id = "filequeue"> </div> <br/> <hr/> <div id = "div_files"> </div> <br/> </br/> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </hr/> <div Id = " id = "gridimport" cellPadding = "0" cellpacing = "0"> <thead Id = "gridimport_head"> <tr> <th> <input type = "fackbox" onclick = "selectall (this)"> </th> <Th> Пользовательский кодирование </th> <Th> name/login name </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> </th> Телефон </th> <Th> Office Phone </th> <Th> Адрес электронной почты </th> <Th> Пол </th> <T.> QQ Number </th> <Th> Замечания </th> </tr> </thead> <tbody id = "gridimport_body"> </tbody> </table> </div> <div> <div> <butdist_buttide_butdist '> "modal"/nealy "</table> </div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <flote type = "button" onclick = "saveImport ()"> save </button> </div> </div> </div> </div> </div> </div>Если мы хотим отобразить интерфейс операции импорта, нам нужно отобразить только этот слой, как показано в следующем сценарии.
// показать функцию интерфейса импорта showimport () {$ ("#import"). Modal ("show"); }Обработка загрузки файлов здесь в основном обрабатывается с использованием управления загрузкой. Конечно, вы также можете использовать элемент управления загрузкой ввода файла, который я внедрил ранее для обработки, что может хорошо достичь этих импортных операций.
В целом, код инициализации управления загрузкой следующим образом
$ (function () {// Добавить управление вложением интерфейса $ ('#file_upload'). uploadify ({'swf': '/content/jquerytools/uploadify/uploadify.swf', // flash -файл pail'buttontext ':' brows 'ouploadd Page'queueid ':' filequeue ', // идентификатор очереди' queuesizeLimit ': 1, // Максимальное количество файлов, которые можно загрузить в очередь, - это 999 "Auto': false //, автоматически загружен ли файл, если вы выбираете true 'releaft lement, releopte lemobled lemore -olected Последовательность после завершения, по умолчанию к True 'filesizeLimit': '10mb', // размер одного файла, 0 является неограниченным, может принять строковые значения в KB, MB, GB и других единицах 'fileTypedESC': 'Excel files', // файл файл. // Событие после всех очередей завершено // Код бизнес -обработки // Запрашивать пользователя, является ли формат Excel нормальным, если данные загружаются нормально}, «OnuploadStart»: function (file) {initupfile (); // перед загрузкой файла, сбросьте GUID, и каждый раз он отличается (#File_Upload.). «Импорт данных», «Guid»: $ ("#AtticleGuid"). Val ()});Ключевая логика:
// Код бизнес -обработки
Вообще говоря, мы получили здесь файл Excel на сервере, поэтому необходимо обработать формат этого файла. Если формат правильный, то мы отображаем данные для импорта пользователей для выбора записей и решают, какие записи импортируют.
Код, который обрабатывает проверку формата данных Excel, выглядит следующим образом.
// Позволяет пользователю, является ли формат Excel нормальным. Если данные загружаются нормально, $ .ajax ({url: '/user/checkexcelcolumns? Guid =' + guid, type: 'get', datatype: 'json', успех: функция (data) {if (data.success) {initGrid (); // Обновление данных таблицы (данные. Showtoast («Загруженная проверка файла Excel не удастся. Пожалуйста, введите данные в соответствии с форматом шаблона Excel в верхнем правом углу страницы.», «Ошибка»);Мы добавляем метод Ceckexcelcolumns в фоновом режиме, чтобы проверить формат поля файлов Excel. Только файлы, которые соответствуют требованиям формата, будут извлечены и отображаются на интерфейсе.
Код JS, отображаемый на интерфейсе, предназначен для извлечения содержимого файла Excel и привязки его с элементом таблицы.
// Запросить и связывать результат в соответствии с функцией условия initgrid () {var guid = $ ("#attoguid"). Val (); var url = "/user/getExceldata? guid =" + guid; $ .getJson (url, function (data) {$ ("#gridimport_body"). html (""); $. item.handno + "</td>"; "TD>" + ITER.Officephone + "</td>"; "</tr>"; }Чтобы дополнительно получить импорт пользователя в конкретный отдел, мы также можем вспомнить диалоговое окно и выбрать конкретную информацию и, наконец, отправить данные в фоновое предложение для обработки.
Код операции показан ниже.
// Сохранить импортируемую функцию данных saveImport () {// Присвоение объекту $ ("#company_id3"). SELECT2 ("val", @Session ["company_id"]). Trigger ('изменение'); $ ("#Dept_id3"). Select2 ("val", @Session ["dept_id"]). Trigger ('change'); $ ("#selectDept"). Modal ("Show"); }Таким образом, когда мы подтверждаем сохранение, нам нужно только отправить данные на фон через Ajax. Конкретный код JS выглядит следующим образом.
$.ajax({ url: '/User/SaveExcelData', type: 'post', dataType: 'json', contentType: 'application/json;charset=utf-8', traditional: true, success: function (data) { if (data.Success) { //Saves successfully 1. Close the pop-up layer, 2. Clear the record display 3. Refresh the main list showToast("Saves успешно "); $ ("#import "). Modal (" hide "); $ (bodytag) .html (" "); refresh ();} else {showtoast (" save ake: " + data.errormessage," error ");}}, data: postdata});2. Операция экспорта данных
Операция экспорта данных относительно проста. Вообще говоря, мы записываем данные в фиксированную таблицу Excel, а затем предоставляем URL пользователю для загрузки.
// Экспорт функции данных Excel ShowExport () {var url = "/user/export"; var condy = $ ("#ffsearch"). serialize (); // Получить условие executeexport (url, condition); // Выполнить экспорт}Конкретный логический код заключается в следующем
// выполнить операцию экспорта и выводить функцию файла executeexport (url, condition) {$ .ajax ({type: "post", url: url, data: condition, success: function (filepath) {var downure = '/fileupload/downloadfile?3. Просмотр и обработка вложений
В большинстве случаев нам может потребоваться просмотреть загруженные файлы, включая офисные документы, картинки и т. Д., Которые можно предварительно просмотреть. Это невозможно. Вы можете предоставить загрузки и открыть локально для их просмотра.
Предыдущий файл представил, что есть два способа предварительного просмотра офиса. Одним из них является использование предварительного обзора Microsoft Office для предварительного просмотра, а другой - использовать элементы управления для генерации HTML для предварительного просмотра. Эти два можно использовать в комбинации и настраивать по мере необходимости.
/// <summary> /// Получить соответствующий URL -адрес в соответствии с идентификатором вложения. /// Общие правила: если это файл изображения, верните адрес URL -адреса View '/fileupload/viewattach'; /// Если это офисный файл (Word, PPT, Excel) и т. Д., Вы можете просмотреть его через онлайн -адрес Microsoft: Если это другой файл, вы можете загрузить адрес напрямую. /// </summary> /// <param name = "id"> прикрепить идентификатор </param> /// <return> </return> public actionResult getAttachviewurl (String Id) {String viewUrl = ""; "; Fileuploadinfo info = bllfactory <fielupload> .instance.findbyid (id); if (info! = null) {string ext = info.fileextend.trim ('.'). tolower (); String filePath = getFilePath (info); Bool OfficeInternetView = FALSE; // использовать ли Интернет для предварительного просмотра string hostname = httputility.urlpathencode ("http://www.iqidi.com/"); // Вы можете настроить его, если (ext == "xls" || ext == "xlsx" || ext == " if (OfficeInternetView) {// возвращать адрес Microsoft в Office Office Office, вам необходимо добавить имя доменного домена или общедоступный IP -адрес viewUrl = string.format ("http://view.officeapps.live.com/op/view.aspx?src=_0/1}", hostname, filepath); } else {#region Динамически генерирует файл в первый раз // Проверьте, существует ли файл локального офиса. Если его не существует, создайте файл, а затем верните путь для просмотра строки webpath = string.format ("/GenerateFiles/Office/{0} .htm", info.id); string GenerateFilePath = server.mappath (webpath); if (! fileutil.fileisexist (GenerateFilePath)) {String TemplateFile = bllFactory <fileupload> .instance.getFilePath (info); Templatefile = path.combine (System.appdomain.currentdomain.basedIrectory, Templatefile.replace ("//", "/")); if (ext == "doc" || ext == "docx") {assope.words.document doc = new asope.words.document (templatefile); doc.save (GenerateFilePath, Aspose.words.saveformat.html); } else if (ext == "xls" || ext == "xlsx") {Workbook Workbook = новая рабочая книга (Templatefile); Workbook.save (GenerateFilePath, SaveFormat.html); } else if (ext == "ppt" || ext == "pptx") {templatefile = templatefile.replace ("/", "//"); PresentationEx pres = new PresentationEx (TemplateFile); pres.save (GenerateFilePath, Aspose.slides.export.saveformat.html); }} #endregion viewurl = webpath; }} else {viewUrl = filePath; }} return Content (viewUrl); }Благодаря этому фоному коду обработки мы можем правильно знать, какой URL используется при предварительном просмотре офиса.
Таким образом, на передней странице нам нужно только определить, какой он файл, а затем отобразить его.
if (type == "Image") {var imgcontent = '<img src = "' + viewurl + '" />'; $ ("#divviewfile"). Html (imgcontent); $ ("#file"). modal ("show"); } else {$ .ajax ({type: 'get', url: viewUrl, // async: false, // sync // sync // datatype: 'json', success: function (json) {$ ("#diviewfile"). html (json); $ ("#file"). ShowerRor ("Операция не удалось" + xhr.responsetext); }Код в нем
$ ("#file"). modal ("show");Мы называем глобальное диалоговое окно для отображения конкретного контента, эффект выглядит следующим образом.
Эффект предварительного просмотра документа: следующее:
Или когда мы просматриваем файл изображения, мы можем получить эффект интерфейса следующим образом:
Выше приведено соответствующее содержание метода Metronic Development Framework Metronic Development Framework [7] импорт данных, экспорт и просмотр аксессуаров и обработка. Я надеюсь, что это будет полезно для всех. Если вы хотите узнать больше информации, обратите внимание на веб -сайт wulin.com. Здесь редактор хотел бы поблагодарить вас за поддержку веб -сайта wulin.com!