1.2 基础部分

分页

• 抽取到common_page.jsp，在页面中引入，用<jsp:include page=""/>

$(".btn_page").click(function () {
    //为当前页的元素设值
    var page = $(this).data("page");
    $("input[name=currentPage]").val(page);
    //提交表单
    $("#searchForm").submit();
});

设置当前页currentPage

• class样式btn_page绑定点击事件，data-page传入当前页，
  js中接收并设置给currentPage，提交表单完成值的更改
• input的max、min属性可以设置页数范围

设置页面容量pageSize

• 原理同上，找pageSize的input标签，绑定change事件，提交表单

$(":input[name=pageSize]").change(function () {
        $("#searchForm").submit();
 });

• 标签给name和value属性值，旁边跳转按钮需要是submit类型

移动效果

原理

• 移动按钮实际是input type=“button”的输入框，根据id来绑定点击事件
• 以class样式名称来获取左右的下拉框，子元素装载每条备选细项
• 表单提交时，右边选中的所有option的value被封装成父元素name属性的数组，来保存多方关系

操作细节

$each()使用时，一定要注意index和item，当item作为迭代变量使用时不加$，属性是value

remove操作时是jQuery对象，要加$

给option标签增加属性用prop，名为“selected”，值为true

• 遍历右边框所有option，把当前对象的value值赋给Ids数组中索引为index的元素
• 遍历左边框所有子元素，当前对象在右边数组中，则移除，inArray(ele,array)方法，返回元素在数组中的索引，-1表示不存在。

if($.inArray(item.value, selectedXxIds)>=0){   $(item).remove();  }

-表单提交时，先将右边下拉框中的所有选项选中：

$(".class option").prop("selected",true);

批量删除

后台

SQL：<foreach collection="array" item="id" open="(" separator="," close=")">#{id}</foreach>

delete from employee where id in 
参数的类型是数组：使用array, 
参数的类型是list集合：使用list, 
参数贴@Param注解,使用自定义名称
item表示collection中迭代的具体项目，是标签中取值的名称。

前台Js

操作细节：

• btn_batchDelete绑定点击事件，data-url传入具体批量删除哪个页面

$(".btn_batchDelete").click(function () {
    var url = $(this).data("url");

});

• 获取选中的复选框，$(".acb:checked")，class样式名称来选择，选中状态checked过滤，中间没有空格
• 判断$(".acb:checked")复选框size，为0弹框提示选择数据。

if ($(".acb:checked").size() == 0) {
  $.dialog({
      title: "温馨提示",
      content: "请选择要删除的数据?",
      icon: "face-smile",
      lock: true,
      ok: true
  });
  return;
}

• JSP页面的每个复选框中，使用data-id传递参数。定义数组存放复选框ids，使用$.each遍历该数组，把id值储存在ids数组中

var ids = [];
$.each($(".acb:checked"), function (index, item) {
    // console.log(arguments);
    var id = $(item).data("id");
    ids[index] = id;
});

• 数组存值完毕，弹框提示用户确认删除，ok，jQuery使用post方式发送请求传递参数，响应成功，重载页面；不确认删除可返回

$.dialog({
    title: "温馨提示",
    content: "是否要批量删除这些数据?",
    icon: "face-smile",
    lock: true,
    ok: function () {
      $.post(url, {ids: ids}, function (json) {
        if (json.success) {
          $.dialog({
            title: "温馨提示",
            content:json.message,
            icon: "face-smile",
            lock: true,
            ok: function () {
                window.location.reload();
            }
            });
          }
        });
    },
    cancel: true
});

• 删除传递数组参数名中的[]：jQuery.ajaxSettings.traditional = true;即禁用数组的序列化
• 页面加载完，取消所有复选框的选中状态$(".acb").prop(“checked”, false);
• 全选／全不选：$("#all").change(function () {
  $(".acb").prop(“checked”, $(this).prop(“checked”));
  })

表单数据验证

引入jquery.validate.js

-JSON格式rules:{ },messages:{ }

$("#editForm").validate({
    rules: {
        name: {
            required: true,
            rangelength: [2, 8]
        }, password: {
            required: true,
            rangelength: [2, 8]
        }, repassword: {
            equalTo: "#password"
        }
    }, messages: {
        name: {
            required: "用户名不能为空",
            rangelength: "用户名长度应该在4到8位之间"
        }, password: {
            required: "密码不能为空",
            rangelength: "密码长度应该在4到8位之间"
        }, repassword: {
            equalTo: "两次密码不一致"
        }
    }
});

封装UserContext对象

注销用户方法：invalidate();

• 实现：设置／获取 | 用户／权限，设置常量表达式校验输入，都是静态方法
• 方便业务层中操作session，使用RequestContextHolder获取

拦截器

• 继承HandlerInterceptorAdapter，重写preHandle；false拦截，true放行
• 配置拦截器，除开登录资源<mvc:exclude-mapping path="/login.do"/>

mvc统一异常处理

• 配置bean SimpleMappingExceptionResolver
• web.xml版本需要3.0以上，否则JSP默认忽略EL表达式

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
		  http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         version="3.0">
</web-app>