后台——excel上传下载文件及分页

最新推荐文章于 2020-09-01 23:13:20 发布

转载最新推荐文章于 2020-09-01 23:13:20 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2416429/blog/511315

文章标签：

#前端 #后端 #php #ViewUI

本文介绍了一种简单的方法，用于前端实现Excel数据的导入导出功能及分页展示。对于数据导出，文章提供了一种通过前端表单按钮传递标志位给后端的方案；对于数据导入，则通过文件上传实现。此外，还讨论了两种分页方式的区别，并建议采用真分页以提升用户体验。

2019独角兽企业重金招聘Python工程师标准>>>

许多网站的后台页面都需要excel列表导入导出，以便查看统计数据，数据量比较大的时候往往也会采用分页的方式。

其实对于前端开发人员来说，excel列表的导入导出非常简单。

在存在搜索条件的情况下，也就是我需要导出我搜索到的一系列数据，前端需要传递搜索的字段给后端，同时要"告诉"后端，我这不仅仅是要显示搜索条件了，我是要把这些内容导出来~ 那么我们就需要通过某种标识来告诉后端。

<div>
   <input value="搜索" type="submit" class="btn search-btn" onclick="document.forms[0].csv.value='0'" >
 <input value="列表导出" type="submit" class="btn search-btn" onclick="document.forms[0].csv.value='1'">
   <input type="hidden" name="csv" value="0">
</div>

上面的代码是我提交表单的按钮，通过一个隐藏的name="csv"的input,通过给搜索按钮和列表导出按钮分别赋不同的值，所以后端如果请求到我的csv是0，那么就返回给我相关的搜索的数据就行了，如果后端请求到我的csv是1，后端就需要做重定向，返回我一个csv文件。前端只需要写到这一步就好了，剩下的都是后端去做。

那列表导入，其实也非常简单，input 标签有type="file",这个就是上传文件，属性enctype的值必须为multipart/form-data，如果使用CI框架的话，直接用它封装好的函数form_open_multipart（）；

但是前端需要考虑的一点是，我们通常无法改变它的样式，所以我们可以这样写：

<?php echo form_open_multipart($action = 'admin/member/upload', array('class'=>'other-button1'));?>
        <input type="text" id="choose">
        <a href="javascript:;" class="file clearfix" id="c-file">上传文件
                 <input type="file" name="excel-file"  id="excel-file" onchange="file(this.value)" />
         </a>
        <input type="submit" value="确定" class="btn upload" />
 <form>

我这里就是用了CI的函数，下面可以看到，我添加了一个input标签，还添加了a标签去包含input[type="file"]的标签，我将type="file"的input标签设置成透明的，给a标签设置样式，但是需要注意的是input的positon。我通过获取文件路径（表面上的文件路径）然后赋值到input[type="text"]的标签里，这样大家就知道自己选中的是哪个文件了。当然，这里一样是提交表单，至于后续的事，依然是后端处理。

上传下载文件到这里就结束了，就是这么简单，但是能不能，或者需不需要用AJAX去写，我暂时没有去探究。如果后续的工作中有用到我再补充。

接下来再讲一个非常简单的功能——分页。分页对于前端来说应该是再普通不过了，不过我们的分页有假分页和真分页，假分页就是把数据全部加载下来，然后再分页，主要是为了用户查看的时候方便，也为了页面美观，但是这样并不会页面的性能有所提高。而真分页就是每选择一个页码，只加载这个页码所对应的数据显示出来。通常情况下都是采用AJAX。

但是CI框架再带分页的功能，所以这里分页是交给后台去做的，前端只负责显示。比如下面这样：

 <li><?php if(isset($pager)){ 
                      if (count($pager)!==0) {
                        echo $pager;
                      }else{
                        echo '1';
                      }
                    };?>
</li>

但是这样其实每次点一个页码，都要刷新一次页面，用户体验非常不好。

虽然我没有实际做过AJAX分页，但是我觉得是每次用户点击一个页码，就通过AJAX把页码传给后端，后端返回这个页面的数据给前端，但是有一个地方需要考虑到的就是前端页码的变化，这里可能是前端用js进行动态加减吧。。

转载于:https://my.oschina.net/u/2416429/blog/511315