後臺——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進行動態加減吧。。