bos 第3天(easyui彈窗邊界問題、取派員的添加、修改和批量刪除)
BOS項目筆記 第3天
今天內容安排：
1、解決window窗口bug
2、bos項目整體需求分析（基礎設置、取派、中轉、路由、報表）
3、取派員添加功能
4、jQuery easyUI控件datagrid使用方式
5、基於datagrid實現取派員分頁查詢
6、取派員批量刪除和修改
1. 修復window控件bug
將上面的js文件引入jsp頁面中
2. 基礎設置部分需求分析
整個基礎設置部分對應需求文檔2.6章節。
2.1 基礎檔案設置
在其他的系統中通常稱為“數據字典”。提供基礎數據，供其他模塊使用。
2.2 收派標準
2.3 班車設置
2.4 取派員設置
2.5 區域設置
區域為國家劃分的行政區域。
2.6 分區設置
區域範圍很大，不規則，不便於直接進行人員分配，需要對區域進行細分----分區。
2.7 定區管理
定區是物流分配的基本單位。定區可以將分區、取派員、客戶信息進行關聯，為自動分單提供數據支持。hessian
2.8 時間管理
3. 取派員添加
頁面：/WEB-INF/pages/base/staff.jsp
第一步：擴展校驗規則，對手機號進行校驗
|
//擴展校驗規則 $(function(){ var reg = /^1[3|4|5|7|8|9][0-9]{9}$/; $.extend($.fn.validatebox.defaults.rules, { phonenumber: { validator: function(value, param){ return reg.test(value); }, message: ‘手機號輸入有誤！‘ } }); }); |
第二步：對應手機號輸入框應用上面的規則
第三步：為添加窗口中的保存按鈕綁定事件
|
<a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >保存</a> <script type="text/javascript"> $(function //綁定事件 $("#save").click(function(){ //校驗表單輸入項 var v = $("#addStaffForm").form("validate"); if(v){ //校驗通過，提交表單 $("#addStaffForm").submit(); } }); }); </script> |
第四步：創建StaffAction，提供add方法，處理取派員添加
|
@Controller @Scope("prototype") public class StaffAction extends BaseAction<Staff>{ //註入Service @Autowired private IStaffService staffService; /** * 添加取派員 */ public String add(){ staffService.save(model); return "list"; } } |
第五步：配置struts.xml
4. jQuery easyUI中datagrid數據表格使用
4.1 方式一：將HTML代碼渲染為datagrid樣式
|
<h3>方式一：將靜態的HTML代碼渲染為datagrid樣式</h3> <table class="easyui-datagrid"> <thead> <tr> <th data-options="field:‘id‘">編號</th> <th data-options="field:‘name‘">姓名</th> <th data-options="field:‘age‘">年齡</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>張三</td> <td>20</td> </tr> <tr> <td>002</td> <td>李四</td> <td>30</td> </tr> </tbody> </table> |
4.2 方式二：發送ajax請求獲取json數據
|
<h3>方式二：發送ajax請求獲取json數據</h3> <table class="easyui-datagrid" data-options="url:‘/bos19/json/data.json‘"> <thead> <tr> <th data-options="field:‘id‘">編號</th> <th data-options="field:‘name‘">姓名</th> <th data-options="field:‘age‘">年齡</th> </tr> </thead> </table> |
提供json文件：
4.3 方式三：使用插件提供的API動態創建datagrid
|
<h3>方式三：通過js代碼動態創建datagrid</h3> <table id="grid"> </table> <script type="text/javascript"> $(function(){ $("#grid").datagrid({ columns:[[ {field:‘id‘,title:‘編號‘,checkbox:true}, {field:‘name‘,title:‘姓名‘}, {field:‘age‘,title:‘年齡‘} ]], url:‘/bos19/json/data.json‘, toolbar:[ {text:‘添加‘,iconCls:‘icon-add‘}, {text:‘刪除‘,iconCls:‘icon-remove‘, handler:function(){ //獲得選中的行 var rows = $("#grid").datagrid("getSelections"); for(var i=0;i<rows.length;i++){ var id = rows[i].id; alert(id); } }}, {text:‘修改‘,iconCls:‘icon-edit‘} ], singleSelect:true, pagination:true,//分頁條 pageList:[3,5,7] }); }); </script> |
要求服務端返回的json數據滿足：
5. 基於datagrid實現取派員分頁查詢
第一步：修改頁面中datagrid的URL地址，訪問action
第二步：創建一個PageBean類，封裝分頁信息
|
public class PageBean { private int currentPage;//當前頁碼 private int pageSize;//每頁顯示記錄數 private int total;//總記錄數 private DetachedCriteria detachedCriteria;//離線條件查詢對象，包裝查詢條件 private List rows;//當前頁需要展示的數據集合 public int getCurrentPage() { return currentPage; } public void setCurrentPage(int currentPage) { this.currentPage = currentPage; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public int getTotal() { return total; } public void setTotal(int total) { this.total = total; } public DetachedCriteria getDetachedCriteria() { return detachedCriteria; } public void setDetachedCriteria(DetachedCriteria detachedCriteria) { this.detachedCriteria = detachedCriteria; } public List getRows() { return rows; } public void setRows(List rows) { this.rows = rows; }
} |
第三步：在StaffAction中提供pageQuery方法，提供兩個setPage和setRows方法，接收頁面提交參數
|
private int page;//頁碼 private int rows;//每頁顯示的記錄數 public void setRows(int rows) { this.rows = rows; }
public void setPage(int page) { this.page = page; } /** * 分頁查詢方法 * @throws IOException */ public String pageQuery() throws IOException{ PageBean pageBean = new PageBean(); pageBean.setCurrentPage(page); pageBean.setPageSize(rows); DetachedCriteria detachedCriteria = DetachedCriteria.forClass(Staff.class); pageBean.setDetachedCriteria(detachedCriteria);
staffService.pageQuery(pageBean); //將PageBean對象轉為json返回 JSONObject jsonObject = JSONObject.fromObject(pageBean); String json = jsonObject.toString(); ServletActionContext.getResponse().setContentType("text/json;charset=UTF-8"); ServletActionContext.getResponse().getWriter().print(json); return NONE; } |
第四步：在BaseDao中提供通用分頁查詢方法
|
/** * 通用分頁查詢方法 */ public void pageQuery(PageBean pageBean) { int currentPage = pageBean.getCurrentPage(); int pageSize = pageBean.getPageSize(); DetachedCriteria detachedCriteria = pageBean.getDetachedCriteria(); //總數據量----select count(*) from bc_staff //改變Hibernate框架發出的sql形式 detachedCriteria.setProjection(Projections.rowCount());//select count(*) from bc_staff List<Long> list = this.getHibernateTemplate().findByCriteria(detachedCriteria); Long total = list.get(0); pageBean.setTotal(total.intValue());//設置總數據量 detachedCriteria.setProjection(null);//修改sql的形式為select * from .... //重置表和類的映射關系 detachedCriteria.setResultTransformer(DetachedCriteria.ROOT_ENTITY); //當前頁展示的數據集合 int firstResult = (currentPage - 1) * pageSize; int maxResults = pageSize; List rows = this.getHibernateTemplate().findByCriteria(detachedCriteria, firstResult, maxResults); pageBean.setRows(rows); } |
6. 批量刪除取派員
邏輯刪除取派員，將取派員的deltag改為“1”
第一步：為“作廢”按鈕綁定事件
|
//批量刪除取派員 function doDelete(){ //獲得選中的行 var rows = $("#grid").datagrid("getSelections"); if(rows.length == 0){ //沒有選中，提示 $.messager.alert("提示信息","請選擇需要刪除的記錄！","warning"); }else{ var array = new Array(); //選中了記錄,獲取選中行的id for(var i=0;i<rows.length;i++){ var id = rows[i].id; array.push(id); } var ids = array.join(",");//1,2,3,4 //發送請求，傳遞ids參數 window.location.href = ‘${pageContext.request.contextPath}/staffAction_delete.action?ids=‘+ids; } } |
第二步：在StaffAction中提供ids屬性和set方法，delete方法批量刪除
|
//接收ids參數 private String ids; public void setIds(String ids) { this.ids = ids; }
/** * 批量刪除功能（邏輯刪除） * @return */ public String delete(){ staffService.deleteBatch(ids); return "list"; } |
第三步：在Service中提供批量刪除方法
|
/** * 批量刪除 */ public void deleteBatch(String ids) { String[] staffIds = ids.split(","); for (String id : staffIds) { staffDao.executeUpdate("staff.delete", id); } } |
第四步：在Staff.hbm.xml中定義更新語句
7. 取派員信息修改功能
第一步：復制添加取派員窗口，獲得修改的窗口
第二步：修改datagrid的雙擊行事件的處理函數
第三步：提交修改的表單
第四步：在StaffAction中提供edit方法，修改取派員信息
|
/** * 修改取派員信息 */ public String edit(){ //顯查詢數據庫中原始數據 Staff staff = staffService.findById(model.getId()); //再按照頁面提交的參數進行覆蓋 staff.setName(model.getName()); staff.setTelephone(model.getTelephone()); staff.setStation(model.getStation()); staff.setHaspda(model.getHaspda()); staff.setStandard(model.getStandard()); staffService.update(staff); return "list"; } |
bos 第3天(easyui彈窗邊界問題、取派員的添加、修改和批量刪除)