1. 程式人生 > >項目一:第三天

項目一:第三天

對象 lis .data 生命周期 standard exc 分頁查詢 ont com

1、收派標準添加

n jQuery easyUI window使用

n jQuery easyUI form表單校驗

n 收派標準添加頁面調整url params

n 服務端實現三層

2jQuery easyUI datagrid 使用方式

n 將靜態HTML渲染為datagrid樣式(html方式)

n 發送ajax請求獲取動態json數據構造datagridhtml方式)

n 使用easyUI提供的APIjs方式)動態創建datagrid掌握

3、收派標準管理

n 收派標準分頁查詢(基於datagrid實現)

n 收派標準修改

4、快遞員管理

n 快遞員添加

快遞員列表查詢(

no-Session)

-----------------------------------------------------------------------------

1.1 Validatebox表單校驗

技術分享圖片

技術分享圖片

1、 input加樣式class=easyui-validatebox

2、 設置校驗規則:

a) 非空規則 required:true

技術分享圖片

b) 其他規則:通過validType:指定規則

3、 在提交表單之前做表單校驗:調用FORMvalidate方法

1.1 通過調用easyuiAPIjs)創建datagrid
掌握

1、 在頁面中添加table元素給出id

2、 頁面加載完成調用API datagrid將數據表格創建,通過json對象設置數據表格屬性

當顯示分頁組件:

點擊分頁按鈕發送請求,提交兩個參數page(當前頁數) rows(每頁顯示記錄數)

服務端響應返回符合規範數據json對象: total(總記錄數) rows(當前頁的數據)

{

total: 12,

rows:[]

}

通過js方式創建數據表格

<table id="dg"></table>

<script type="text/javascript"

>

$(‘#dg‘).datagrid({

url:‘../data/user.json‘, //發送請求 數據來源

columns:[[ //展示數據

{field:‘id‘,title:‘編號,width:100},

{field:‘name‘,title:‘姓名,width:100},

{field:‘age‘,title:‘年齡,width:100,align:‘right‘}

]],

pagination:true,//展示分頁欄

/*

請求:提交參數

加入分頁組件後,會自動提交兩個參數 1page(當前頁) 1rows(每頁顯示記錄數)

響應:響應json數據

{

total:100,

rows:[] //當前頁記錄

}

*/

toolbar:[{

iconCls: ‘icon-edit‘,

text:"編輯",

handler: function(){ //點擊事件

alert(‘edit‘)

}

},{

iconCls: ‘icon-save‘,

text:"新增",

handler: function(){ //點擊事件

alert(‘save‘)

}

},{

iconCls: ‘icon-help‘,

text:‘幫助,

handler: function(){alert(‘help‘)}

}] ,

rownumbers:true,

singleSelect:true,

striped:true,

pageSize:3,

pageList:[3,10]

});

</script>

1 收派標準分頁

技術分享圖片

@Action("standardAction_pageQuery")

public String pageQuery() throws Exception {

//dao中方法 Page<T> findAll(Pageable pageable);

//pageable:封裝當前頁 每頁展示記錄數

Pageable pageable = new PageRequest(page-1, rows);

//返回Page對象中:包含當前頁記錄 總記錄數等

Page<Standard> page = standardService.pageQuery(pageable);

System.out.println("查詢到總記錄數:"+page.getTotalElements());

System.out.println("查詢當前頁記錄:"+page.getContent());

Map<String, Object> map = new HashMap<>();

map.put("total", page.getTotalElements());

map.put("rows", page.getContent());

//json gson;jsonlib,fastjson,jackson

//Jsonlibjson

//轉對象,map 使用JSONObject

//轉集合,數組說那個JSONArray

//將對象轉為json

String json = JSONObject.fromObject(map).toString();

System.out.println(json);

ServletActionContext.getResponse().setContentType("text/json;charset=utf-8");

ServletActionContext.getResponse().getWriter().write(json);

return NONE;

1 實現收派標準修改功能

1.1 頁面調整

查詢easyui API

Datagrid的方法:獲取選中的記錄

技術分享圖片

form表單方法:回顯數技術分享圖片

1、 給修改按鈕設置點擊事件:1判斷2、獲取選中記錄3在表單中回顯數據 4打開窗口

技術分享圖片

技術分享圖片

1.1 使用combobox展示收派標準數據

1、 頁面:pages/base/courier.jsp

2、 修改comboboxurl

技術分享圖片

1、 在收派標準action中添加查詢所有收派標準,返回json數組形式

技術分享圖片

1.1 No session(理解)

初始化快遞員對象中 定區集合

Web層轉Courier對象為json串時候,對象中有fixedareas集合屬性,jpa集合屬性加載策略延遲加載。在action中轉fixedareas集合為json串,通過代理對象查詢數據庫,action層中session已經關閉。

技術分享圖片

1、 解決方案:

1、 解決方案:方式一:使用過濾器延遲session生命周期:在web層(頁面渲染完畢)關閉session

僅解決解決noSession問題

在web.xml中配置過濾器,當頁面渲染完畢後關閉session

<!-- 必須放在struts2核心過濾器之前作用,延遲session生命周期 -->

<filter>

<filter-name>openEntityManagerInViewFilter</filter-name>

<filter-class>org.springframework.orm.jpa.support.OpenEntityManagerInViewFilter</filter-class>

</filter>

<filter-mapping>

<filter-name>openEntityManagerInViewFilter</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

a) 方式二:將集合屬性改為立即加載(效率低不用)

技術分享圖片

技術分享圖片

b) 方式三:

1、 方式二:將實體中不需要轉json的屬性排除掉

技術分享圖片

技術分享圖片

1、 頁面中展示數據:

技術分享圖片

技術分享圖片

項目一:第三天