Em muitos módulos do sistema, podemos precisar executar determinados processamento de troca de dados, ou seja, operações de importação ou exportação de dados. Esse processamento em lote pode oferecer aos usuários do sistema uma melhor experiência operacional e melhorar a eficiência dos usuários que entram em dados. Com base na estrutura do bootstrap, este módulo é atualizado e visualizado para documentos ou imagens do escritório.
1. Operação de importação de dados
Geralmente, existem operações de importação e exportação de dados nos módulos do sistema. Portanto, quando a interface é gerada automaticamente, tendem a gerar automaticamente essas funções de consulta, importação, exportação e outras funções de operação para usuários. O efeito da interface é o seguinte.
Na estrutura de bootstrap, coloquei -a como uma camada e a coloquei no arquivo index.cshtml, o que pode tornar toda a interface mais processada. O código de amostra é mostrado abaixo.
Em geral, os seguintes códigos são gerados automaticamente, incluindo todos os campos necessários. Geralmente, adaptamos os campos conforme necessário para atender aos nossos negócios e necessidades reais.
<!-importar camada de operação de dados-> <div id = "importar" tabindex = "-1" role = "diálogo" aria-labelledby = "mymodallabel" aria-hidden = "true"> <div> <div> <div> <butter type = "Button" Data-Dismiss = "Modal" ARIO-HIDLENTE = "True" </button> </button </button </button = "" " style = "Text-align: direita; preenchimento: 5px"> <a href = "~/content/modelo/user-template.xls" onclick = "javascript: visualize ();"> <img src = "~/content/imagens/ico_excel.png"/> <span style="font-size:larger;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-key'"> <input type="hidden" id="AttachGUID" name="AttachGUID" /> <input id = "file_upload" name = "file_upload" type = "arquivo" múltiplo = "múltiplo"> <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> <r/> <hr/> <Div = "div_files"> </> </> </> </div! id = "Gridimport" CellPadding = "0" CellPacing = "0"> <thead id = "Gridimport_head"> <tr> <th> <input type = "caixa de seleção" onclick = "select (thatin) </th> </ Telefone </th> <th> telefone do escritório </th> <th> Endereço de email </th> <the> gênero </th> <th> Número qq </th> <the> observações </th> </tr> </thead> <tbody id = "button" ""> </thead> <bbody iD = "button" " type = "Button" OnClick = "SaveImport ()"> Salvar </botão> </div> </div> </div> </div> </div> </div>Se queremos exibir a interface de operação de importação, precisamos exibir apenas essa camada, conforme mostrado no script a seguir.
// Mostra a função de importação da função showImport () {$ ("#import"). Modal ("show"); }O processamento de upload de arquivo aqui é processado principalmente usando o controle de uploadsify. Obviamente, você também pode usar o controle de upload de entrada do arquivo que introduzi anteriormente para processamento, o que pode alcançar bem essas operações de importação.
Em geral, o código de inicialização do controle de upload é o seguinte
$ (function () {// Adicione o gerenciamento de anexo da interface $ ('#file_upload'). Uploady ({'swf': '/content/jquerytools/uploadify/uploadify.swf', // flash'button '': 'Brows', //butão Page'queueid carregado ':' filequeue ', // fila ID' Queueuseizelimit ': 1, // O número máximo de arquivos que podem ser carregados na fila é 999' Auto ': False, // Falso, // Falso é carregado automaticamente após a seleção do arquivo, a default é verdadeira' Multi ': //Whether to remove the sequence after completion, default to true 'fileSizeLimit': '10MB', //Single file size, 0 is unlimited, can accept string values in KB, MB, GB and other units 'fileTypeDesc': 'Excel Files', //File description'fileTypeExts': '*.xls', //Uploaded file suffix filter'onQueueComplete': function (event, Dados) {// Evento Após todas as filas são concluídas // Código de processamento de negócios // Promova ao usuário se o formato do Excel é normal, se os dados forem carregados normalmente}, 'onuploadstart': function (file) {initupfile (); // antes de fazer o upload do arquivo, redefinir a orientação e cada vez que é diferente ("#File #file_); {'pasta': 'arquivo de importação', 'orientação': $ ("#APTHGUID"). Val ()});A lógica principal é:
// Código de processamento de negócios
De um modo geral, obtivemos um arquivo do Excel no servidor aqui; portanto, o formato desse arquivo precisa ser processado. Se o formato estiver correto, exibimos os dados para importar os usuários para escolher registros e decidir quais registros importantes.
O código que lida com a verificação do formato de dados do Excel é o seguinte.
// solicita ao usuário se o formato do Excel é normal. Os dados são carregados normalmente, $ .AJAX ({url: '/user/checkexcelColumns? Guid =' + guid, digite: 'get', datatype: 'JSON', success: function (dados) {if (data.success) {initGrid (); // refresh o dados da tabela mostrado ("a" a unders) se foi a tabela (Data) {if), a tabela é usada; ShowToast ("A verificação do arquivo do Excel carregado falha. Digite dados de acordo com o formato do modelo do Excel no canto superior direito da página.", "Erro");Adicionamos um método checkexcelColumns em segundo plano para verificar o formato de campo dos arquivos do Excel. Somente arquivos que atendem aos requisitos de formato serão recuperados e exibidos na interface.
O código JS exibido na interface é extrair o conteúdo do arquivo Excel e vinculá -lo ao elemento da tabela.
// consulta e vincule o resultado de acordo com a função de condição initGrid () {var guid = $ ("#AnextGuid"). Val (); var url = "/user/getExcelData? Guid =" + GUID; $ .getjson (url, function (dados) {$ ("#gridimport_body"). html (""); $ .each (data.rows, function (i, item) {var tr = "<tr>"; tr += "<td> <input class = 'checkes' type =/" check/"name =/" Item.Handno + "</td>"; " "</tr>"; }Para obter ainda mais as importações do usuário para o departamento específico, também podemos exibir uma caixa de diálogo e selecionar informações específicas e, finalmente, enviar os dados para o plano de fundo para o processamento.
O código de operação é mostrado abaixo.
// Salvar a função de dados importados SAVEIMPORT () {// Atribuir ao objeto $ ("#Company_id3"). Select2 ("val", @session ["Company_id"]). Trigger ('Alterar'); $ ("#Dept_id3"). Select2 ("val", @session ["dept_id"]). Trigger ('alteração'); $ ("#selectDept"). Modal ("show"); }Dessa forma, quando confirmamos a economia, precisamos apenas enviar os dados para o plano de fundo através do AJAX. O código JS específico é o seguinte.
$ .ajax ({url: '/user/savexcelData', type: 'post', datatype: 'json', contentType: 'Application/json; charset = utf-8', tradicional: true, sucesso: function (dados) {if (data.success) {// saves de maneira succalor. com sucesso "); $ ("#import ").2. Operação de exportação de dados
A operação de exportação de dados é relativamente simples. De um modo geral, escrevemos os dados em uma tabela de Excel fixa e, em seguida, fornecemos o URL ao usuário para baixar.
// Função de dados do Export Excel ShowExport () {var url = "/user/export"; var condition = $ ("#ffSearch"). Serialize (); // Obtenha a condição Executexport (URL, condição); // Execute a exportação}O código lógico específico é o seguinte
// Execute a operação de exportação e produz a função de arquivo executexport (url, condição) {$ .ajax ({type: "post", url: url, dados: condição, sucesso: function (filepath) {var downurl = '/fileUpload/downloadfile?3. Visualização e processamento de anexos
Na maioria dos casos, podemos precisar visualizar os arquivos enviados, incluindo documentos do escritório, fotos etc., que podem ser visualizados. Não é possível. Você pode fornecer downloads e abrir localmente para visualizá -los.
O arquivo anterior apresentou que existem duas maneiras de visualizar o escritório. Um é usar o endereço de visualização do Microsoft Office for Preview, e o outro é usar os controles para gerar HTML para visualização. Os dois podem ser usados em combinação e configurar conforme necessário.
/// <summary> /// Obtenha o URL de exibição correspondente de acordo com o ID do anexo. /// Regras gerais: se for um arquivo de imagem, retorne o endereço da URL da exibição '/FileUpload/Viewattach'; /// Se for um arquivo do Office (Word, PPT, Excel), etc., você pode visualizá -lo através do endereço de visualização on -line da Microsoft: 'http://view.officeapps.live.com/op/view.aspx?src=', /// também pode gerar arquivos html localmente. Se for outro arquivo, você pode baixar o endereço diretamente. /// </summary> /// <param name = "id"> Anexe id </param> /// <lorpns> </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; // se deve usar a Internet para visualizar a string hostname = httputility.urlpathenCode ("http://www.iqidi.com/"); // você pode configurá -lo se (ext == "xls" || ext == "" xlsx "|| ext ==" (OfficeInternetView) {// retorna um endereço da Microsoft para navegar on -line Office, você precisa adicionar um nome de domínio da Internet ou um endereço IP público publicado viewurl = string.format ("http://view.officeapps.live.com/op/View.aspx?src= {0a}}", hostName, filepath); } else {#region gera dinamicamente o arquivo pela primeira vez // verifique se o arquivo do escritório local existe. Se não existir, crie um arquivo e retorne o caminho para visualizar 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); } else if (ext == "xls" || ext == "xlsx") {pasta de trabalho da pasta de trabalho = nova pasta de trabalho (modelFile); WorkBow.Save (GereateFilePath, SaveFormat.html); } else if (ext == "ppt" || ext == "pptx") {templatefile = templatefile.replace ("/", "//"); ApresentationEx pres = novo ApresentationEx (modelo); Pres.Save (generateFilePath, Aspose.slides.export.saveFormat.html); }} #endregion Viewurl = webPath; }} else {viewurl = filepath; }} retornar conteúdo (Viewurl); }Através desse código de processamento em segundo plano, podemos saber corretamente qual URL é usado quando a visualização do escritório.
Dessa forma, na página front-end, precisamos apenas determinar qual arquivo é e depois exibi-lo.
if (type == "imagem") {var iMgContent = '<img src = "' + viewurl + '" />'; $ ("#DivViewFile"). HTML (imgContent); $ ("#arquivo"). Modal ("show"); } else {$ .ajax ({type: 'get', url: viewurl, // assync: false, // sync // sync // datatype: 'json', sucess: function (json) {$ ("#divViewfile"). html (json); $ ("#file"). SHOWRROR ("Operação falhou" + XHR.RESPONSETEXT); }O código nele
$ ("#arquivo"). Modal ("show");Chamamos a caixa de diálogo global para exibir o conteúdo específico, o efeito é o seguinte.
O efeito de visualização do documento do Word é o seguinte:
Ou quando vemos o arquivo de imagem, podemos obter o efeito da interface da seguinte forma:
O exposto acima é o conteúdo relevante do resumo da estrutura de desenvolvimento de desenvolvimento metronônico de Bootstrap [7] Importação de dados, exportação e visualização de acessórios e processamento. Espero que seja útil para todos. Se você quiser saber mais informações, preste atenção ao site do Wulin.com. Aqui, o editor gostaria de agradecer seu apoio ao site do Wulin.com!