首页 > 代码库 > bos 第3天(easyui弹窗边界问题、取派员的添加、修改和批量删除)

bos 第3天(easyui弹窗边界问题、取派员的添加、修改和批量删除)

BOS项目笔记 第3

 

今天内容安排:

1、解决window窗口bug

2bos项目整体需求分析(基础设置、取派、中转、路由、报表)

3、取派员添加功能

4jQuery 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=http://www.mamicode.com/"#" 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 easyUIdatagrid数据表格使用

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实现取派员分页查询

第一步:修改页面中datagridURL地址,访问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方法,提供两个setPagesetRows方法,接收页面提交参数

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 = http://www.mamicode.com/‘${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弹窗边界问题、取派员的添加、修改和批量删除)