En muchos módulos del sistema, es posible que necesitemos realizar ciertos procesos de intercambio de datos, es decir, operaciones de importación o exportación de datos. Dicho procesamiento por lotes puede brindar a los usuarios del sistema una mejor experiencia operativa y mejorar la eficiencia de los usuarios que ingresan a los datos. Basado en el marco Bootstrap, este módulo se actualiza y se ve para documentos o imágenes de la oficina.
1. Operación de importación de datos
En general, hay operaciones de importación y exportación de datos en módulos del sistema. Por lo tanto, cuando la interfaz se genera automáticamente, tiendo a generar automáticamente estas funciones estándar de consulta, importación, exportación y otras operaciones para los usuarios. El efecto de la interfaz es el siguiente.
En el marco Bootstrap, lo puse como una capa y la coloqué en el archivo index.cshtml, lo que puede hacer que toda la interfaz se procese más. El código de muestra se muestra a continuación.
En general, los siguientes códigos se generan automáticamente, incluidos todos los campos requeridos. En general, adaptamos los campos según sea necesario para satisfacer nuestro negocio y necesidades reales.
< <Div style = "Text-Align: Right; Padding: 5px"> <a href = "~/Content/Template/User-Template.xls" onClick = "JavaScript: Preview ();"> <img src = "~/Content/iCo_Excel.png"/> <span style = "font-size: más grande; font-weight: 200; color: rojo"> user-tempplate.xls </span> </a> </div> <hr/> <form de formularidad = "ffimport" método = "post"> <div style = "padding: 5px" data-options = "iconCls: 'icon-key"> <input type = "hidden" id "id" id "id" name = "PushGuid" /> <input id = "file_upload" name = "file_upload" type = "file" múltiple = "múltiple"> <a href = "javascript :;" id = "btnupload" onClick = "javaScript: $ ('#file_upload'). uploadify ('upload', '*')"> upload </a> <a href = "javaScript :;" id = "btncancelupload" onClick = "javascript: $ ('#file_upload). id = "Gridimport" CellPadding = "0" CellPacing = "0"> <thead id = "Gridimport_head"> <tr> <th> <input type = "CheckBox" OnClick = "selectAll (this)"> </th> <th> Codificando el usuario </th> <th> <th> nombre de usuario/nombre de inicio de sesión </th> <th> name real </th> Teléfono </th> <th> Teléfono de la oficina </th> <th> Dirección de correo electrónico </th> <th> Gender </th> <th> QQ Número </th> <th> Observaciones </th> </tr> </thead> <tbody id = "gridimport_body"> </tbody> </table> </div> <div> <button type = "botón" button "Data-dismiss =" modal "modal" <botin " type = "Button" onClick = "saveImport ()"> save </boton> </div> </div> </div> </div> </div> </div>Si queremos mostrar la interfaz de operación de importación, solo necesitamos mostrar esta capa, como se muestra en el siguiente script.
// Mostrar la función de interfaz de importación showImport () {$ ("#import"). Modal ("show"); }El procesamiento de carga de archivos aquí se procesa principalmente utilizando el control de carga. Por supuesto, también puede usar el control de carga de entrada de archivo que introduje anteriormente para el procesamiento, lo que puede lograr bien estas operaciones de importación.
En general, el código de inicialización del control de carga es el siguiente
$ (function () {// Agregue la administración de archivos adjuntos de la interfaz $ ('#file_upload'). uploadify ({'swf': '/content/jquerytools/uploadify/uploadify.swf' // flash lyth'butTontext ':' brows ', // butot cargada página'queueId ':' filequeue ', // reeue id' queueSizeLimit ': 1, // El número máximo de archivos que se puede cargar en la cola es 999' 'automático': falso, // Si el archivo se carga automáticamente después de seleccionar el archivo, el predeterminado es verdadero 'multi': falso, // es múltiple selección, verdadero 'verdadero' verdadero 'verdadero' verdadero ', a la verdadera', a la verdad, la verdadera, la verdadera, la verdadera, la verdadera, la verdadera, la verdadera, la verdadera, la verdadera, la verdadera, la verdadera, la verdadera, la verdadera, la verdadera, la verdadera: ': es verdadero: la verdadera:': es verdadero:: verdadero:: verdadero:: es verdadero: RET: REMO- Elimine la secuencia Después de la finalización, predeterminada a verdaderas 'filesizeReLimit': '10mb', // tamaño de archivo único, 0 es ilimitado, puede aceptar valores de cadena en kb, mb, gb y otras unidades 'filetypedesc': 'Excel archivos', // archivo descripción'filetypexts ':'*.xls ', // archivo sufre sufre de archivo orth'onqueu // El evento después de que se completen todas las colas // Código de procesamiento comercial // solicite al usuario si el formato de Excel es normal, si los datos se cargan normalmente}, 'onUploadStart': function (file) {initupFile (); // antes de cargar el archivo, restablecer el guía y cada vez que es diferente ("#file_uPload"). 'Archivo de importación de datos', 'Guid': $ ("#adjuntar"). Val ()});La lógica clave es:
// Código de procesamiento de negocios
En términos generales, hemos obtenido un archivo de Excel en el servidor aquí, por lo que el formato de este archivo debe procesarse. Si el formato es correcto, entonces mostramos los datos para importar usuarios para elegir registros y decidir qué registros importar.
El código que maneja el formato de datos de Excel es el siguiente.
// solicita al usuario si el formato de Excel es normal. Si los datos se cargan normalmente, $ .AJAX ({url: '/user/checkexcelcolumns? Guía =' + guía, type: 'get', dataType: 'json', éxito: function (data) {if (data.success) {initgrid (); // actualiza los datos de la tabla que muestran la toast ("El archivo ha sido cargado, los datos se han cargado!"); "); showToast ("La verificación del archivo de Excel cargado falla. Ingrese los datos de acuerdo con el formato de plantilla de Excel en la esquina superior derecha de la página", "Error");Agregamos un método Checkexcelcolumns en segundo plano para verificar el formato de campo de los archivos de Excel. Solo los archivos que cumplan con los requisitos de formato se recuperarán y se mostrarán en la interfaz.
El código JS que se muestra en la interfaz es extraer el contenido del archivo de Excel y vincularlo al elemento de tabla.
// consulta y une el resultado de acuerdo con la función de condición initgrid () {var guía = $ ("#adjectSguid"). 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 = 'checkboxes' type =/" casilla de cheque/"name =/" checkbox/"> </td>"; TR += "Type de chechboxes '//" name = "name =/" checkbox/"> </td>"; TR += "/" Tipo de chechBoxes'//"Nombre de cheque =/" Checkbox/"> </td>"; TR += "Typeboxes '////" Nombre de cheque =/"Checkbox/"> </pol item.handno + "</td>"; "TD>" + item.OfficePhone + "</td>"; "</tr>"; }Para obtener aún más las importaciones del usuario al departamento específico, también podemos aparecer en un cuadro de diálogo y seleccionar información específica, y finalmente enviar los datos a los antecedentes para su procesamiento.
El código de operación se muestra a continuación.
// Guardar la función de datos importados saveImport () {// Asignar al objeto $ ("#Company_id3"). SELECT2 ("Val", @Session ["Company_id"]). Trigger ('Change'); $ ("#Dept_id3"). SELECT2 ("Val", @Session ["Dept_id"]). Trigger ('Change'); $ ("#selectDept"). Modal ("show"); }De esta manera, cuando confirmamos el ahorro, solo necesitamos enviar los datos al fondo a través de AJAX. El código JS específico es el siguiente.
$ .AJAX ({url: '/user/saveExceldata', type: 'post', dataType: 'json', contentType: 'application/json; charset = utf-8', tradicional: true, suctar: function (data) {if (data.success) {// ahorra con éxito 1. Cerrar la capa emergente, 2. CORRECTO DE CORRECTA 3. con éxito "); $ ("#import "). modal (" escondite "); $ (bodyTag) .html (" "); refresh ();} else {showToast (" guardar fallido: " + data.errormessage," error ");}}, datos: postdata});2. Operación de exportación de datos
La operación de exportación de datos es relativamente simple. En términos generales, escribimos los datos en una tabla de Excel fija y luego proporcionamos la URL al usuario para descargar.
// Exportar la función de datos de Excel showExport () {var url = "/user/export"; condición var = $ ("#ffsearch"). Serialize (); // Obtener la condición ExecutExport (URL, condición); // Ejecutar la exportación}El código lógico específico es el siguiente
// Ejecutar la operación de exportación y emisión de la función de archivo ExecuneExport (URL, condición) {$ .AJAX ({type: "Post", url: url, data: condición, éxito: function (filePath) {var downurl = '/fileupload/downloadfile? File =' + filepath; ventana.location = downurl;});}3. Visualización y procesamiento de archivos adjuntos
En la mayoría de los casos, es posible que necesitemos ver los archivos cargados, incluidos los documentos de oficina, las imágenes, etc., que se pueden obtener previamente. No es posible. Puede proporcionar descargas y abrir localmente para verlas.
El archivo anterior presentó que hay dos formas de obtener una vista previa de Office. Una es usar la dirección de vista previa de Microsoft Office para la vista previa, y la otra es usar controles para generar HTML para la vista previa. Los dos se pueden usar en combinación y configurar según sea necesario.
/// <summary> /// Obtenga la URL de vista correspondiente de acuerdo con la ID de archivo adjunto. /// Reglas generales: si es un archivo de imagen, devuelva la dirección de URL '/fileUpload/Viewattach'; /// Si se trata de un archivo de oficina (Word, PPT, Excel), etc., puede verlo a través de la dirección de visualización en línea de Microsoft: 'http://view.officeApps.live.com/op/view.aspx?src=', /// también puede generar archivos HTML localmente. Si es otro archivo, puede descargar la dirección directamente. /// </summary> /// <param name = "id"> adjunte id </samr> /// <<surns> </devuelve> public ActionResult getAttAttachViewUrl (String id) {String ViewUrl = ""; FileUploadInfo info = bllFactory <FileUpload> .instance.findById (id); if (info! = null) {string ext = info.fileExtend.trim ('.'). tolower (); cadena filepath = getFilePath (info); bool officeInternetView = false; // si se debe usar Internet para ver la vista previa de string hostName = httputility.UrlPathencode ("http://www.iqidi.com/"); // puede configurarlo si (ext == "xls" || ext == "xlsx" || ext == "DOC" || ext == "DOCX" | if (OfficeInternetView) {// Devuelve una dirección de Microsoft a Browse Office Online, debe agregar un nombre de dominio de Internet o dirección IP pública ViewUrl = String.format ("http://view.officepps.live.com/op/view.aspx?src= =0}]}", hostName, filepath); } else {#region genera dinámicamente archivo por primera vez // verifique si el archivo de oficina local existe. Si no existe, cree un archivo y luego devuelva la ruta para ver String WebPath = String.Format ("/GenerateFiles/Office/{0} .htm", info.id); String GenerateFilePath = Server.Mappath (WebPath); if (! FileUtil.FileSExist (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); } 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 ("/", "//"); PresentationEx pres = New PresentationEx (TemplateFile); pres.save (GenerateFilepath, Aspose.slides.export.saveformat.html); }} #EnDregion ViewUrl = webPath; }} else {ViewUrl = FilePath; }} return content (ViewUrl); }A través de este código de procesamiento de fondo, podemos saber correctamente qué URL se usa al obtener una vista previa de la oficina.
De esta manera, en la página delantera, solo necesitamos determinar qué archivo es y luego mostrarlo.
if (type == "imagen") {var imgContent = '<img src = "' + viewUrl + '" />'; $ ("#divviewfile"). html (imgContent); $ ("#archivo"). modal ("show"); } else {$ .AJAX ({type: 'get', url: viewUrl, // async: false, // sync // sync // dataType: 'json', éxito: function (json) {$ ("#divviewfile"). html (json); $ ("#archivo"). Modal ("show");}, error: function (function (status, error, error) {estatus, error, error, error, error, error, error, error, error, error, error, error (status, error, error) ducha ("operación fallida" + xhr.Asponsetext); }El código en él
$ ("#archivo"). modal ("show");Llamamos al cuadro de diálogo global para mostrar el contenido específico, el efecto es el siguiente.
El efecto de vista previa del documento Word es el siguiente:
O cuando vemos el archivo de imagen, podemos obtener el efecto de la interfaz de la siguiente manera:
Lo anterior es el contenido relevante del resumen de la experiencia del marco de desarrollo metrónico de Bootstrap [7] Importación de datos, exportación y procesamiento de accesorios. Espero que sea útil para todos. Si desea saber más información, preste atención al sitio web de Wulin.com. ¡Aquí, el editor desea agradecerle por su apoyo al sitio web de Wulin.com!