In vielen Systemmodulen müssen wir möglicherweise eine bestimmte Datenaustauschverarbeitung, dh Datenimport- oder Exportvorgänge, durchführen. Eine solche Stapelverarbeitung kann den Systemnutzern ein besseres Betriebserlebnis bieten und die Effizienz von Benutzern, die Daten eingeben, verbessern. Basierend auf dem Bootstrap -Framework wird dieses Modul aktualisiert und für Bürodokumente oder Bilder angezeigt.
1. Datenimportbetrieb
Im Allgemeinen gibt es Datenimport- und Exportvorgänge in Systemmodulen. Wenn die Schnittstelle automatisch generiert wird, neige ich dazu, diese Standardabfrage-, Import-, Export- und andere Betriebsfunktionen für Benutzer automatisch zu generieren. Der Schnittstelleneffekt ist wie folgt.
Im Bootstrap -Framework habe ich sie als Ebene eingelegt und in die Datei idex.cshtml gestellt, mit der die gesamte Schnittstelle enger verarbeitet werden kann. Der Beispielcode ist unten angezeigt.
Im Allgemeinen werden die folgenden Codes automatisch generiert, einschließlich aller erforderlichen Felder. Wir majitieren im Allgemeinen Felder nach Bedarf, um unseren geschäftlichen und tatsächlichen Bedürfnissen zu entsprechen.
<!--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: rechts; padding: 5px"> <a href = "~/content/template/user-template.xls" onclick = "javaScript: preview ();"> <img src = "~/content/Images/ico_excel.png"/> <span span style = "Schriftgröße: Größer; Schriftgewicht: 200; Farbe: rot"> Benutzer-template /> <input id = "Datei_Upload" name = "file_Upload" type = "Datei" multiple = "multiple"> <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 /> </div> </form> <!--Data display table--> <table id="gridImport" cellpadding="0" cellpacing="0"> <thead id="gridImport_head"> <tr> <th><input type="checkbox" onclick="selectAll(this)"></th> <th>User encoding</th> <th>User name/login name</th> <th>Real name</th> <th>Position title</th> <th>Mobile Telefon </th> <Th> Büro Telefon </th> <th> E-Mail-Adresse </th> <th> Geschlecht </th> <th> qq Nummer </th> <th> Bemerkungen </th> </tr> </thead> <tbody id = "gridimport_body"> </tbody> </table> </div> </div> </div> </button = button = button type = "button" onclick = "SaveImport ()"> speichern </button> </div> </div> </div> </div> </div> </div>Wenn wir die Import -Operation -Schnittstelle anzeigen möchten, müssen wir diese Ebene nur anzeigen, wie im folgenden Skript gezeigt.
// Zeigen Sie die Funktion der Schnittstelle importieren showimport () {$ ("#import"). Modal ("show"); }Die Datei -Upload -Verarbeitung hier wird hauptsächlich mit der Uploadify -Steuerung verarbeitet. Natürlich können Sie auch die Dateieingabe -Upload -Steuerung verwenden, die ich früher für die Verarbeitung eingeführt habe, wodurch diese Importvorgänge gut erzielt werden können.
Im Allgemeinen lautet der Initialisierungscode der Uploadify -Steuerung wie folgt
$(function () { //Add the attachment management of the interface $('#file_upload').uploadify({ 'swf': '/Content/JQueryTools/uploadify/uploadify.swf', //FLash file path'buttonText': 'brows', //Button text'uploader': '/FileUpload/Upload', //Processing uploaded Page'Queueid ':' Filequeue ', // Warteschlangen -ID' Queuesizelimit ': 1, // Die maximale Anzahl von Dateien, die in der Warteschlange hochgeladen werden können Die Sequenz nach Abschluss, standardmäßig für true 'fileSizeLimit': '10mb', // einzelne Dateigröße, 0 ist unbegrenzt, kann Stringwerte in KB, MB, GB und anderen Einheiten 'Filetypedesc': 'Excel -Dateien', // Dateibeschreibung 'Filtertexs': '*.xls', // Datei -Datei -Datei -Datei -Datei -Datei -Filter ': Funktion: // Updated -Datei', // Uploaded -Dateien ', // // Uploaded -Datei', // Updoded -Datei ', // Updoded -Datei', // Updodeded -Datei ', akzeptieren. // Ereignis Nachdem alle Warteschlangen abgeschlossen sind // Geschäftsbearbeitungscode // Auffordern Sie den Benutzer, ob das Excel -Format normal ist, wenn die Daten normal geladen werden}, 'OnuploadStart': Funktion (Datei) {initupFile (); // Vor dem Hochladen der Datei, die Richtlinie zurücksetzen, und jedes Mal ist es unterschiedlich ("#File_Upload". "Daten importieren", "GUID": "#Attachguid"). Val ()});Die Schlüssellogik ist:
// Geschäftsbearbeitungscode
Im Allgemeinen haben wir hier eine Excel -Datei im Server erhalten, sodass das Format dieser Datei verarbeitet werden muss. Wenn das Format korrekt ist, zeigen wir die Daten zum Importieren von Benutzern an, um Datensätze auszuwählen und zu entscheiden, welche Datensätze importiert werden sollen.
Der Code, der das Überprüfen von Excel -Datenformat übernimmt, lautet wie folgt.
// fordern Sie den Benutzer auf, ob das Excel -Format normal ist. Wenn die Daten normal geladen werden, $ .ajax ({url: '/user/schickexcelcolumns? Guid =' + Guid, Typ: 'get', DataType: 'JSON', Erfolg: Funktion (Daten) {if (data.success) {initGrid (); // Auffrischung der Tabellendaten ("Die Datei wurde" Die Datei wurde "Die Datei wurde geladen. SHOWTOAST ("Die hochgeladene Überprüfung der Excel -Datei schlägt fehl. Bitte geben Sie Daten gemäß dem Excel -Vorlagenformat in der oberen rechten Ecke der Seite ein.", "Fehler");Wir fügen im Hintergrund eine ScheckkexcelColumns -Methode hinzu, um das Feldformat von Excel -Dateien zu überprüfen. Es werden nur Dateien abgerufen und auf der Schnittstelle angezeigt.
Der auf der Schnittstelle angezeigte JS -Code besteht darin, den Inhalt der Excel -Datei zu extrahieren und an das Tabellenelement zu binden.
// das Ergebnis nach der Bedingungsfunktion initGrid () {var Guid = $ ("#cattguid"). Val () abfragen und binden; var url = "/user/getExceldata? Guid =" + Guid; $ .getjson (url, function (data) {$ ("#Gridimport_body"). item.Handno + "</td>"; "<Td>" + item.Officephone + "</td>"; "</tr>"; }Um die Benutzerimporte für die spezifische Abteilung weiter zu erhalten, können wir auch ein Dialogfeld eröffnen und bestimmte Informationen auswählen und schließlich die Daten zur Verarbeitung an den Hintergrund senden.
Der Betriebscode ist unten angezeigt.
// Speichern Sie die importierte Datenfunktion SaveImport () {// dem Objekt $ ("#company_id3"). Select2 ("val", @session ["company_id"]). Trigger ('Änderung'); $ ("#Dept_id3"). Select2 ("val", @session ["Dept_id"]). Trigger ('Änderung'); $ ("#selectDept"). modal ("show"); }Auf diese Weise müssen wir beim Bestätigen des Speicherns die Daten nur über AJAX an den Hintergrund senden. Der spezifische JS -Code ist wie folgt.
$ .ajax ({url: '/user/savexceldata', Typ: 'post', DataType: 'JSON', ContentType: 'application/json; charset = utf-8', traditionell: TRUE, Erfolg: Erfolg: Funktion (Daten) {if (Data.Success) {// Save Saves Saves erfolgreich. erfolgreich "); $ ("#import "). modal (" hide ");2. Datenexportbetrieb
Der Datenexportbetrieb ist relativ einfach. Im Allgemeinen schreiben wir die Daten in eine feste Excel -Tabelle und geben dem Benutzer die URL zum Herunterladen zur Verfügung.
// Exporte Excel Data Function showexport () {var url = "/user/export"; var Condition = $ ("#ffSearch"). Serialize (); // Erhalten Sie den Zustand executeExport (URL, Bedingung); // Führen Sie den Export} aus} ausDer spezifische Logikcode ist wie folgt
// Führen Sie den Exportvorgang aus und geben Sie die Dateifunktion aus, die executeExport (URL, Bedingung) {$ .ajax ({Typ: "post", url: url, Daten: Bedingung, Erfolg: Funktion (filepath) {var Downurl = '/FileUpload/DownloadFile? Datei =' + Filepath;3.. Betrachten und Verarbeitung von Anhängen
In den meisten Fällen müssen wir möglicherweise die hochgeladenen Dateien, einschließlich Office -Dokumente, Bilder usw., anzeigen, die eine Vorschau aufgenommen werden können. Es ist nicht möglich. Sie können Downloads bereitstellen und lokal öffnen, um sie anzuzeigen.
In der vorherigen Datei wurde vorgestellt, dass es zwei Möglichkeiten gibt, das Amt anzunehmen. Eine davon ist die Verwendung der Vorschau -Adresse von Microsoft Office für die Vorschau, und das andere besteht darin, Steuerelemente zu verwenden, um HTML für die Vorschau zu generieren. Die beiden können in Kombination verwendet und nach Bedarf konfiguriert werden.
/// <summary> /// Erhalten Sie die entsprechende Ansichts -URL gemäß der Anhangs -ID. /// Allgemeine Regeln: Wenn es sich um eine Bilddatei handelt, geben Sie die URL -Adresse von Ansicht '/FileUpload/Viewattach' zurück. /// Wenn es sich um eine Office -Datei (Word, PPT, Excel) usw. handelt, können Sie sie über die Online -Anzeigeadresse von Microsoft anzeigen: 'http://view.officeapps.live.com/op/view.aspx?src=', ///. Wenn es sich um eine andere Datei handelt, können Sie die Adresse direkt herunterladen. /// </summary> /// <param name = "id"> id id </param> /// <rückgabe> </returns> public actionResult getattachViewurl (String -ID) {String ViewUrl = ""; FileUploadInfo info = Bllfactory <Dateintastload> .Instance.findbyId (ID); if (info! = null) {string ext = info.filextend.trim ('.'). Tolower (); String filepath = getFilePath (Info); Bool OfficeInternetView = false; // Ob das Internet für Vorschau -String -Hostname = httputility.urlpathocode ("http://www.iqidi.com/"); // Sie können es konfigurieren, if (ext == "xls" || ext == "ext ==" {| | (OfficeInternetView) {// eine Microsoft -Adresse zurückgeben, um Online -Büro zu durchsuchen, müssen Sie einen Internet -Domain -Namen oder eine publische IP -Adresse Viewurl = string.format ("http://view.officeApps.live.com/op/view.aspx?src= <EfriceApps}", Hostname, filepath) hinzufügen; } else {#region generiert dynamisch Datei zum ersten Mal // Überprüfen Sie, ob die lokale Bürodatei vorhanden ist. Wenn es nicht vorhanden ist, erstellen Sie eine Datei und geben Sie dann den Pfad zum Anzeigen von String webpath = string.format ("/generateFiles/ora/{0} .htm", info.id) zurück; String generateFilepath = server.mappath (webpath); if (! FileUtil.Fileisexist (generateFilepath)) {String templateFile = Bllfactory <Dateintelload> .Instance.getFilepath (info); templateFile = path.combine (system.appdomain.currentdomain.basedirectory, templateFile.replace ("//", "/")); if (ext == "doc" || ext == "docx") {asspose.words.document doc = new aswords.document (templatefile); doc.save (generateFilepath, asspose.words.saveformat.html); } else if (ext == "xls" || ext == "xlsx") {Workbook Workbook = New Workbook (TemplateFile); workbook.save (generateFilepath, SaveFormat.html); } else if (ext == "ppt" || ext == "pptX") {templateFile = templateFile.replace ("/", "//"); Präsentationsex Pres = New PresentationEx (TemplateFile); Pres.Save (generateFilepath, asspose.slides.export.saveformat.html); }} #endregion viewUrl = webpath; }} else {viewUrl = filepath; }} return content (viewUrl); }Durch diesen Hintergrundverarbeitungscode können wir korrekt wissen, welche URL bei der Vorschau von Büro verwendet wird.
Auf diese Weise müssen wir auf der Front-End-Seite nur bestimmen, welche Datei sie ist, und dann anzeigen.
if (type == "Bild") {var imgContent = '<img src = "' + viewUrl + '" />'; $ ("#divviewFile"). Html (imgContent); $ ("#file"). modal ("show"); } else {$ .ajax ({type: 'get', url: viewUrl, // async: false, // sync // sync // dataType: 'json', Erfolg: function (json) {$ ("#divviewFile"). Duschror ("Operation fehlgeschlagen" + xhr.responsetext); }Der Code drin
$ ("#file"). modal ("show");Wir rufen das globale Dialogfeld an, um den spezifischen Inhalt anzuzeigen. Der Effekt ist wie folgt.
Der Word -Dokument -Vorschau -Effekt lautet wie folgt:
Oder wenn wir die Bilddatei anzeigen, können wir den Schnittstelleneffekt wie folgt erhalten:
Das obige ist der relevante Inhalt der Zusammenfassung des Bootstrap -Metronik -Entwicklungsrahmens [7] Datenimport, Export und Zubehör anzeigen und verarbeitet. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie weitere Informationen wissen möchten, achten Sie bitte auf die Website wulin.com. Hier bedankt sich der Herausgeber für Ihre Unterstützung für die Wulin.com -Website!