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

<!--导入数据操作层--><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");    }

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

//根据条件查询并绑定结果    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({        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      });

 //导出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;    }  });}

/// <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);    } 

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