基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理

在很多系统模块里面,我们可能都需要进行一定的数据交换处理,也就是数据的导入或者导出操作,这样的批量处理能给系统用户更好的操作体验,也提高了用户录入数据的效率。本文基于Bootstrap的框架基础上,再对这个模块进行更新处理,以及Office文档或者图片等附件的查看处理。

1、数据的导入操作

一般系统模块里面,都有数据导入和导出操作,因此在界面自动生成的时候,我都倾向于给用户自动生成这些标准的查询、导入、导出等操作功能,界面效果如下所示。

导入操作,在Bootstrap框架里面,我把它作为一个层的,都统一放在index.cshtml文件里面,这样可以使得整个界面的处理更加紧密一点,示例代码如下所示。

下面这些代码一般情况下,都是自动生成的,包括所需的全部字段,我们一般是根据需要进行字段的裁剪,以适应我们的业务和实际需要。

<!--导入数据操作层-->
<div id="import" class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header bg-primary">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">文件导入</h4>
      </div>
      <div class="modal-body">
        <div style="text-align:right;padding:5px">
          <a href="~/Content/Template/User-模板.xls" onclick="javascript:Preview();">
            <img alt="测试用户信息-模板" src="~/Content/images/ico_excel.png" />
            <span style="font-size:larger;font-weight:200;color:red">User-模板.xls</span>
          </a>
        </div>
        <hr/>
        <form id="ffImport" method="post">
          <div title="Excel导入操作" style="padding: 5px" data-options="iconCls:'icon-key'">
            <input class="easyui-validatebox" type="hidden" id="AttachGUID" name="AttachGUID" />
            <input id="file_upload" name="file_upload" type="file" multiple="multiple">
            <a href="javascript:;" class="btn btn-primary" id="btnUpload" onclick="javascript: $('#file_upload').uploadify('upload', '*')">上传</a>
            <a href="javascript:;" class="btn btn-default" id="btnCancelUpload" onclick="javascript: $('#file_upload').uploadify('cancel', '*')">取消</a>
            <div id="fileQueue" class="fileQueue"></div>
            <br />
            <hr style="width:98%" />
            <div id="div_files"></div>
            <br />
          </div>
        </form>
        <!--数据显示表格-->
        <table id="gridImport" class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
          <thead id="gridImport_head">
            <tr>
              <th class="table-checkbox" style="width:40px"><input class="group-checkable" type="checkbox" onclick="selectAll(this)"></th>
              <th>用户编码</th>
              <th>用户名/登录名</th>
              <th>真实姓名</th>
              <th>职务头衔</th>
              <th>移动电话</th>
              <th>办公电话</th>
              <th>邮件地址</th>
              <th>性别</th>
              <th>QQ号码</th>
              <th>备注</th>
            </tr>
          </thead>
          <tbody id="gridImport_body"></tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="SaveImport()">保存</button>
      </div>
    </div>
  </div>
</div>

我们如果要显示导入操作界面,那么只需要把这个层显示出来即可,如下脚本所示。

//显示导入界面
    function ShowImport() {
      $("#import").modal("show");
    }

这里的文件上传处理,主要使用了Uploadify的这个控件进行处理的,当然也可以利用我前面介绍过的File Input上传控件进行处理,都可以很好实现这些导入操作。

一般情况下的Uploadify控件的初始化代码如下所示

$(function () {
      //添加界面的附件管理
      $('#file_upload').uploadify({
        'swf': '/Content/JQueryTools/uploadify/uploadify.swf', //FLash文件路径
        'buttonText': '浏 览',                 //按钮文本
        'uploader': '/FileUpload/Upload',            //处理上传的页面
        'queueID': 'fileQueue',             //队列的ID
        'queueSizeLimit': 1,              //队列最多可上传文件数量,默认为999
        'auto': false,                 //选择文件后是否自动上传,默认为true
        'multi': false,                 //是否为多选,默认为true
        'removeCompleted': true,            //是否完成后移除序列,默认为true
        'fileSizeLimit': '10MB',            //单个文件大小,0为无限制,可接受KB,MB,GB等单位的字符串值
        'fileTypeDesc': 'Excel Files',         //文件描述
        'fileTypeExts': '*.xls',            //上传的文件后缀过滤器
        'onQueueComplete': function (event, data) {   //所有队列完成后事件
          //业务处理代码
          //提示用户Excel格式是否正常,如果正常加载数据
        },
        'onUploadStart': function (file) {
          InitUpFile();//上传文件前 ,重置GUID,每次不同
          $("#file_upload").uploadify("settings", 'formData', { 'folder': '数据导入文件', 'guid': $("#AttachGUID").val() }); //动态传参数
        },
        'onUploadError': function (event, queueId, fileObj, errorObj) {
          //alert(errorObj.type + ":" + errorObj.info);
        }
      });
    });

关键的逻辑就是:

//业务处理代码

一般情况下,我们在这里已经在服务器里面获得了Excel文件了,因此需要对这个文件的格式进行处理,如果格式正确,那么我们把数据显示出来,供导入用户进行记录的选择,决定导入那些记录即可。

处理检查Excel数据格式的代码如下所示。

  //提示用户Excel格式是否正常,如果正常加载数据
          $.ajax({
            url: '/User/CheckExcelColumns?guid=' + guid,
            type: 'get',
            dataType: 'json',
            success: function (data) {
              if (data.Success) {
                InitGrid(); //重新刷新表格数据
                showToast("文件已上传,数据加载完毕!");
              }
              else {
                showToast("上传的Excel文件检查不通过。请根据页面右上角的Excel模板格式进行数据录入。", "error");
              }
            }
          });

我们就是在后台增加一个CheckExcelColumns的方法,用来检查Excel文件的字段格式的,只有符合格式要求的文件,才被获取数据并显示在界面上。

显示在界面上的JS代码,也就是主要把Excel文件的内容提取出来,并绑定在Table元素上即可。

//根据条件查询并绑定结果
    function InitGrid() {
      var guid = $("#AttachGUID").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=\"checkbox\" name=\"checkbox\" ></td>";
          tr += "<td>" + item.HandNo + "</td>";
          tr += "<td>" + item.Name + "</td>";
          tr += "<td>" + item.FullName + "</td>";
          tr += "<td>" + item.Title + "</td>";
          tr += "<td>" + item.MobilePhone + "</td>";
          tr += "<td>" + item.OfficePhone + "</td>";
          tr += "<td>" + item.Email + "</td>";
          tr += "<td>" + item.Gender + "</td>";
          tr += "<td>" + item.QQ + "</td>";
          tr += "<td>" + item.Note + "</td>";
          tr += "</tr>";
          $("#gridImport_body").append(tr);
        });
      });
    }

为了更进一步获取用户导入到具体的部门,那么我们还可以弹出一个对话框用然后选择具体的信息,最后才提交数据到后台进行处理。

操作代码如下所示。

//保存导入的数据
    function 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',
        type: 'post',
        dataType: 'json',
        contentType: 'application/json;charset=utf-8',
        traditional: true,
        success: function (data) {
          if (data.Success) {
            //保存成功 1.关闭弹出层,2.清空记录显示 3.刷新主列表
            showToast("保存成功");
            $("#import").modal("hide");
            $(bodyTag).html("");
            Refresh();
          }
          else {
            showToast("保存失败:" + data.ErrorMessage, "error");
          }
        },
        data: postData
      });

2、数据的导出操作

数据的导出操作相对比较简单,一般情况下,我们把数据写入一个固定的Excel表里面,然后提供URL给用户下载即可。

 //导出Excel数据
    function ShowExport() {
      var url = "/User/Export";
      var condition = $("#ffSearch").serialize();//获取条件
      executeExport(url, condition);//执行导出
    }

具体的逻辑代码如下所示

//执行导出操作,输出文件
function executeExport(url, condition) {
  $.ajax({
    type: "POST",
    url: url,
    data: condition,
    success: function (filePath) {
      var downUrl = '/FileUpload/DownloadFile?file=' + filePath;
      window.location = downUrl;
    }
  });
}

3、附件的查看处理

多数情况下,我们可能需要查看上传的文件,包括Office文档、图片等可以进行预览的,是在不行,可以提供下载本地打开查看。

上篇文件介绍了Office的预览有两种途径,一种是利用微软Office的预览地址进行预览,一种是用控件生成HTML进行预览,两种可以结合使用,根据需要进行配置即可。

/// <summary>
    /// 根据附件ID,获取对应查看的视图URL。
    /// 一般规则如果是图片文件,返回视图URL地址'/FileUpload/ViewAttach';
    /// 如果是Office文件(word、PPT、Excel)等,可以通过微软的在线查看地址进行查看:'http://view.officeapps.live.com/op/view.aspx?src=',
    /// 也可以进行本地生成HTML文件查看。如果是其他文件,可以直接下载地址。
    /// </summary>
    /// <param name="id">附件的ID</param>
    /// <returns></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;//是否使用互联网在线预览
        string hostName = HttpUtility.UrlPathEncode("http://www.iqidi.com/");//可以配置一下,如果有必要
        if (ext == "xls" || ext == "xlsx" || ext == "doc" || ext == "docx" || ext == "ppt" || ext == "pptx")
        {
          if (officeInternetView)
          {
            //返回一个微软在线浏览Office的地址,需要加上互联网域名或者公网IP地址
            viewUrl = string.Format("http://view.officeapps.live.com/op/view.aspx?src={0}{1}", hostName, filePath);
          }
          else
          {
            #region 动态第一次生成文件
            //检查本地Office文件是否存在,如不存在,先生成文件,然后返回路径供查看
            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")
              {
                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);
    } 

通过这个后台处理代码,我们可以正确知道Office预览的时候,使用的是哪个URL了。

这样在前端页面,我们只需要判断具体是那种文件,然后进行展示即可了。

 if(type =="image") {
      var imgContent = '<img src="'+ viewUrl + '" />';
      $("#divViewFile").html(imgContent);
      $("#file").modal("show");
    } else {
      $.ajax({
        type: 'GET',
        url: viewUrl,
        //async: false, //同步
        //dataType: 'json',
        success: function (json) {
          $("#divViewFile").html(json);
          $("#file").modal("show");
        },
        error: function (xhr, status, error) {
          showError("操作失败" + xhr.responseText); //xhr.responseText
        }
      });
    } 

其中的代码

$("#file").modal("show");

是我们调用全局对话框,用来展示具体的内容的,效果如下所示。

word文档预览效果如下所示:

或者我们查看图片文件的时候,可以获得界面效果如下所示:

以上就是小编给大家介绍的基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理的相关内容,希望对大家有所帮助,如果大家想了解更多资讯敬请关注我们网站,在此小编非常感谢大家对我们网站的支持!

时间: 2016-05-09

基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化

在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进行显示数据,删除则可能使用一个提示确认框,如果操作成功,我们可以使用更丰富的提示框来处理,本篇主要对比说明在Bootstrap开发中用到的这些技术要点. 1.Bootstrap对话框的使用 常规的Bootstrap有几种尺寸的对话框,包括默认状态的小对话框,中等宽度的对话框,和全尺寸的对话框几种,B

深入理解bootstrap框架之入门准备

一.bootstrap框架简介 Bootstrap是最流行的前端开发框架. 什么是框架:开发过程的半成品. bootstrap具有以下重要特性: (1)完整的CSS样式插件 (2)丰富的预定义样式表 (3)基于jQuery的插件集 (4)灵活的栅格系统 以下将简单介绍对bootstrap可能用到的知识进行梳理. 二.新手入门 笔者使用版本是3.3.x 在bootstrap中文官网可以找到以下界面 本书采用预编译的版本进行学习 三. 文件结构 生产环境使用bootstrap.min.css和boo

深入理解bootstrap框架之第二章整体架构

一. 整体架构 1. CSS-12栅格系统 把网页宽度均分为12等分(保留15位精度)--这是bootstrap的核心功能. 2.基础布局组件 包括排版.按钮.表格.布局.表单等等. 3.jQuery bootstrap插件的基础 4.响应式设计 兼容多个终端.这是bootstrap的终极理念. 5.css插件 提供丰富的样式. 6.js插件 二. 栅格系统 1.基本实现过程 定义容器的大小--跳转边距--媒询 有以下要求: (1)一行(row)数据必须包含在.container中. .cont

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

本文主要介绍这个Bootstrap框架的总体性功能界面,介绍其中用到的知识点和整体性的界面.希望读者对框架有一个更加直观.真实的认识了解,界面设计以及相关思路可以借鉴提高,也可以对相关的内容进行相互探讨,共同提高. 1.<基于Metronic的Bootstrap开发框架>技术特点 1)采用最新最炫的Bootstrap响应式框架技术 整个基于Metronic的Bootstrap开发框架,界面部分采用较新的Bootstrap技术,采用当前最新的Bootstrap3.x,集成了众多功能强大的Boot

基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作

本篇文章主要介绍如何实现Web页面内容的打印预览和保存操作的相关知识,一起学习吧! 1.Web页面打印的问题 在此之前,我一般使用比较好用的LODOP来执行打印的操作,这个在我之前有很多文章都有涉及,这个控件是一个ActiveX的控件,需要下载安装后就可以在页面是进行打印的排版设计,预览,打印等操作,还是很方便的一个控件,因此都很适合普通内容的打印,证件的套打等操作. 不过随着浏览器技术的更新,这个插件在Chrome或者FireFox上好像不受支持了,基本上摒弃了这种插件的处理方式了.例如如果我

基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用

在上篇基于BootStrap Metronic开发框架经验小结[一]框架总览及菜单模块的处理,介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容,本篇继续这一主题,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用. 在数据的界面显示当中,表格数据的展示以及分页是非常常见的处理操作,利用Bootstrap的样式布局,以及JQuery的Ajax数据处理,就能很好实现数据的动态展示和分页处理. 1.列表展示和分页处理1)数据的列表展示

基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

在上篇基于BootStrap Metronic开发框架经验小结[二]列表分页处理和插件JSTree的使用,介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外对树形列表,采用了JSTree插件,本篇继续介绍在编辑页面中常用到的控件Select2,这个控件可以更加丰富传统的Select下拉列表控件,提供更多的功能和更好的用户体验. 1.Select2控件介绍 这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:https://

基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

大家对Bootstrap框架知识了解多少 Bootstrap是一个前端的技术框架,很多平台都可以采用,JAVA/PHP/.NET都可以用来做前端界面,整合JQuery可以实现非常丰富的界面效果,目前也有很多Bootstrap的插件能够提供给大家使用,但是在国内很多基于Bootstrap的介绍很多还是停留在教学的基础上,介绍Bootstrap的各种基础知识和简单的使用:本文希望以基于C#的MVC实际项目的基础上,对Bootstrap开发框架进行全面的案例介绍,以实际项目的代码和效果截图进行讲解,力

基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解

Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文件上传插件File Input的使用. 1.文件上传插件File Input介绍 这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http:/

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

在前面的一篇随笔基于BootStrap Metronic开发框架经验小结[一]框架总览及菜单模块的处理,介绍了菜单模块的处理,主要介绍如何动态从数据库里面获取记录并构建菜单列表.其中菜单信息的图标样式,也是从数据库里面获取的,因此要求我们能够动态取得Bootstrap里面的各种图标定义了.本篇主要介绍如何提取Bootstrap的图标信息,存储到数据库里面为我所用. 1.菜单的显示及各种Bootstrap图标 我们从下图可以看到,为了菜单的美观,每个菜单项(这里分了三级菜单)都有一个图标,虽然大小

Bootstrap 3.x打印预览背景色与文字显示异常的解决

我首先测试了一段如下的代码,发现打印预览时的确无法显示背景色. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Regonline</title> <link href="css/bootstrap.css" rel="stylesheet" /> &l