1 學習計劃

1、實現區域導入功能

n OCUpload一鍵上傳插件使用

n 將文件上傳到Action

n POI簡介

n 使用POI解析Excel文件

n 完成資料庫操作

n 使用pinyin4J生成簡碼和城市編碼

2、區域分頁查詢

n 頁面調整

n 服務端實現

3、重構分頁代碼

n BaseAction

n 子類Action

4、分區添加功能

n 什麼是分區

n 頁面調整（combobox使用）

n 服務端實現

2 實現區域導入功能

2.1 jquery OCUpload一鍵上傳插件使用

OCUpload（One Click Upload）

第一步：將js文件引入頁面

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ocupload-1.1.2.js"></script>

第二步：在頁面中提供任意一個元素

第三步：調用插件提供的upload方法，動態修改HTML頁面元素

<script type="text/javascript">
    $(function(){
        //頁面載入完成後，調用插件的upload方法，動態修改了HTML頁面元素
        $("#myButton").upload({
            action:'xxx.action',
            name:'myFile'
        });
    });
</script>

2.2 在服務端接收上傳的文件

在Action中提供一個File類型的屬性，名稱和上傳的文件輸入框名稱一致regionFile

@Controller
@Scope("prototype")
public class RegionAction extends BaseAction<Region>{
    //屬性驅動，接收上傳的文件
    private File regionFile;

    public void setRegionFile(File regionFile) {
        this.regionFile = regionFile;
    }
    
    /**
     * 區域導入
     */
    public String importXls(){
        System.out.println(regionFile);
        return NONE;
    }
}

2.3 apache POI技術

Apache POI是Apache軟體基金會的開放源碼函式庫，POI提供API給Java程式對Microsoft Office格式檔案讀和寫的功能。

下載開發包：

解壓上面的zip文件：

在項目中引入POI的依賴：

        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>3.11</version>
        </dependency>

POI使用：

@Test
    public void test1() throws FileNotFoundException, IOException{
        String filePath = "C:\\Users\\zhaoqx\\Desktop\\BOS項目(黑馬32期)\\BOS-day05\\資料\\區域導入測試數據.xls";
        //包裝一個Excel文件對象
        HSSFWorkbook workbook = new HSSFWorkbook(new FileInputStream(new File(filePath)));
        //讀取文件中第一個Sheet標簽頁
        HSSFSheet hssfSheet = workbook.getSheetAt(0);
        //遍歷標簽頁中所有的行
        for (Row row : hssfSheet) {
            System.out.println();
            for (Cell cell : row) {
                String value = cell.getStringCellValue();
                System.out.print(value + " ");
            }
        }
    }

2.4 pinyin4J

        <!-- 引入pinyin4J的依賴 -->
        <dependency>
            <groupId>com.belerweb</groupId>
            <artifactId>pinyin4j</artifactId>
            <version>2.5.0</version>
        </dependency>

@Test
    public void test1(){
        //河北省    石家莊市    橋西區
        String province = "河北省";
        String city = "石家莊市";
        String district = "橋西區";
        //簡碼---->>HBSJZQX
        
        province = province.substring(0, province.length() - 1);
        city = city.substring(0, city.length() - 1);
        district = district.substring(0, district.length() - 1);
        
        String info = province + city + district;
        
        String[] headByString = PinYin4jUtils.getHeadByString(info);
        String shortcode = StringUtils.join(headByString);
        System.out.println(shortcode);
        
        //城市編碼---->>shijiazhuang
        String citycode = PinYin4jUtils.hanziToPinyin(city, "");
        System.out.println(citycode);
    }

3 區域數據分頁查詢

 利用之前已經寫好的pageQuery

4 重構分頁代碼

將重覆分代碼統一抽取到BaseAction中

5 分區數據添加功能

區域範圍很大，對區域進行細分產生分區

5.1 easyUI combobox下拉框使用

製作一個json文件：

    <input data-options="url:'${pageContext.request.contextPath }/json/combobox_data.json',
            valueField:'id',
            textField:'name'" 
            class="easyui-combobox">

5.2 使用combobox展示區域數據

頁面：WEB-INF/pages/base/subarea.jsp

第一步：修改頁面中combobox：

添加獲取name的方法

第二步：在RegionAction中提供listajax方法

第三步：在RegionDao中擴展方法

第四步：為添加視窗中保存按鈕綁定事件

5.3 服務端實現

創建分區對應的Action、Service、Dao

6 分頁查詢問題

將Java對象轉為json過程中，因為對象之間有相互引用關係，會發生死迴圈問題，解決方式，排除其中屬性