Dalam banyak modul sistem, kita mungkin perlu melakukan pemrosesan pertukaran data tertentu, yaitu, impor data atau operasi ekspor. Pemrosesan batch semacam itu dapat memberi pengguna sistem pengalaman operasi yang lebih baik dan meningkatkan efisiensi pengguna yang memasukkan data. Berdasarkan kerangka Bootstrap, modul ini diperbarui dan dilihat untuk dokumen atau gambar kantor.
1. Operasi Impor Data
Secara umum, ada operasi impor dan ekspor data dalam modul sistem. Oleh karena itu, ketika antarmuka dihasilkan secara otomatis, saya cenderung secara otomatis menghasilkan permintaan standar, impor, ekspor, dan fungsi operasi lainnya untuk pengguna. Efek antarmuka adalah sebagai berikut.
Dalam kerangka bootstrap, saya menaruhnya sebagai lapisan dan meletakkannya di file index.cshtml, yang dapat membuat seluruh antarmuka diproses lebih dekat. Kode sampel ditunjukkan di bawah ini.
Secara umum, kode -kode berikut secara otomatis dihasilkan, termasuk semua bidang yang diperlukan. Kami umumnya menyesuaikan bidang sesuai kebutuhan agar sesuai dengan kebutuhan bisnis dan aktual kami.
<!-Impor Lapisan Operasi Data-> <div id = "impor" tabIndex = "-1" role = "dialog" aria-labeledby = "mymodallabel" aria-hidden = "true"> <verv> <v div> <Div> </Tombol Div> Tombol Data = "Modal" HIDENT = "TUTT//TOLOM </TOLOD> </TUTT/TOLOD </H4> HIDMISS =" Modal "HIDDENDS =" TUTLED "> </TUTT/TOLOX/TUTTMISS =" Modal "HIDDEND =" TUTT/TUTT/TUTT/TUTT/TUTT/TUTT/TOLOD </H4. style = "Text-Align: Right; Padding: 5px"> <a href = "~/content/template/user-template.xls" onclick = "javascript: preview ();"> <img src = "~/content/gambar/ico_excel.png"/<span = "/content/images/ico_excel.png"/<span = "/content/images/ico_excel.png"/<span = "/content/images/ico_excel.png"/<span/span =/content/images/ico_excel.png "/<span/span style = "font-size: lebih besar; font-weight: 200; warna: merah"> user-emplate.xls </span> </a> </div> <hr/> <form id = "ffimport" metode = "post"> <div style = "padding: 5px" options = "iconcls: 'icon-icon-key' name = "lampiran" /> <input id = "file_upload" name = "file_upload" type = "file" multipel = "multipel"> <a href = "javascript :;" id = "btnupload" ontClick = "javascript: $ ('#file_upload'). unggah ('unggah', '*')"> Unggah </a> <a href = "javascript :;" id = "btncancelupload" ontClick = "javaScript: $ ('#file_upload'). DEADLOADIFE ('Batal', '*')"> Batal </a> <Div id = "Filequeue"> </Div> <bR/> <hr/> <d ID = "Div_files"> </Div> <bR/> <hr/> <d ID = "div_files"> </Div> id = "gridImport" cellPadding = "0" cellPacing = "0"> <thead id = "gridImport_head"> <tr> <th> <input type = "centang kotak" onclick = "selectAll (this)"> </th> <t> Posisi Pengguna </th> <tr> nama pengguna/name loin </th> <t th phone</th> <th>Office phone</th> <th>Email address</th> <th>Gender</th> <th>QQ number</th> <th>Remarks</th> </tr> </thead> <tbody id="gridImport_body"></tbody> </table> </div> <div> <button type="button" data-dismiss="modal">Close</button> <button type = "tombol" ontClick = "saveImport ()"> save </button> </div> </div> </div> </div> </div> </div>Jika kami ingin menampilkan antarmuka operasi impor, kami hanya perlu menampilkan lapisan ini, seperti yang ditunjukkan pada skrip berikut.
// Tunjukkan fungsi antarmuka impor showImport () {$ ("#impor"). Modal ("show"); }Pemrosesan unggahan file di sini terutama diproses menggunakan kontrol unggah. Tentu saja, Anda juga dapat menggunakan kontrol unggahan input file yang saya perkenalkan sebelumnya untuk pemrosesan, yang dapat mencapai operasi impor ini dengan baik.
Secara umum, kode inisialisasi kontrol unggah adalah sebagai berikut
$ (function () {// Tambahkan manajemen lampiran antarmuka $ ('#file_upload'). DEADIFY ({'swf': '/content/jquerytools/uploadify/uploadify.swf', // flash file path'buttontext ':' brows ', // tombol flash' flashoad ':' brows ',//flashoad/unggah' flash ' page'queueid ':' filequeue ', // antrian id' queuesizelimit ': 1, // jumlah maksimum file yang dapat diunggah dalam antrian adalah 999' otomatis ': false, // apakah file yang akan diunggah secara otomatis setelah memilih file, default benar' Multi ': false, // Urutan Setelah selesai, default ke 'FileizelImit' True ':' 10MB ', // Ukuran file tunggal, 0 tidak terbatas, dapat menerima nilai string dalam KB, MB, GB, dan unit lainnya' FileTypeDesc ':' Excel Files ', // File Deskripsi'FileTypeExts': '*.xls', / /unggah file {{{evilexe '{evilexe': ',', ', // {evilexe {evilexe' {evilexe ' Setelah semua antrian diselesaikan // kode pemrosesan bisnis // meminta pengguna apakah format Excel normal, jika data dimuat secara normal}, 'onuploadStart': function (file) {initupfile (); // sebelum mengunggah file, unggah kembali, dan setiap kali lipatan ("#file_upload" {{{{{{{{{{{"{{{{{{{" {{{{{{{"," File 'Guid': $ ("#lampiran"). Val ()});Logika kuncinya adalah:
// kode pemrosesan bisnis
Secara umum, kami telah memperoleh file Excel di server di sini, sehingga format file ini perlu diproses. Jika formatnya benar, maka kami menampilkan data untuk mengimpor pengguna untuk memilih catatan dan memutuskan catatan mana yang akan diimpor.
Kode yang menangani memeriksa format data Excel adalah sebagai berikut.
// minta pengguna apakah format Excel normal. Jika data dimuat secara normal, $ .AJAX ({URL: '/USER/CHECKEXCELCOLUMNS? GUID =' + GUID, TYPE: 'GET', DATATYPE: 'JSON', SUCCESS: FUNGSI (DATA) {if (DATA.SUCCESS) {initgrid (); // Refresh Tabel Data Showtoast {{{{Data) {{Data) {{{Data) {{Data) {{Data) {{data) {{data) {data) {data) {) ShowToast ("Pemeriksaan File Excel yang diunggah gagal. Harap masukkan data sesuai dengan format Template Excel di sudut kanan atas halaman.", "Kesalahan");Kami menambahkan metode CheckExcelColumns di latar belakang untuk memeriksa format bidang file Excel. Hanya file yang memenuhi persyaratan format yang akan diambil dan ditampilkan pada antarmuka.
Kode JS yang ditampilkan pada antarmuka adalah untuk mengekstrak konten file Excel dan mengikatnya ke elemen tabel.
// query dan bind hasilnya sesuai dengan fungsi kondisi initgrid () {var guid = $ ("#lampiran"). Val (); var url = "/user/getExcelData? Guid =" + GUID; $ .getjson (url, function (data) {$ ("#gridImport_body"). html (""); $ .each (data.rows, function (i, item) {var tr = "<tr>"; tr += "<td> <input class = 'checkbox' tipe =/" centang/"name =/" <td> <input class = 'centang "typbox =/" checkbox/"name =/" name = " item.handno + "</td>"; "<td>" + item.officephone + "</td>"; "</tr>"; }Untuk lebih lanjut mendapatkan impor pengguna ke departemen tertentu, kami juga dapat memunculkan kotak dialog dan memilih informasi spesifik, dan akhirnya mengirimkan data ke latar belakang untuk diproses.
Kode operasi ditunjukkan di bawah ini.
// Simpan fungsi data yang diimpor saveImport () {// tetapkan ke objek $ ("#company_id3"). Select2 ("val", @Session ["company_id"]). Trigger ('ubah'); $ ("#Dept_id3"). Select2 ("Val", @Session ["Dept_id"]). Trigger ('ubah'); $ ("#selectdept"). Modal ("show"); }Dengan cara ini, ketika kami mengkonfirmasi penghematan, kami hanya perlu mengirimkan data ke latar belakang melalui Ajax. Kode JS spesifik adalah sebagai berikut.
$ .AJAX ({url: '/user/saveExcelData', type: 'Post', DataType: 'json', ContentType: 'Application/JSON; Charset = UTF-8', Tradisional: Tradisional, Sukses: Fungsi (Data) {if (data.success) {// Simpan berhasil 1. TUTUP LAYAN POP-UP, LAG UP (DATA. berhasil "); $ ("#impor "). Modal (" hide "); $ (bodytag) .html (" "); refresh ();} else {showtoast (" save gagal: " + data.rormessage," error ");}}, data: postdata});2. Operasi Ekspor Data
Operasi ekspor data relatif sederhana. Secara umum, kami menulis data ke tabel Excel tetap dan kemudian memberikan URL kepada pengguna untuk diunduh.
// Ekspor Fungsi Data Excel ShowExport () {var url = "/user/export"; var condition = $ ("#ffsearch"). Serialize (); // Dapatkan Kondisi ExecuteExport (URL, kondisi); // Jalankan Ekspor}Kode logika spesifik adalah sebagai berikut
// Jalankan operasi ekspor dan output fungsi file executeexport (url, condition) {$ .Ajax ({type: "Post", url: url, data: condition, success: function (filepath) {var downurl = '/fileupload/unduhan?3. Melihat dan Pemrosesan Lampiran
Dalam kebanyakan kasus, kita mungkin perlu melihat file yang diunggah, termasuk dokumen kantor, gambar, dll., Yang dapat dipratinjau. Itu tidak mungkin. Anda dapat memberikan unduhan dan membuka secara lokal untuk melihatnya.
File sebelumnya memperkenalkan bahwa ada dua cara untuk mempratinjau kantor. Salah satunya adalah menggunakan alamat pratinjau Microsoft Office untuk pratinjau, dan yang lainnya adalah menggunakan kontrol untuk menghasilkan HTML untuk pratinjau. Keduanya dapat digunakan dalam kombinasi dan mengkonfigurasi sesuai kebutuhan.
/// <summary> /// Dapatkan URL tampilan yang sesuai sesuai dengan ID lampiran. /// Aturan Umum: Jika itu adalah file gambar, kembalikan alamat URL tampilan '/Fileupload/ViewAttach'; /// Jika itu adalah file kantor (Word, ppt, excel), dll., Anda dapat melihatnya melalui alamat tampilan online Microsoft: 'http://view.officeApps.live.com/op/view.aspx?src=', /// Anda juga dapat menghasilkan file html secara lokal. Jika itu adalah file lain, Anda dapat mengunduh alamat secara langsung. /// </summary> /// <param name = "id"> lampirkan id </param> /// <returns> </eturns> public actionResult getAttachViewUrl (string id) {string viewUrl = ""; FileuploadInfo info = bllfactory <FILEUPLOAD> .Instance.findbyId (ID); if (info! = null) {string ext = info.fileExtend.trim ('.'). Tolower (); string filepath = getFilePath (info); bool OfficeInternetView = false; // apakah akan menggunakan internet untuk melihat pratinjau hostname = httputility.urlpathencode ("http://www.iqidi.com/"); // Anda dapat mengonfigurasi jika (ext == "xls" || ext == "xlsx" if (OfficeInternetView) {// Mengembalikan alamat Microsoft untuk menjelajahi Office Online, Anda perlu menambahkan nama domain Internet atau alamat IP publik viewUrl = string.Format ("http://view.officeApps.live.com/oph.aspx?src=/{OFFICEAPPS.LIVE.com, FilePATH); } else {#Region secara dinamis menghasilkan file untuk pertama kalinya // Periksa apakah ada file kantor lokal. Jika tidak ada, buat file, dan kemudian kembalikan jalur untuk melihat string 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") {aspose.words.document doc = new aspose.words.document (templateFile); doc.save (generateFilePath, aspose.words.saveFormat.html); } lain jika (ext == "xls" || ext == "xlsx") {workbook workbook = buku kerja baru (templateFile); workbook.save (generateFilePath, saveFormat.html); } else if (ext == "ppt" || ext == "pptx") {templateFile = templateFile.replace ("/", "//"); Presentationex pres = presentationex baru (templateFile); pres.save (generateFilePath, aspose.slides.export.saveFormat.html); }} #endregion viewUrl = webpath; }} else {viewUrl = filepath; }} return content (viewUrl); }Melalui kode pemrosesan latar belakang ini, kita dapat dengan benar mengetahui URL mana yang digunakan saat pratinjau kantor.
Dengan cara ini, di halaman front-end, kita hanya perlu menentukan file mana dan kemudian menampilkannya.
if (type == "gambar") {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) {$ ("#divviewFile"). html (json); $ ("#file"). showerror ("Operasi Gagal" + xhr.Responsetext); }Kode di dalamnya
$ ("#file"). Modal ("show");Kami memanggil kotak dialog global untuk menampilkan konten tertentu, efeknya adalah sebagai berikut.
Efek pratinjau dokumen kata adalah sebagai berikut:
Atau ketika kita melihat file gambar, kita bisa mendapatkan efek antarmuka sebagai berikut:
Di atas adalah konten yang relevan dari ringkasan Pengalaman Pengembangan Metronik Bootstrap [7] Impor Data, Ekspor, dan Pandangan dan Pemrosesan Aksesori. Saya harap ini akan membantu semua orang. Jika Anda ingin mengetahui informasi lebih lanjut, harap perhatikan situs web Wulin.com. Di sini, editor ingin mengucapkan terima kasih atas dukungan Anda untuk situs web Wulin.com!