zoukankan      html  css  js  c++  java
  • 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="#" 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 = '${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";

    }

  • 相关阅读:
    [pyqt4]mark
    EPC摘抄
    sockaddr struct 类型重定义
    linux编译警告 will be initialized after
    cout如何输出十六进制
    strcpy unsigned char
    c语言格式控制符
    c++字节数组转换为整型
    C++如何判断大小端
    C++中关于位域的概念
  • 原文地址:https://www.cnblogs.com/wujizun/p/6925928.html
Copyright © 2011-2022 走看看