你的位置:首页 > 软件开发 > ASP.net > 基于Metronic的Bootstrap开发框架经验总结(7)

基于Metronic的Bootstrap开发框架经验总结(7)

发布时间:2015-09-02 12:00:12
在很多系统模块里面,我们可能都需要进行一定的数据交换处理,也就是数据的导入或者导出操作,这样的批量处理能给系统用户更好的操作体验,也提高了用户录入数据的效率。我在较早时期的EasyUI的Web框架上,也介绍过通过Excel进行的数据导入导出操作,随笔文章为《基于MVC4+Easy ...

在很多系统模块里面,我们可能都需要进行一定的数据交换处理,也就是数据的导入或者导出操作,这样的批量处理能给系统用户更好的操作体验,也提高了用户录入数据的效率。我在较早时期的EasyUI的Web框架上,也介绍过通过Excel进行的数据导入导出操作,随笔文章为《基于MVC4+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出》,本文基于Bootstrap的框架基础上,再对这个模块进行更新处理,以及Office文档或者图片等附件的查看处理。

1、数据的导入操作

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

基于Metronic的Bootstrap开发框架经验总结(7)

导入操作,在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  src='/images/loading.gif' data-original="~/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>

原标题:基于Metronic的Bootstrap开发框架经验总结(7)

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录