Dans de nombreux modules système, nous devrons peut-être effectuer un certain traitement d'échange de données, c'est-à-dire l'importation de données ou les opérations d'exportation. Un tel traitement par lots peut offrir aux utilisateurs du système une meilleure expérience de fonctionnement et améliorer l'efficacité des utilisateurs entrant dans les données. Sur la base du framework bootstrap, ce module est mis à jour et visualisé pour les documents ou les photos de bureau.
1. Fonctionnement d'importation de données
Généralement, il existe des opérations d'importation de données et d'exportation dans les modules système. Par conséquent, lorsque l'interface est générée automatiquement, j'ai tendance à générer automatiquement ces fonctions de requête standard, d'importation, d'exportation et d'autres opérations pour les utilisateurs. L'effet d'interface est le suivant.
Dans le framework Bootstrap, je l'ai mis comme une couche et je l'ai placé dans le fichier index.cshtml, ce qui peut rendre l'interface entière plus étroitement traitée. L'exemple de code est illustré ci-dessous.
En général, les codes suivants sont générés automatiquement, y compris tous les champs requis. Nous adaptons généralement les champs au besoin pour répondre à nos besoins commerciaux et réels.
<! - Importer les données de la couche de fonctionnement -> <div id = "import" tabindex = "- 1" role = "dialog" aria-labelledby = "mymodallabel" aria-hidden = "true"> <div> <v> <v> <Button type = "Button" data-dismiss = "modal" aria-hidden = "true"> </ bouton> <h4> Import de fichier </ h4> <div style = "text-adign: right; padding: 5px"> <a href = "~ / contenu / template / user-template.xls" onclick = "javascript: préview ();"> <img src = "~ / contenu / images / ico_excel.png" /> <span Style = "Font-Size: plus grand; Font-Weight: 200; Color: Red"> User-Template.xls </span> </a> </div> <hr /> <form Id = "fFimport" Method = "Post"> <div style = "Padding: 5px" Data-Options = "ICONCLS:" ICON-KEK /> <input id = "file_upload" name = "file_upload" type = "file" 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 ('annuler', '*')"> annuler </a> <div id = "filequeue"> </ div> <br /> <hr /> <hrome id = "gridIMPort" cellpadding = "0" CellPacing = "0"> <thead id = "gridIMPORT_HEAD"> <tr> <th> <entrée type = "Checkbox" onClick = "Selectall (this)"> </ th> <th> réel </th> <th> Positionner le nom de mobilier </ th> <th> Nom </ th> <th> Positionner le nom de mobile </ Th> <th> REAL NAME </ TH> <TH> Positionner le nom de mobile </ TH> <th> REAL NAME </th> Téléphone </th> <th> Téléphone de bureau </th> <th> Adresse e-mail </th> <th> Sexe </th> <Th> Qq Number </ Th> <Th> Remarques </th> </tr> </thead> <tBody ID = "GridImport_Body"> </tbody> </ Table> </v> <v> <bouton type = "Button" Data-Disms = "Modali type = "Button" onClick = "SaveImport ()"> Enregistrer </ Button> </div> </div> </div> </div> </div> </div>Si nous voulons afficher l'interface d'opération d'importation, nous avons seulement besoin d'afficher ce calque, comme indiqué dans le script suivant.
// affiche la fonction d'interface d'import showIMPort () {$ ("# import"). Modal ("show"); }Le traitement de téléchargement de fichiers ici est principalement traité à l'aide du contrôle Uploadify. Bien sûr, vous pouvez également utiliser le contrôle de téléchargement d'entrée de fichier que j'ai introduit plus tôt pour le traitement, ce qui peut bien réaliser ces opérations d'importation.
En général, le code d'initialisation du contrôle de téléchargement est le suivant
$ (function () {// Ajouter la gestion de la pièce jointe de l'interface $ ('# file_upload'). uploloadify ({'swf': '/content/jquerytools/uploadify/uploadify.swf', // filemal path'buttontext ':' brows ', // bouton texter': '/ fileupload / upload', // Processorded Page'QueiDer ':' / fileupload / upload ', // Processorded Page'Quel': '/ fileupload / upload', // Processorded Page ' «filequeue», // id de file d'attente «files d'identification»: 1, // Le nombre maximum de fichiers qui peuvent être téléchargés dans la file d'attente est 999 `` auto '': false, // si le fichier est automatiquement téléchargé après avoir sélectionné le fichier, la défaut est vrai «Multi»: false, // c'est la sélection multiple, par défaut, la suppléation par défaut ' 'filesizelimit': '10 Mo', // la taille d'un fichier unique, 0 est illimité, peut accepter les valeurs de chaîne dans KB, MB, GB et d'autres unités 'FileTypeDesc': 'Excel Files', // Fichier Description'FileTySexts ':' * .xls ', // Fichier Fichier File completed//Business processing code//Prompt the user whether the Excel format is normal, if the data is loaded normally}, 'onUploadStart': function (file) { InitUpFile();//Before uploading the file, reset the GUID, and each time it is different ("#file_upload").uploadify("settings", 'formData', { 'folder': 'data import file', 'guid': $ ("# Jointguid"). Val ()});La logique clé est:
// Code de traitement des affaires
De manière générale, nous avons obtenu un fichier Excel dans le serveur ici, donc le format de ce fichier doit être traité. Si le format est correct, nous affichons les données d'importation des utilisateurs pour choisir des enregistrements et décider quels enregistrements importeraient.
Le code qui gère la vérification du format de données Excel est le suivant.
// invite l'utilisateur si le format Excel est normal. Si les données sont chargées normalement, $ .ajax ({URL: '/ user / checkExcelColumns? Guid =' + Guid, type: 'get', dataType: 'json', Success: function (data) {if (data.success) {initgrid (); // refrex the table data showtoast ("le fichier a été téléchargé, les données ont été chargées!"); showtoast ("La vérification du fichier Excel téléchargé échoue. Veuillez saisir les données en fonction du format de modèle Excel dans le coin supérieur droit de la page.", "Erreur");}});Nous ajoutons une méthode CheckExcelColumns en arrière-plan pour vérifier le format de champ des fichiers Excel. Seuls les fichiers qui répondent aux exigences du format seront récupérés et affichés sur l'interface.
Le code JS affiché sur l'interface consiste à extraire le contenu du fichier Excel et à le lier à l'élément de table.
// requête et lier le résultat en fonction de la fonction de condition initGrid () {var Guid = $ ("# attachGuid"). Val (); var url = "/ user / getExcelData? Guid =" + Guid; $ .getjson (URL, fonction (data) {$ ("# gridImport_body"). html (""); $ .each (data.rows, fonction (i, item) {var tr = "<tr>"; tr + = "<td> <entrée class = 'checkboxes' type = /" checkbox / "name =" checkbox / "> </td>"; tr + " item.Handno + "</ td>"; "TD>" + item.officephone + "</ td>"; "</ tr>"; $ ("# GridImport_Body"). }Afin d'obtenir davantage les importations d'utilisateurs au service spécifique, nous pouvons également faire apparaître une boîte de dialogue et sélectionner des informations spécifiques, et enfin soumettre les données à l'arrière-plan pour le traitement.
Le code d'opération est illustré ci-dessous.
// Enregistrez la fonction de données importée SaveImport () {// Attribuez à l'objet $ ("# Company_ID3"). SELECT2 ("Val", @Session ["Company_id"]). Trigger ('Change'); $ ("# Dept_id3"). Select2 ("val", @Session ["Dept_id"]). Trigger ('change'); $ ("# selectDept"). modal ("show"); }De cette façon, lorsque nous confirmons la sauvegarde, nous n'avons qu'à soumettre les données à l'arrière-plan via AJAX. Le code JS spécifique est le suivant.
$ .ajax ({url: '/ user / savexceldata', type: 'post', dataType: 'json', contentType: 'application / json; charset = utf-8', traditionnel: true, succès: fonction (data) {if (data.success) {// sauve la liste principale. avec succès "); $ (" # import "). modal (" hide "); $ (bodytag) .html (" "); refresh ();} else {showToast (" Save a échoué: "+ data.errormessage," error ");}}, data: postdata});2. Fonctionnement d'exportation de données
L'opération d'exportation de données est relativement simple. De manière générale, nous écrivons les données dans une table Excel fixe, puis fournissons l'URL à l'utilisateur à télécharger.
// Export Excel Data Fonction showExport () {var url = "/ user / export"; var condition = $ ("# ffSearch"). Serialize (); // Obtenez la condition ExecuteExport (URL, condition); // Exécuter l'exportation}Le code logique spécifique est le suivant
// Exécuter l'opération d'exportation et la sortie de la fonction de fichier ExecuteExport (URL, condition) {$ .ajax ({type: "post", url: url, data: condition, succès: function (filepath) {var downUrl = '/ fileupload / téléchargement? File =' + filepath; window.Location = Downurl;}});}3. Affichage et traitement des pièces jointes
Dans la plupart des cas, nous devrons peut-être afficher les fichiers téléchargés, y compris les documents de bureau, les photos, etc., qui peuvent être prévisualisés. Ce n'est pas possible. Vous pouvez fournir des téléchargements et ouvrir localement pour les voir.
Le fichier précédent a présenté qu'il existe deux façons de prévisualiser le bureau. L'un consiste à utiliser l'adresse d'aperçu de Microsoft Office pour l'aperçu, et l'autre consiste à utiliser des contrôles pour générer du HTML pour l'aperçu. Les deux peuvent être utilisés en combinaison et configurer au besoin.
/// <summary> /// Obtenez l'URL de vue correspondante en fonction de l'ID de pièce jointe. /// Règles générales: S'il s'agit d'un fichier image, renvoyez l'adresse de l'URL de vue '/ fileupload / ViewAttach'; /// s'il s'agit d'un fichier de bureau (Word, PPT, Excel), etc., vous pouvez le visualiser via l'adresse de visualisation en ligne de Microsoft: 'http://view.officieapps.live.com/op/view.aspx?src=', /// Vous pouvez également générer des fichiers HTML localement. S'il s'agit d'un autre fichier, vous pouvez télécharger directement l'adresse. /// </summary> /// <param name = "id"> attacher id </ param> /// <retourne> </ returns> 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; // Il faut utiliser Internet pour prévisualiser String hostname = httutility.urlpathencode ("http://www.iqidi.com/"); // Vous pouvez le configurer if (ext == "xls" || ext == "xlsx" | 'Ext == "Doc" || Ext == "Docx" | (OfficeInternetView) {// Renvoie une adresse Microsoft à Browse Office Online, vous devez ajouter un nom de domaine Internet ou une adresse IP publique ViewUrl = String.Format ("http://view.officeApps.live.com/OP/View.aspx?src= {0 {1}", hostname, filepath); } else {#Region génère dynamiquement un fichier pour la première fois // vérifie si le fichier de bureau local existe. S'il n'existe pas, créez un fichier, puis renvoyez le chemin d'accès à la visualisation de String webPath = String.Format ("/ GenerateFiles / Office / {0} .htm", info.id); String generateFilePath = server.mappath (webPath); if (! fileUtil.fileisexist (generateFilePath)) {String templateFile = bllfactory <FichEupload> .instance.getFilePath (info); templateFile = path.Chaute (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); } else if (ext == "xls" || ext == "xlsx") {workbook workbook = new Workbook (templatefile); Workbook.Save (générerFilePath, SaveFormat.html); } else if (ext == "ppt" || ext == "pptx") {templateFile = templatefile.replace ("/", "//"); PresentationEx pres = new présentationEx (templatefile); Pres.save (GenerateFilePath, aspose.slides.export.saveformat.html); }} #EndRegion ViewUrl = webPath; }} else {ViewUrl = filepath; }} return contenu (ViewUrl); }Grâce à ce code de traitement d'arrière-plan, nous pouvons savoir correctement quelle URL est utilisée lors de l'aperçu de l'Office.
De cette façon, sur la page frontale, nous devons seulement déterminer de quel fichier il s'agit, puis l'afficher.
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', succès: function (json) {$ ("# divViewFile"). html (json); $ ("# file"). modal ("show");}, error: function (xhr, statut,. DownRor ("Operation a échoué" + xhr.ResponSeText); }Le code dedans
$ ("# file"). modal ("show");Nous appelons la boîte de dialogue globale pour afficher le contenu spécifique, l'effet est le suivant.
L'effet d'aperçu du document Word est le suivant:
Ou lorsque nous affichons le fichier image, nous pouvons obtenir l'effet d'interface comme suit:
Ce qui précède est le contenu pertinent du résumé de l'expérience du cadre de développement métronique de bootstrap [7] Importation des données, exportation et traitement et traitement des accessoires. J'espère que ce sera utile à tout le monde. Si vous souhaitez en savoir plus, veuillez faire attention au site Web de Wulin.com. Ici, l'éditeur tient à vous remercier pour votre soutien pour le site Web de Wulin.com!