1、 基础档案设置 (数据字典)
系统会事先预置一些系统级别的基础档案,如员线路类型、保险类型等;客户根据自己的需要动态增加
将页面中常用类型选择,保存到数据库中 , 为其它各个模块提供类别选择数据
2、 收派标准
将承接的货物,按照重量和体积两个标准,双纬度定义货物的标准。以便将不同标准的货物分给不同收取和派送能力的人员
* 取派员 取派货物能力不同,遵守一定标准
3、 班车设置
取派员 取派货物时,遵守一定线路规则
4、 取派设置/替班
* 取派员排班信息, 如果谁有事,替换进行取派
5、 区域设置
* 自然区域 ,省 市 区 , 取派覆盖区域
6、 管理分区
* 将区域进行细分,以便于进行 安排取派员负责特定区域
7、 管理定区/调度排班
* 将几个分区 划分为一个定区, 为定区关联 负责取派人员
8、 收派时间管理
* 取派员 工作时间
取派员(负责取货和送货),负责一定区域(定区),定区由多个分区组成(区域管理、分区管理),取派员有作息时间(收派时间管理),每个取派员负责不同重量级别的货物(收派标准),遵循一定线路(班车设置 )
实际完成功能:
1) 收派标准 管理 --- 1天
2) 取派员管理
3) 区域管理
4) 分区管理
5) 定区管理 (关联取派员、分区、客户) ---- 1天
二、 基础设置模块 数据库建模
hibernate 进行开发,两种线路
线路一: 传统开发模型, 数据库建模设计 ,创建数据表, 反转引擎生成PO实体类和hbm映射文件
线路二: 领域建模 ,根据业务编写PO类,设计hbm映射文件, 通过类生成数据表
采用传统模型开发, 设计数据表 ----- 专业数据库建模工具 PowerDesigner
PD 支持三种数据模型 : 概念数据模型(面向需求,类似E-R图) CDM 、 面向对象模型(以对象结构描述数据关系,生成java类) OOM、 物理数据模型(表结构) PDM
* 三种模型可以转换的,物理数据模型,生成SQL脚本,完成建表
导入 基础设置 pdm ,生成数据表
myeclipse , 根据数据表 生成实体类 和 hbm映射
三、 主页面,点击左侧 ztree代码,在右侧生成 tab选项
ztree初始化三步
1) setting
2) zNodes 数据
3) 初始化树结构
点击树节点触发 onclick函数
四、 收派标准管理
点击收派标准菜单, page:"page_base_standard.action" ------ > /WEB-INF/pages/base/standard.jsp
在一个页面内部,使用Ajax功能,完成数据 CURD
* standard.jsp 采用 layout布局,只提供 center区域, 是数据表格 (稍后讲)
* 点击 "增加" 弹出隐藏 window , window提供添加标准的form表单
struts2 <s:form> 标签, 在Ajax开发中 根本没用 !!!!!
1、 添加收派标准
form 以 ajax方式提交
方式一 :使用jquery 方式(ajax方式提交form)
添加标准
1) StandardAction extends BaseAction implements ModelDriven<Standard>
2) StandardService 接口 ---- StandardServiceImpl extends BaseService implements StandardService 实现类
3) 在BaseService 中注入 standardDAO
4) 在BaseAction 中注入 standardService
配置 : struts.xml --> applicationContext-action.xml -- > applicationContext-service.xml --> applicationContext-dao.xml
ajax操作,返回结果,定义BaseAction
类似数据表格: ext 、 flex 、jqgrid(jquery插件)、 easyui datagrid
思想: ajax方式获取json 格式数据,绑定到一个table上,显示为表格 <tr> 数据项
使用ajax数据表格 ,比在服务器通过循环遍历 生成 tr元素,效率更好 !!!
方式一: 针对HTML数据直接进行 datagrid样式修饰
方式三: 使用js代码定义 表头
1)HTML 方式定义
datagrid 进行分页查询,加载json数据显示,需要响应数据标准格式 :
响应: total 总记录数, rows 结果数据
请求Bean设计
响应Bean设计
异常: could not initialize proxy - no Session
解决延迟抓取问题, OpenSessionInViewFilter
定义列信息
getSelected none 返回第一个选中的行记录或null。
getSelections none 返回所有选定的行,当没有记录被选中,我将返回空数组。
删除功能时,将deltag 设置为 1
============= 删除后、添加后, $("#grid").datagrid('reload'); 重新加载数据
查询时, detachedCriteria.add(Restrictions.eq("deltag", "0"));// 查询未删除
6、 取派标准修改功能
使用ajax单页完成增删改查, 数据就是页面中, 修改时,无需进行页面跳转,直接将数据显示在form中
修改功能和添加功能 使用同一个form
问题: 使用同一个form如何区分是 添加还是修改 ?
在form中添加 隐藏id域,如果id域有值,进行修改,没有值,进行添加
1) 双击表格中数据,弹出窗口,在form中回显数据
提交修改完成后, $('#standardForm').get(0).reset(); 无法清除隐藏域信息的,必须手动清除 $('#standard_id').val('');
<
系统会事先预置一些系统级别的基础档案,如员线路类型、保险类型等;客户根据自己的需要动态增加
将页面中常用类型选择,保存到数据库中 , 为其它各个模块提供类别选择数据
2、 收派标准
将承接的货物,按照重量和体积两个标准,双纬度定义货物的标准。以便将不同标准的货物分给不同收取和派送能力的人员
* 取派员 取派货物能力不同,遵守一定标准
3、 班车设置
取派员 取派货物时,遵守一定线路规则
4、 取派设置/替班
* 取派员排班信息, 如果谁有事,替换进行取派
5、 区域设置
* 自然区域 ,省 市 区 , 取派覆盖区域
6、 管理分区
* 将区域进行细分,以便于进行 安排取派员负责特定区域
7、 管理定区/调度排班
* 将几个分区 划分为一个定区, 为定区关联 负责取派人员
8、 收派时间管理
* 取派员 工作时间
取派员(负责取货和送货),负责一定区域(定区),定区由多个分区组成(区域管理、分区管理),取派员有作息时间(收派时间管理),每个取派员负责不同重量级别的货物(收派标准),遵循一定线路(班车设置 )
实际完成功能:
1) 收派标准 管理 --- 1天
2) 取派员管理
3) 区域管理
4) 分区管理
5) 定区管理 (关联取派员、分区、客户) ---- 1天
二、 基础设置模块 数据库建模
hibernate 进行开发,两种线路
线路一: 传统开发模型, 数据库建模设计 ,创建数据表, 反转引擎生成PO实体类和hbm映射文件
线路二: 领域建模 ,根据业务编写PO类,设计hbm映射文件, 通过类生成数据表
采用传统模型开发, 设计数据表 ----- 专业数据库建模工具 PowerDesigner
PD 支持三种数据模型 : 概念数据模型(面向需求,类似E-R图) CDM 、 面向对象模型(以对象结构描述数据关系,生成java类) OOM、 物理数据模型(表结构) PDM
* 三种模型可以转换的,物理数据模型,生成SQL脚本,完成建表
导入 基础设置 pdm ,生成数据表
myeclipse , 根据数据表 生成实体类 和 hbm映射
三、 主页面,点击左侧 ztree代码,在右侧生成 tab选项
ztree初始化三步
1) setting
2) zNodes 数据
3) 初始化树结构
var setting = {
data : {
key : {
title : "t" // 将鼠标停留在树节点上提示内容
},
simpleData : {
enable : true // 简单数据, 树每个节点,存在 pId 指定父节点
}
},
callback : {
onClick : onClick // 绑定每个节点, 点击事件
}
};
数据 :
{ id:11, pId:0, name:"基础档案", click:false},
{ id:111, pId:11, name:"基础档案设置", t:"基础档案设置",page:"page_base_jichudangan.action"}
点击树节点触发 onclick函数
function onClick(event, treeId, treeNode, clickFlag) {
if (treeNode.click != false) { // 判断节点数据 click属性 是否为false
open(treeNode.name, treeNode.page); // 点击子节点时,调用open方法, 传递节点name属性、节点page属性
}
}
function open(text, url) { // text 就是name属性, url就是page属性
if ($("#tabs").tabs('exists', text)) { // 如果当前选项卡,已经存在
$('#tabs').tabs('select', text); // 切换到该选项卡
} else { // 当前选项卡不存在,添加一个新选项卡
var content = '<div style="width:100%;height:100%;overflow:hidden;">'
+ '<iframe src="'
+ url
+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
$('#tabs').tabs('add', { // 添加新选项卡
title : text, // 标题
content : content, // 内容
//href : url
closable : true
});
}
}
四、 收派标准管理
点击收派标准菜单, page:"page_base_standard.action" ------ > /WEB-INF/pages/base/standard.jsp
在一个页面内部,使用Ajax功能,完成数据 CURD
* standard.jsp 采用 layout布局,只提供 center区域, 是数据表格 (稍后讲)
* 点击 "增加" 弹出隐藏 window , window提供添加标准的form表单
struts2 <s:form> 标签, 在Ajax开发中 根本没用 !!!!!
1、 添加收派标准
form 以 ajax方式提交
方式一 :使用jquery 方式(ajax方式提交form)
$("#save").click(function(){
$.post("standard_add.action", $("#standardForm").serialize(), function(data){
// 提交后处理...
});
}); // 点击保存按钮
方式二: 使用easy ui 提供form 控件 (以ajax方式提交form )
$("#save").click(function(){
$("#standardForm").form('submit',{
url : '${pageContext.request.contextPath}/standard_add.action', // 提交到哪?
success : function(data){
// 成功后 执行回调函数
alert("添加成功");
}
});
});
// 自动进行 form校验
添加标准
1) StandardAction extends BaseAction implements ModelDriven<Standard>
2) StandardService 接口 ---- StandardServiceImpl extends BaseService implements StandardService 实现类
3) 在BaseService 中注入 standardDAO
4) 在BaseAction 中注入 standardService
配置 : struts.xml --> applicationContext-action.xml -- > applicationContext-service.xml --> applicationContext-dao.xml
ajax操作,返回结果,定义BaseAction
// Ajax执行后返回内容
protected Object result = "success";
public Object getResult() {
return result;
}
后续处理
success : function(data){
data = eval("("+data+")");
// 成功后 执行回调函数
if(data == "success"){
$.messager.alert("信息","添加成功" ,"info");
$('#addStandardWindow').window("close"); // 关闭窗口
$('#standardForm').get(0).reset();// get(0) 将jquery对象转换为 dom对象
}
}
2、 收派标准 数据表格使用 ---- 使用 easy ui 提供 datagrid 制作的
类似数据表格: ext 、 flex 、jqgrid(jquery插件)、 easyui datagrid
思想: ajax方式获取json 格式数据,绑定到一个table上,显示为表格 <tr> 数据项
使用ajax数据表格 ,比在服务器通过循环遍历 生成 tr元素,效率更好 !!!
方式一: 针对HTML数据直接进行 datagrid样式修饰
<table class="easyui-datagrid">
<thead>
<tr>
<!-- 每个th必须要有 field属性 -->
<th data-options="field:'id'">编号</th>
<th data-options="field:'name'">商品名称</th>
<th data-options="field:'price'">商品价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>笔记本</td>
<td>5000</td>
</tr>
<tr>
<td>2</td>
<td>手机</td>
<td>1999</td>
</tr>
</tbody>
</table>
方式二: 绑定json数据显示
<table class="easyui-datagrid" data-options="url:'data.json'">
<thead>
<tr>
<!-- 每个th必须要有 field属性 -->
<th data-options="field:'id'">编号</th>
<th data-options="field:'name'">商品名称</th>
<th data-options="field:'price'">商品价格</th>
</tr>
</thead>
</table>
data.json
{
"rows" : [
{"id":"1","name":"洗衣粉","price":"10"},
{"id":"2","name":"手电筒","price":"2"},
{"id":"3","name":"盆","price":"3"}
]
}
方式三: 使用js代码定义 表头
$("#gridTable").datagrid({
// 数据来源
url : 'data.json',
// 表头
columns : [[
{
field : 'id' , // 绑定json中内容
title : '编号' , // 显示内容
width : 200
},// 一个{} 代表一个th
{
field : 'name',
title : '商品名称',
width : 200
},
{
field : 'price',
title : '商品价格',
width : 100
}
]] // 定义多行表头
});
<table id="gridTable"></table>
定义工具栏 : toolbar属性
1)HTML 方式定义
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">按钮一</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">按钮二</a>
</div>
<table class="easyui-datagrid" data-options="url:'data.json',toolbar:'#tb'">
2) JS 方式定义
toolbar : [
{
iconCls: 'icon-edit',
id : 'button-view',
text : '查询',
handler : function(){
alert("点击了按钮一");
}
}, // 一个{} 就是一个按钮
{
iconCls: 'icon-ok',
id : 'button-ok',
text : '确认',
handler : function(){
alert("点击了按钮二");
}
}
]
3、
使用datagrid 实现分页查询功能
datagrid 进行分页查询,加载json数据显示,需要响应数据标准格式 :
{
"total" : "100" ,
"rows" : [
{}, {},{} // 这里每个大括号代表一条数据
]
}
简化为: 这里[] 就是rows属性值
[
{},{},{}
]
分页查询分析
响应: total 总记录数, rows 结果数据
请求Bean设计
public class PageRequestBean {
// page 当前页码, rows 每页多少条, 条件
private int page ; // 当前页码
private int rows ; // 每页多少条
// 设计成员,代表任何条件查询
private DetachedCriteria detachedCriteria;
}
响应Bean设计
@SuppressWarnings("all")
public class PageResponseBean {
// 响应: total 总记录数, rows 结果数据
private long total;
private List rows ;
}
将 datagrid 的 url : "${pageContext.request.contextPath}/standard_pageQuery.action",配置struts.xml 指定返回数据
<param name="includeProperties">
total,
rows\[\d+\]\.id,
rows\[\d+\]\.name,
rows\[\d+\]\.minweight,
rows\[\d+\]\.maxweight,
rows\[\d+\]\.user\.username,
rows\[\d+\]\.updatetime,
rows\[\d+\]\.user\.station
</param>
异常: could not initialize proxy - no Session
解决延迟抓取问题, OpenSessionInViewFilter
<filter>
<filter-name>OpenSessionFilter</filter-name>
<filter-class>org.springframework.orm.hibernate3.support.OpenSessionInViewFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>OpenSessionFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
4、 关于datagrid 的数据内容回显问题
{
field : 'user.username',
title : '操作人',
width : 120,
align : 'center',
// 自定义显示规则
formatter : function(value,rowData, rowIndex){// value当前属性对应值,rowData 该行数据对象, rowIndex 行索引
if(rowData.user != null){
return rowData.user.username;
}
}
}
5、 取派标准删除功能
定义列信息
{
field : 'id',
checkbox : true,
}
将id显示为checkbox ,进行勾选
getSelected none 返回第一个选中的行记录或null。
getSelections none 返回所有选定的行,当没有记录被选中,我将返回空数组。
删除功能时,将deltag 设置为 1
============= 删除后、添加后, $("#grid").datagrid('reload'); 重新加载数据
查询时, detachedCriteria.add(Restrictions.eq("deltag", "0"));// 查询未删除
6、 取派标准修改功能
使用ajax单页完成增删改查, 数据就是页面中, 修改时,无需进行页面跳转,直接将数据显示在form中
修改功能和添加功能 使用同一个form
问题: 使用同一个form如何区分是 添加还是修改 ?
在form中添加 隐藏id域,如果id域有值,进行修改,没有值,进行添加
1) 双击表格中数据,弹出窗口,在form中回显数据
$('#grid').datagrid( {
onDblClickRow : doDblClickRow
});
双击函数有参数吗?
function doDblClickRow(rowIndex, rowData){
}
回显数据问题
// numberbox数据回显
$('#minweight').numberbox('setValue',rowData.minweight);
$('#maxweight').numberbox('setValue',rowData.maxweight);
2) 修改操作和添加操作 使用同一个Action方法,在业务层 进行判断,进行添加或者修改 !!!
提交修改完成后, $('#standardForm').get(0).reset(); 无法清除隐藏域信息的,必须手动清除 $('#standard_id').val('');
<