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


Posted in Javascript onMay 12, 2016

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

1、数据的导入操作

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

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

导入操作,在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文件了,因此需要对这个文件的格式进行处理,如果格式正确,那么我们把数据显示出来,供导入用户进行记录的选择,决定导入那些记录即可。

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

处理检查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);
        });
      });
    }

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

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

操作代码如下所示。

//保存导入的数据
    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;
    }
  });
}

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

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");

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

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

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

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

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

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

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

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

Javascript 相关文章推荐
js或css文件后面跟参数的原因说明
Jan 09 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
js单例模式详解实例
Nov 21 Javascript
jquery密码强度校验
Dec 02 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
js prototype和__proto__的关系是什么
Aug 23 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 #Javascript
使用bootstrap3开发响应式网站
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 #Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 #Javascript
You might like
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
FleaPHP的安全设置方法
2008/09/15 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
js 窗口抖动示例
2013/09/04 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python flask搭建web应用教程
2019/11/19 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
简历中求职的个人自我评价
2013/12/03 职场文书
师德建设实施方案
2014/03/21 职场文书
大气污染防治方案
2014/05/19 职场文书
设备售后服务承诺书
2014/05/30 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
打架检讨书范文
2015/01/27 职场文书