في العديد من وحدات النظام ، قد نحتاج إلى إجراء معالجة معينة لتبادل البيانات ، أي عمليات استيراد البيانات أو تصديرها. هذه المعالجة الدُفعات يمكن أن تمنح مستخدمي النظام تجربة تشغيل أفضل وتحسين كفاءة المستخدمين الذين يدخلون البيانات. استنادًا إلى إطار bootstrap ، يتم تحديث هذه الوحدة وعرضها لمستندات المكاتب أو الصور.
1. عملية استيراد البيانات
بشكل عام ، هناك عمليات استيراد البيانات والتصدير في وحدات النظام. لذلك ، عند إنشاء الواجهة تلقائيًا ، أميل إلى إنشاء هذه الاستعلام القياسي والاستيراد والتصدير ووظائف التشغيل الأخرى للمستخدمين تلقائيًا. تأثير الواجهة كما يلي.
في إطار bootstrap ، وضعته كطبقة ووضعته في ملف index.cshtml ، والذي يمكن أن يجعل الواجهة بأكملها معالجتها بشكل أوثق. يظهر رمز العينة أدناه.
بشكل عام ، يتم إنشاء الرموز التالية تلقائيًا ، بما في ذلك جميع الحقول المطلوبة. نحن عمومًا نصيح الحقول حسب الحاجة لتناسب أعمالنا والاحتياجات الفعلية.
<!-استيراد طبقة تشغيل البيانات-> <div id = "import" tabIndex = "-1" "aled =" dialog "aria-labelledby =" mymodallabel "aria-hidden =" true " <div style = "text-align: right ؛ padding: 5px"> <a href = "~/content/template/user-template.xls" onClick = "javaScript: Preview () ؛ style = "font-size: أكبر ؛ font-weight: 200 ؛ color: red"> user-template.xls </aa> </a> </viv> <hr/> <form id = "ffimport" method = "post"> <div style = "padding: 5px "- Options =" iconcls: "icon-kea /> <input id = "file_upload" name = "file_upload" type = "file" multives = "multire"> <a href = "javaScript :؛" id = "btnupload" onClick = "javaScript: $ ('#file_upload'). UploadIfy ('Upload' ، '*')"> التحميل </a> <a href = "javaScript :؛" id = "btncancelupload" onClick = "javaScript: $ ('#file_upload'). Uploadify ('cancel' ، '*')" id = "gridimport" cellpadding = "0" cellpacing = "0"> <thead id = "gridimport_head"> <tr> <th> <thar type = "checkbox" onClick = "Selectall (this)"> </th> <th> مستخدم ترميز </th> <th> اسم المستخدم/اسم تسجيل الدخول <th> الهاتف </h> <th> هاتف Office </th> <th> عنوان البريد الإلكتروني </th> <th> الجنس </th> <th> qq رقم </th> <th> ملاحظات </th> </tr> </thead> <tbody id = "gridimport_body"> </tbody> </table> </div> اكتب = "زر" onClick = "SaveImport ()"> حفظ </button> </viv> </viv> </viv> </viv> </viv> </viv>إذا أردنا عرض واجهة تشغيل الاستيراد ، فنحن بحاجة فقط إلى عرض هذه الطبقة ، كما هو موضح في البرنامج النصي التالي.
// إظهار وظيفة واجهة الاستيراد showimport () {$ ("#import"). Modal ("show") ؛ }تتم معالجة معالجة تحميل الملف هنا بشكل أساسي باستخدام عنصر تحكم التحميل. بالطبع ، يمكنك أيضًا استخدام التحكم في تحميل إدخال الملف الذي أدخلته سابقًا للمعالجة ، والتي يمكنها تحقيق عمليات الاستيراد هذه بشكل جيد.
بشكل عام ، يكون رمز التهيئة لعنصر تحكم التحميل كما يلي
$ (function () {// أضف إدارة المرفقات للواجهة $ ('#file_upload'). UploadIfy ({'swf': '/content/jquerytools/upload/uploadify.swf' ، // flash path'buttontext ':' brows '، // button ext. تم تحميل page'queueid ':' filequeue '، // queue id' queuesizeLiMit ': 1 ، // الحد الأقصى لعدد الملفات التي يمكن تحميلها في قائمة الانتظار هي 999 تسلسل بعد الانتهاء ، الافتراضي إلى "filesizeLimit" الحقيقي: "10 ميجابايت" ، // حجم ملف واحد ، 0 غير محدود ، يمكن أن يقبل قيم السلسلة في KB و MB و GB والوحدات الأخرى "filetypedesc": "ملفات Excel" ، // file description'filetypeexts ':'*.xls '، // filediled filed' // الحدث بعد جميع قوائم الانتظار يتم إكماله // رمز معالجة الأعمال // مطالبة المستخدم ما إذا كان تنسيق Excel طبيعيًا ، إذا تم تحميل البيانات بشكل طبيعي} ، 'OnUploadStart': function (file) {initupfile () ؛ "المجلد": "ملف استيراد البيانات" ، "$" ("#إرفاق").المنطق الرئيسي هو:
// رمز معالجة الأعمال
بشكل عام ، لقد حصلنا على ملف Excel في الخادم هنا ، لذلك يجب معالجة تنسيق هذا الملف. إذا كان التنسيق صحيحًا ، فعندئذ نعرض البيانات لاستيراد المستخدمين لاختيار السجلات وتحديد السجلات التي يجب استيرادها.
الرمز الذي يتولى التحقق من تنسيق بيانات Excel كما يلي.
// ادعى المستخدم ما إذا كان تنسيق Excel طبيعيًا. إذا تم تحميل البيانات بشكل طبيعي ، $ .ajax ({url: '/user/checkexcelcolumns؟ guid =' guid ، type: 'get' ، datatype: 'json' ، success: function (data) {if (data.success) {initgrid () ؛ ShowToast ("فشل فحص ملف Excel المحمّل. الرجاء إدخال البيانات وفقًا لتنسيق قالب Excel في الزاوية اليمنى العليا من الصفحة." ، "خطأ") ؛نضيف طريقة checkexcelcolumns في الخلفية للتحقق من تنسيق حقل ملفات Excel. سيتم استرداد الملفات فقط التي تلبي متطلبات التنسيق وعرضها على الواجهة.
رمز JS المعروض على الواجهة هو استخراج محتوى ملف Excel وربطه بعنصر الجدول.
// الاستعلام وربط النتيجة وفقًا لوظيفة الشرط initGrid () {var guid = $ ("#attachguid"). val () ؛ var url = "/user/getExcelData؟ guid =" + guid ؛ $ .getjson (url ، function (data) {$ ("#gridimport_body"). item.Handno + "</td>" ؛ "<td>" + item.officephone + "</td>" ؛ "</tr>" ؛ }من أجل الحصول على واردات المستخدم إلى القسم المحدد ، يمكننا أيضًا الظهور على مربع حوار وتحديد معلومات محددة ، وأخيراً إرسال البيانات إلى الخلفية للمعالجة.
يظهر رمز التشغيل أدناه.
// حفظ وظيفة البيانات المستوردة SaveImport () {// تعيين للكائن $ ("#company_id3"). select2 ("val" ، @session ["Company_id"]). Trigger ('Change') ؛ $ ("#dept_id3"). select2 ("val" ، session ["dept_id"]). Trigger ('change') ؛ $ ("#selectDept"). modal ("show") ؛ }وبهذه الطريقة ، عندما نؤكد الحفظ ، نحتاج فقط إلى إرسال البيانات إلى الخلفية من خلال AJAX. رمز JS المحدد كما يلي.
$ .ajax ({url: '/user/saveexceldata' ، النوع: 'post' ، datatype: 'json' ، contentType: 'application/json ؛ charset = utf-8' ، التقليدية: صواب ، النجاح: دالة (data) {data.sucess) بنجاح ") ؛ $ ("#import "). Modal (" Hide ") ؛ $ (bodytag) .html (" ") ؛ refresh () ؛} else {showtoast (" حفظ فشل:2. تشغيل تصدير البيانات
عملية تصدير البيانات بسيطة نسبيًا. بشكل عام ، نكتب البيانات في جدول Excel ثابت ثم نوفر عنوان URL للمستخدم للتنزيل.
// تصدير وظيفة بيانات Excel showexport () {var url = "/user/export" ؛ VAR CONDY = $ ("#ffsearch"). Serialize () ؛ // الحصول على الشرط ExecuteExport (url ، الشرط) ؛ // تنفيذ التصدير}رمز المنطق المحدد كما يلي
.
3. عرض ومعالجة المرفقات
في معظم الحالات ، قد نحتاج إلى عرض الملفات التي تم تحميلها ، بما في ذلك مستندات المكاتب والصور وما إلى ذلك ، والتي يمكن معاينتها. هذا غير ممكن. يمكنك توفير التنزيلات وفتح محليًا لعرضها.
قدم الملف السابق أن هناك طريقتان لمعاينة المكتب. أحدهما هو استخدام عنوان معاينة Microsoft Office للمعاينة ، والآخر هو استخدام عناصر التحكم لإنشاء HTML للمعاينة. يمكن استخدام الاثنين في تركيبة وتكوين حسب الحاجة.
/// <summary> /// احصل على عنوان URL للعرض المقابل وفقًا لمعرف المرفق. /// القواعد العامة: إذا كان ملف صورة ، فقم بإرجاع عنوان عنوان URL "/fileupload/viewattach" ؛ /// إذا كان ملف Office (Word ، PPT ، Excel) ، وما إلى ذلك ، يمكنك عرضه من خلال عنوان عرض Microsoft عبر الإنترنت: 'http://view.officeapss.live.com/op/view.aspx؟src=' ، /// يمكنك أيضًا إنشاء ملفات HTML محليًا. إذا كان ملفًا آخر ، فيمكنك تنزيل العنوان مباشرة. /// </summary> /// <param name = "id"> إرفاق معرف </param> /// </returns> الإجراءات العامة getattachviewurl (string id) {String viewurl = "" "؛ fileUploadInfo info = bllfactory <IbleUpload> .instance.findbyid (id) ؛ if (info! = null) {string ext = info.filextend.trim ('.'). tolower () ؛ سلسلة filePath = getFilePath (info) ؛ Bool OfficeInternetView = false ؛ // ما إذا كان لاستخدام الإنترنت لمعاينة مضيف سلسلة المعاينة = httputily.urlpathencode ("http://www.iqidi.com/") ؛ // يمكنك تكوينه إذا (ext == "xls" (OfficeInternetView) {// إرجاع عنوان Microsoft إلى تصفح Office عبر الإنترنت ، تحتاج إلى إضافة اسم مجال الإنترنت أو عنوان IP العام = string.format ("http://view.officeapps.live.com/op/view.aspx؟src {}}" ، Hostname ، filepath) ؛ } آخر {#Region يقوم بإنشاء ملف ديناميكيًا لأول مرة // تحقق مما إذا كان ملف المكتب المحلي موجودًا. إذا لم يكن موجودًا ، فقم بإنشاء ملف ، ثم قم بإرجاع المسار لعرض سلسلة WebPath = string.format ("/generatefiles/Office/{0} .htm" ، info.id) ؛ سلسلة generateFilePath = server.mappath (webpath) ؛ if (! fileutil.fileisexist (generateFilePath)) {String templatefile = bllfactory <IbleUpload> .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) ؛ } آخر إذا (ext == "xls" || ext == "xlsx") {workbook workbook = new workbook (templatefile) ؛ Workbook.save (generatefilepath ، saveFormat.html) ؛ } آخر إذا (ext == "ppt" || ext == "pptx") {templatefile = templatefile.replace ("/" ، "//") ؛ PresentiveEx pres = new PresentationEx (templatefile) ؛ pres.save (generatefilepath ، aspose.slides.export.saveformat.html) ؛ }} #endregion viewurl = webpath ؛ }} آخر {viewurl = filePath ؛ }} محتوى الإرجاع (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") دش (فشل العملية " + xhr.responsetext) ؛ }الرمز فيه
$ ("#file"). modal ("show") ؛ندعو مربع الحوار العالمي لعرض المحتوى المحدد ، يكون التأثير كما يلي.
تأثير معاينة وثيقة Word كما يلي:
أو عندما ننظر إلى ملف الصورة ، يمكننا الحصول على تأثير الواجهة على النحو التالي:
ما ورد أعلاه هو المحتوى ذي الصلة من ملخص تجربة تطوير Bootstrap Metronic Development [7] استيراد البيانات وتصديرها ومشاهدة الملحقات والمعالجة. آمل أن يكون ذلك مفيدًا للجميع. إذا كنت ترغب في معرفة المزيد من المعلومات ، فيرجى الانتباه إلى موقع Wulin.com. هنا ، يود المحرر أن يشكرك على دعمك لموقع Wulin.com!