ประสบการณ์สรุปของกรอบการพัฒนาเมโทรนิต

ในหลายโมดูลระบบเราอาจต้องดำเนินการประมวลผลการแลกเปลี่ยนข้อมูลบางอย่างนั่นคือการนำเข้าข้อมูลหรือการส่งออก การประมวลผลแบบแบตช์ดังกล่าวสามารถให้ประสบการณ์การทำงานที่ดีขึ้นแก่ผู้ใช้และปรับปรุงประสิทธิภาพของผู้ใช้ที่ป้อนข้อมูล ขึ้นอยู่กับเฟรมเวิร์ก Bootstrap โมดูลนี้ได้รับการอัปเดตและดูสำหรับเอกสารหรือรูปภาพสำนักงาน

1. การดำเนินการนำเข้าข้อมูล

โดยทั่วไปจะมีการดำเนินการนำเข้าและส่งออกข้อมูลในโมดูลระบบ ดังนั้นเมื่ออินเทอร์เฟซถูกสร้างขึ้นโดยอัตโนมัติฉันมักจะสร้างแบบสอบถามมาตรฐานการนำเข้าการส่งออกและฟังก์ชั่นการดำเนินการอื่น ๆ โดยอัตโนมัติสำหรับผู้ใช้ เอฟเฟกต์อินเตอร์เฟสมีดังนี้

ในเฟรมเวิร์ก Bootstrap ฉันใส่เป็นเลเยอร์และวางไว้ในไฟล์ index.cshtml ซึ่งสามารถทำให้อินเทอร์เฟซทั้งหมดประมวลผลได้อย่างใกล้ชิดยิ่งขึ้น รหัสตัวอย่างแสดงด้านล่าง

โดยทั่วไปรหัสต่อไปนี้จะถูกสร้างขึ้นโดยอัตโนมัติรวมถึงฟิลด์ทั้งหมดที่ต้องการ โดยทั่วไปเราจะปรับแต่งฟิลด์ตามความจำเป็นเพื่อให้เหมาะกับธุรกิจและความต้องการที่แท้จริงของเรา

 <!-นำเข้าเลเยอร์การทำงานของข้อมูล-> <div id = "นำเข้า" tabindex = "-1" role = "กล่องโต้ตอบ" aria-labelledby = "mymodallabel" aria-hidden = "true"> <div> <div> <div> <button type = "data-dismiss =" modal style = "text-allign: ขวา; padding: 5px"> <a href = "~/content/template/user-template.xls" onclick = "JavaScript: Preview ();"> <img src = "~/images/images/ico_excel.png"/> < style = "Font-Size: ใหญ่กว่า; Font-Weight: 200; Color: Red"> User-template.xls </span> </a> </div> <hr/> <form id = "ffimport" method = "post"> <div style = "padding: 5px" data-options = "iconcls: /> <อินพุต id = "file_upload" name = "file_upload" type = "file" multiple = "multiple"> <a href = "javascript:;" id = "btnupload" onclick = "javascript: $ ('#file_upload'). uploadify ('อัปโหลด', '*')"> อัปโหลด </a> <a href = "JavaScript:;" id = "btncancelupload" onclick = "javascript: $ ('#file_upload'). uploadify ('ยกเลิก', '*')"> ยกเลิก </a> <div id = "filequeue"> </div> <br/> <hr/> <div id = id = "gridimport" cellpadding = "0" cellpacing = "0"> <thead id = "gridimport_head"> <tr> <th> <อินพุตประเภท = "ช่องทำเครื่องหมาย" onclick = "เลือกชื่อผู้ใช้ </th> โทรศัพท์ </th> <th> โทรศัพท์สำนักงาน </th> <th> ที่อยู่อีเมล </th> <th> เพศ </th> <th> หมายเลข qq </th> <th> หมายเหตุ </th> </tr> </thead> <tbody id = "gridimport_body"> </tbody> type = "button" onclick = "saveimport ()"> บันทึก </button> </div> </div> </div> </div> </div> </div>

หากเราต้องการแสดงอินเตอร์เฟสการดำเนินการนำเข้าเราจะต้องแสดงเลเยอร์นี้ดังที่แสดงในสคริปต์ต่อไปนี้

 // แสดงฟังก์ชั่นอินเตอร์เฟสนำเข้า ShowImport () {$ ("#import"). modal ("show"); -

การประมวลผลการอัปโหลดไฟล์ที่นี่ส่วนใหญ่จะถูกประมวลผลโดยใช้การควบคุมการอัปโหลด แน่นอนคุณสามารถใช้การควบคุมการอัปโหลดไฟล์ที่ฉันแนะนำก่อนหน้านี้สำหรับการประมวลผลซึ่งสามารถบรรลุการดำเนินการนำเข้าเหล่านี้ได้ดี

โดยทั่วไปรหัสการเริ่มต้นของการควบคุมการอัปโหลดมีดังนี้

 $ (function () {// เพิ่มการจัดการไฟล์แนบของอินเตอร์เฟส $ ('#file_upload'). uploadify ({'swf': '/content/jquerytools/uploadify/uploadify.swf' page'queueid ':' filequeue ', // queue id' queuesizeLimit ': 1, // จำนวนสูงสุดของไฟล์ที่สามารถอัปโหลดในคิวคือ 999' auto ': เท็จ // ไม่ว่าไฟล์จะถูกอัปโหลดโดยอัตโนมัติ หลังจากเสร็จสิ้นค่าเริ่มต้นเป็นจริง 'filesizeLimit': '10MB', // ขนาดไฟล์เดี่ยว, 0 ไม่ จำกัด สามารถยอมรับค่าสตริงใน KB, MB, GB และหน่วยอื่น ๆ คิวเสร็จสมบูรณ์ // รหัสการประมวลผลทางธุรกิจ // แจ้งให้ผู้ใช้ทราบว่ารูปแบบ excel เป็นเรื่องปกติหรือไม่ถ้าข้อมูลถูกโหลดตามปกติ}, 'onuploadStart': ฟังก์ชั่น (ไฟล์) {initupfile (); // ก่อนอัปโหลดไฟล์รีเซ็ต GUID และแต่ละครั้ง 'Guid': $ ("#แนบ"). val ()});

ตรรกะสำคัญคือ:

// รหัสการประมวลผลธุรกิจ

โดยทั่วไปแล้วเราได้รับไฟล์ Excel ในเซิร์ฟเวอร์ที่นี่ดังนั้นรูปแบบของไฟล์นี้จะต้องดำเนินการ หากรูปแบบถูกต้องเราจะแสดงข้อมูลสำหรับการนำเข้าผู้ใช้เพื่อเลือกบันทึกและตัดสินใจว่าจะบันทึกใดที่จะนำเข้า

รหัสที่จัดการการตรวจสอบรูปแบบข้อมูล Excel มีดังนี้

 // แจ้งให้ผู้ใช้ทราบว่ารูปแบบ excel เป็นเรื่องปกติหรือไม่ หากข้อมูลถูกโหลดตามปกติ, $ .ajax ({url: '/user/checkexcelcolumns? guid =' + guid, type: 'get', datatype: 'json', ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) {ถ้า (data.success) {initgrid (); // showtoast ("การตรวจสอบไฟล์ excel ที่อัปโหลดล้มเหลวโปรดป้อนข้อมูลตามรูปแบบเทมเพลต Excel ที่มุมบนขวาของหน้า", "ข้อผิดพลาด");}}});

เราเพิ่มเมธอด checkexcelcolumns ในพื้นหลังเพื่อตรวจสอบรูปแบบฟิลด์ของไฟล์ excel เฉพาะไฟล์ที่ตรงตามข้อกำหนดของรูปแบบเท่านั้นที่จะถูกดึงและแสดงบนอินเทอร์เฟซ

รหัส JS ที่แสดงบนอินเทอร์เฟซคือการแยกเนื้อหาของไฟล์ Excel และผูกไว้กับองค์ประกอบตาราง

 // คำถามและผูกผลลัพธ์ตามฟังก์ชันเงื่อนไข initGrid () {var guid = $ ("#attachGuid"). val (); var url = "/ผู้ใช้/getExcelData? guid =" + guid; $ .getJson (url, ฟังก์ชั่น (ข้อมูล) {$ ("#gridimport_body"). html (""); $ .each (data.rows, ฟังก์ชั่น (i, รายการ) {var tr = "<tr>"; tr += "<td> <อินพุตคลาส = ' item.handno + "</td>"; "<td>" + item.officephone + "</td>"; "</tr>" $ ("#gridimport_body"). -

เพื่อให้ได้การนำเข้าของผู้ใช้ไปยังแผนกเฉพาะเพิ่มเติมเรายังสามารถปรากฏกล่องโต้ตอบและเลือกข้อมูลเฉพาะและส่งข้อมูลไปยังพื้นหลังสำหรับการประมวลผล

รหัสการทำงานแสดงอยู่ด้านล่าง

 // บันทึกฟังก์ชั่นข้อมูลที่นำเข้า saveimport () {// กำหนดให้กับวัตถุ $ ("#company_id3") select2 ("val", @session ["company_id"]). ทริกเกอร์ ('เปลี่ยน'); $ ("#dept_id3"). select2 ("val", @session ["dept_id"]). ทริกเกอร์ ('เปลี่ยน'); $ ("#selectdept"). modal ("show"); -

ด้วยวิธีนี้เมื่อเรายืนยันการบันทึกเราจะต้องส่งข้อมูลไปยังพื้นหลังผ่าน AJAX เท่านั้น รหัส JS เฉพาะมีดังนี้

 $ .ajax ({url: '/user/saveExceldata', ประเภท: 'โพสต์', ข้อมูลประเภท: 'json', contentType: 'แอปพลิเคชัน/json; charset = utf-8', แบบดั้งเดิม: จริง, ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) {if (data.success) ประสบความสำเร็จ "); $ ("#import "). modal (" ซ่อน "); $ (bodytag) .html (" "); รีเฟรช ();} อื่น {showtoast (" บันทึกล้มเหลว: " + data.errormessage," ข้อผิดพลาด ");}}, ข้อมูล: postdata});

2. การดำเนินการส่งออกข้อมูล

การดำเนินการส่งออกข้อมูลค่อนข้างง่าย โดยทั่วไปเราเขียนข้อมูลลงในตาราง Excel ที่แก้ไขแล้วจากนั้นจัดเตรียม URL ให้กับผู้ใช้เพื่อดาวน์โหลด

 // ส่งออกฟังก์ชั่นข้อมูล excel showexport () {var url = "/ผู้ใช้/ส่งออก"; เงื่อนไข var = $ ("#ffsearch"). serialize (); // รับเงื่อนไข executexport (URL, เงื่อนไข); // ดำเนินการส่งออก}

รหัสตรรกะเฉพาะมีดังนี้

 // ดำเนินการส่งออกและส่งออกฟังก์ชั่นไฟล์ executeExport (URL, เงื่อนไข) {$ .ajax ({ประเภท: "โพสต์", url: url, ข้อมูล: เงื่อนไข, ความสำเร็จ: ฟังก์ชั่น (filepath) {var downurl = '/fileupload/rownoad? ไฟล์ =' + filepath; window.location = downurl;

3. การดูและการประมวลผลไฟล์แนบ

ในกรณีส่วนใหญ่เราอาจต้องดูไฟล์ที่อัปโหลดรวมถึงเอกสารสำนักงานรูปภาพ ฯลฯ ซึ่งสามารถดูตัวอย่างได้ เป็นไปไม่ได้ คุณสามารถให้การดาวน์โหลดและเปิดในพื้นที่เพื่อดูพวกเขา

ไฟล์ก่อนหน้านี้แนะนำว่ามีสองวิธีในการดูตัวอย่าง Office หนึ่งคือการใช้ที่อยู่ดูตัวอย่างของ Microsoft Office เพื่อดูตัวอย่างและอื่น ๆ คือการใช้การควบคุมเพื่อสร้าง HTML สำหรับการแสดงตัวอย่าง ทั้งสองสามารถใช้ร่วมกันและกำหนดค่าได้ตามต้องการ

 /// <summary> /// รับ URL มุมมองที่สอดคล้องกันตามรหัสไฟล์แนบ /// กฎทั่วไป: หากเป็นไฟล์รูปภาพให้ส่งคืนที่อยู่ URL ดู '/fileupload/viewattach'; /// หากเป็นไฟล์สำนักงาน (Word, PPT, Excel) ฯลฯ คุณสามารถดูได้ผ่านที่อยู่การดูออนไลน์ของ Microsoft: 'http://view.officapps.live.com/op/view.aspx?src=', /// คุณสามารถสร้างไฟล์ html ในเครื่อง หากเป็นไฟล์อื่นคุณสามารถดาวน์โหลดที่อยู่ได้โดยตรง /// </summary> /// <param name = "id"> แนบ ID </param> /// <returns> </returns> ActionResult Public GetattachViewUrl (String ID) {String ViewUrl = ""; fileuploadinfo info = bllfactory <fileupload> .instance.findbyid (id); if (info! = null) {string ext = info.fileextend.trim ('.'). toLower (); String filePath = getFilePath (ข้อมูล); BOOL OfficeInternetView = false; // ไม่ว่าจะใช้อินเทอร์เน็ตเพื่อดูตัวอย่างสตริงโฮสต์ = httputility.urlpathencode ("http://www.iqidi.com/"); // คุณสามารถกำหนดค่าได้ถ้า (ext == "xls" || ext == "xlsx" | | (OfficeInternetView) {// ส่งคืนที่อยู่ Microsoft ไปยังสำนักงานออนไลน์คุณต้องเพิ่มชื่อโดเมนอินเทอร์เน็ตหรือที่อยู่ IP สาธารณะ Viewurl = String.format ("http://view.officapps.live.com/op/view.aspx } else {#region สร้างไฟล์แบบไดนามิกเป็นครั้งแรก // ตรวจสอบว่ามีไฟล์สำนักงานท้องถิ่นอยู่หรือไม่ หากไม่มีอยู่ให้สร้างไฟล์จากนั้นส่งคืนพา ธ สำหรับการดูสตริง webPath = string.format ("/generateFiles/Office/{0} .htm", info.id); String generateFilePath = server.mappath (WebPath); if (! fileutil.fileisexist (generateFilePath)) {สตริง templateFile = bllfactory <fileupload> .instance.getFilePath (ข้อมูล); templateFile = path.combine (system.appdomain.currentdomain.basedirectory, templatefile.replace ("//", "/")); if (ext == "doc" || ext == "docx") {aspose.words.document doc = new aspose.words.document (templatefile); doc.save (generateFilePath, aspose.words.saveformat.html); } อื่นถ้า (ext == "xls" || ext == "xlsx") {เวิร์กบุ๊กเวิร์กบุ๊ก = สมุดงานใหม่ (TemplateFile); Workbook.save (GenerateFilePath, saveFormat.html); } อื่นถ้า (ext == "ppt" || ext == "pptx") {templateFile = templateFile.replace ("/", "//"); PresentationEx PRES = PresentationEx ใหม่ (TemplateFile); pres.save (generateFilePath, aspose.slides.export.saveformat.html); }} #ENDREGION ViewURL = WebPath; }} else {viewUrl = filePath; }} ส่งคืนเนื้อหา (ViewUrl); -

ผ่านรหัสการประมวลผลพื้นหลังนี้เราสามารถทราบได้อย่างถูกต้องว่า URL ใดที่ใช้เมื่อดูตัวอย่าง

ด้วยวิธีนี้ในหน้า front-end เราจำเป็นต้องกำหนดไฟล์ว่าเป็นไฟล์ใดแล้วแสดง

 if (type == "image") {var imgContent = '<img src = "' + viewurl + '" />'; $ ("#divviewfile"). html (imgcontent); $ ("#ไฟล์"). modal ("show"); } else {$ .ajax ({type: 'get', url: viewurl, // async: false, // sync // sync // datatype: 'json', ความสำเร็จ: ฟังก์ชั่น (json) {$ ("#divviewfile") Showerror ("การดำเนินการล้มเหลว" + xhr.responsetext); -

รหัสในนั้น

 $ ("#ไฟล์"). modal ("show");

เราเรียกกล่องโต้ตอบทั่วโลกเพื่อแสดงเนื้อหาเฉพาะเอฟเฟกต์มีดังนี้

เอฟเฟกต์ตัวอย่างเอกสารคำมีดังนี้:

หรือเมื่อเราดูไฟล์ภาพเราสามารถรับเอฟเฟกต์อินเทอร์เฟซดังนี้:

ข้างต้นเป็นเนื้อหาที่เกี่ยวข้องของ Bootstrap Metronic Development Framework Framework สรุปประสบการณ์ [7] การนำเข้าข้อมูลการส่งออกและการดูและการประมวลผลอุปกรณ์เสริม ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดให้ความสนใจกับเว็บไซต์ Wulin.com ที่นี่บรรณาธิการขอขอบคุณสำหรับการสนับสนุนเว็บไซต์ Wulin.com!