EasyUi通过OCUpload上传及POI上传 实现导入xls表格功能
Easyui上傳文件案例
第一步:要想使用OCUpload首先前端需要導入js包
?? ???? <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.ocupload-1.1.2.js"></script>
第二步:提供一個上傳按鈕(本案例用的EasyUi框架)
var toolbar = [{
?? ??? ??? ??? ?id: 'button-edit',
?? ??? ??? ??? ?text: '修改',
?? ??? ??? ??? ?iconCls: 'icon-edit',
?? ??? ??? ??? ?handler: doView
?? ??? ??? ?}, {
?? ??? ??? ??? ?id: 'button-import',
?? ??? ??? ??? ?text: '導入',
?? ??? ??? ??? ?iconCls: 'icon-redo'
?? ??? ??? ];
第三步:提供按鈕事件
$(function() {
?? ??? ??? ??? ?$('#button-import').upload({
?? ??? ??? ??? ??? ?action: '${pageContext.request.contextPath}/upLoad.action',
?? ??? ??? ??? ??? ?name: 'areaFile',
?? ??? ??? ??? ??? ?onComplete: function(data) {
alert(data);
}
});
});
第四步:寫controller層
@Controller
@ParentPackage("struts-default")
@Namespace("/")
@Scope("prototype")
public class AreaAction extends ActionSupport implements ModelDriven<Area> {
?? ?private Area model = new Area();
@Resource
?? ?private AreaService areaservice;
@Action(value="areaAction_importXls")
?? ?public String importXls() throws IOException{
?? ??? ?String flag = "1";//1-成功;0-失敗
?? ??? ?try {
?? ??? ??? ?//1.使用workbook獲取整個excel
?? ??? ??? ?HSSFWorkbook wb = new HSSFWorkbook(new FileInputStream(areaFile));
?? ??? ??? ?//2.使用workbook獲取某個sheet頁
?? ??? ??? ?HSSFSheet sheet = wb.getSheetAt(0);
?? ??? ??? ?//3.遍歷sheet頁獲取row行
?? ??? ??? ?List<Area> list = new ArrayList<Area>();
?? ??? ??? ?for(Row row : sheet){
?? ??? ??? ??? ?//3.1跳過第一行標題行
?? ??? ??? ??? ?int rowNum = row.getRowNum();
?? ??? ??? ??? ?if(0 == rowNum){
?? ??? ??? ??? ??? ?continue;//跳過本次循環,進入下一次循環
?? ??? ??? ??? ?}
?? ??? ??? ??? ?//4.使用row獲取cell單元格
?? ??? ??? ??? ?String id = row.getCell(0).getStringCellValue();
?? ??? ??? ??? ?String province = row.getCell(1).getStringCellValue();
?? ??? ??? ??? ?String city = row.getCell(2).getStringCellValue();
?? ??? ??? ??? ?String district = row.getCell(3).getStringCellValue();
?? ??? ??? ??? ?String postcode = row.getCell(4).getStringCellValue();
?? ??? ??? ??? ?//5.創建area封裝數據
?? ??? ??? ??? ?Area area = new Area();
?? ??? ??? ??? ?area.setId(id);
?? ??? ??? ??? ?area.setProvince(province);
?? ??? ??? ??? ?area.setCity(city);
?? ??? ??? ??? ?area.setDistrict(district);
?? ??? ??? ??? ?area.setPostcode(postcode);
?? ??? ??? ??? ?
?? ??? ??? ??? ?province = province.substring(0, province.length() - 1);
?? ??? ??? ??? ?city = city.substring(0, city.length() - 1);
?? ??? ??? ??? ?district = district.substring(0, district.length() - 1);
?? ??? ??? ??? ?String tempStr = province+city+district;//河北石家莊開發
?? ??? ??? ??? ?String[] headByString = PinYin4jUtils.getHeadByString(tempStr);//[H,B,S,J,Z,K,F]
?? ??? ??? ??? ?String shortcode = StringUtils.join(headByString, "");
?? ??? ??? ??? ?area.setShortcode(shortcode);
?? ??? ??? ??? ?
?? ??? ??? ??? ?//2.城市碼
?? ??? ??? ??? ?String citycode = PinYin4jUtils.hanziToPinyin(city,"");
?? ??? ??? ??? ?area.setCitycode(citycode);
?? ??? ??? ??? ?
?? ??? ??? ??? ?list.add(area);
?? ??? ??? ?}
?? ??? ??? ?//6.批量保存數據
?? ??? ??? ?areaService.batchSave(list);
?? ??? ?} catch (IOException e) {
?? ??? ??? ?e.printStackTrace();
?? ??? ??? ?flag = "0";
?? ??? ?}
?? ??? ?//7.使用response將flag返回
?? ??? ?ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
?? ??? ?ServletActionContext.getResponse().getWriter().print(flag);
?? ??? ?return NONE;
?? ?}
}
第五步:創建service層的save方法實現保存。
@Service
@Transactional
public class AreaServiceimp implements AreaService {
@Resource
?? ?private AreaDao areadao;
?? ?@Override
?? ?public void add(ArrayList<Area> list) {
?? ??? ?for (Area area : list) {
?? ??? ??? ?areadao.save(area);
?? ??? ?}
?? ?}
}
第六步:AreaDao創建(本測試案例用到的持久層是JPA)
public interface AreaDao extends JpaRepository<Area, String>, JpaSpecificationExecutor<Area> { }
第七步:修改jsp頁面,如果上傳成功提示用戶上傳成功、如果失敗就提示上傳失敗。
?? ???? <script>
?? ??? ??? ?$(function() {
?? ??? ??? ??? ?$('#button-import').upload({
?? ??? ??? ??? ??? ?action: '${pageContext.request.contextPath}/upLoad.action',
?? ??? ??? ??? ??? ?name: 'areaFile',
?? ??? ??? ??? ??? ?onComplete: function(data) {
?? ??? ??? ??? ??? ??? ?if("1" == data) {
?? ??? ??? ??? ??? ??? ??? ?$.messager.confirm('提示信息', '上傳成功', 'info');
?? ??? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ??? ?$.messager.alert('提示信息', '上傳失敗', 'error');
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?})
?? ??? ??? ?})
?? ??? ?</script>
開始測試:
轉載于:https://www.cnblogs.com/sjzxs/p/9438529.html
總結
以上是生活随笔為你收集整理的EasyUi通过OCUpload上传及POI上传 实现导入xls表格功能的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: npm使用阮一峰
- 下一篇: (第六场)Singing Contest