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

许多网站的后台页面都须要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进行动态加减吧。。