常见js功能

常见的一些js功能

一、全选、全不选、反选

<input id="checkedButton" type="button" value="全选/取消">

<!--遍历列表中的复选框，需要给class属性-->
 <input type="checkbox" class="check_clazz" id="checkId" value="${record.id}">

/**
 * 全选/全不选
 */ 
$("#checkedButton").click(function () {
 //遍历所有复选框
 $(".check_clazz").each(function () { 
$(this).attr("checked", !$(this).attr("checked")); 
}) })

二、多选时拼接逗号隔开的字符串

1.定义数组的方式

//处理选中的id 
let idList = []; 
$("#checkId:checked").each(function(){ 
    idList.push($(this).val())
 }) 
let ids = idList.join(",")

2.截取字符的方式

 let ids = "";

 $("#checkId:checked").each(function(){
   ids = ","+ids; 
 }) 

 ids = ids.substring(1)

三、二级联动

树形结构/递归结构

数据表设计主要的三个字段：

id 主键（一级/二级/三级/...）

name 名称（一级/二级/三级/...）

parent_id 父级ID（一级默认是0 ，其他级对应上一级的id就是parent_id）

适用于：系统管理-菜单管理；商品分类；多级评论；组织架构；省市区等业务场景

实现思路：

1.查询语句：既能查公司又能查部门，又能根据公司查询对应部门，根据parentId进行查询

2.写接口实现

3.页面：两个下拉框

4.js：遍历公司/部门

         先遍历公司

         根据改变的公司ID，查到对应的部门进行遍历

5.回显：

         第一种方式：

                   1.获取详情SQL：查询四个字段

                   2.页面直接${}出来

代码示例：

页面：

所属公司：  <select id="companyId">
           <option value=0>请选择</option> </select>
 所属部门： <select name="deptId" id="deptId"> 
           <option value=0>请选择</option>
           </select><br>

JS：

$(function () { 
    //动态获取公司下拉框 
     $.ajax({ 
     url: "/dept/getAllByParentId",//调用获取公司列表接口 
     data: {"parentId": 0} 
     success: function (res) { 
        //拿到结果后，forin，遍历结果集合，拼接<option>标签给公司下拉框赋值 
         for (let x in res) {
         $("#companyId").append( "<option value=" + res[x].id + ">" + res[x].name + " 
            </option>" ) 
            }
          }
     }) 


     //根据选择的公司名称二级联动展示对应的部门 
     $("#companyId").change(function () { 
         //清空所有元素 
         $("#deptId").empty(); 
         //默认拼接请选择
         $("#deptId").append("<option value=>请选择</option>") 
         //ajax请求调用接口 
         $.ajax({ 
             url: "/dept/getAllByParentId",//调用根据公司ID获取部门列表接口
             data: {"parentId": $(this).val()},//将公司id传过去 //处理成功结果集合
             success: function (res) { //遍历结果集合，拼接得到的部门信息到下拉框中 
                for (let x in res) {
                    $("#deptd").append( 
                       "<option value=" + res[x].id + ">" + res[x].name + "</option>"
                      )
                 }
               } 
          }) 
       }) 
 })

后台：

controller

业务层：

实现层：

mapper :

xml:

二级联动回显：

代码示例：

       第一种方式：

1.获取详情SQL：查询四个字段

2.页面直接${}出来，其他的正常

第二种方式：如果是选择用Ajax回显所有的信息，则需要一行主动触发公司改变事件的代码，如：

$.ajax({
    url:"/findOneById",
    data:{"id":id},
    success:function(res){
        //回显一级：公司
        $("#companyId").val(res.companyId);
        //主动触发公司的改变事件
        $("#companyId").trigger("change");
        //回显二级：部门
        $("#dept")).val(res.deptId)
    }
}})

四、上传文件

<!--选择文件-->
<input type="file" id="file">
<!--提交（上传到服务器）-->
<input type="button" value="上传图片" onclick="uploadFile()">
<!--回显上传后的文件-->
<img id="img">

//上传图片
function uploadFile() {
    //根据id选择器获取到选择的file，这里需要用js的id选择器去获取，因为jquery的id选择器没有"files"的属性
    var file = document.getElementById("file").files[0];

    //上传文件，注意：post请求、不异步、不缓存，不转二进制、不转类型（以文件的形式传输）、文件上传需要以form表单的形式传值！！！！

    //创建FormData
    var formData = new FormData()
    formData.append("file",file);

    $.ajax({
        url:"/pur/uploadFile", //调用上传文件接口
        type:"post", //上传文件必须是post请求
        data:formData,
        contentType:false, //不转类型，仅以文件的形式传输
        cache:false, //不缓存
        async:false, //不异步
        processData:false, //不转二进制
        success:function (res) {
            //这里获取到的res是保存图片的路径,此时需要发送一个请求，以流的形式展示到页面上
            let value = "/pur/showImg?res="+res;
            $("#img").attr("src",value);
            $("[name=imgPath]").val(value);

        }
    })
}

五、复选框

遍历：

方式一：单独写一个接口，使用ajax请求，调用接口，返回结果后，遍历结果append拼接复选框（代码示例：略）

方式二：使用Model或者ModelAndView返回复选框的数据，在页面中使用遍历

方式二-代码示例如下：

思路：该方式需要再进入指定页面的控制层方法中，获取到复选框的动态数据，使用Model或者ModelAndView返回给页面。

后端：控制层：

前端：具体页面：

回显：

思路：通过调用回显接口，得到被选中的复选框的List idList，遍历该集合，将集合中存在的数据，属性设置为选中状态

后端：

实体类：返回集合

/**
 * 返回集合
 */
private List<String> HobbyList;

实现层：

（1）如果是在同一张表存的，以逗号隔开的字符串，则需要将字符串转为List，使用该方法：

Arrays.asList (xxx.split (",")); 会得到一个List 代码示例如下：

/**
 * 回显
 * @param userId
 * @return
 */
@Override
public User getUserById(String userId) {

    //根据ID获取详情信息
    User userById = userMapper.getUserById (userId);
    //如果获取的详情对象不为空
    if (null != userById){
        //获取对象中的爱好（逗号隔开字符串）
        String hobby = userById.getHobby ();
        //将逗号隔开的字符串，转为List集合
        List<String> hobbyList = Arrays.asList (hobby.split (","));
        //将得到的集合，赋值给对象中的集合字段
        userById.setHobbyList (hobbyList);
    }
    //返回详情结果
    return userById;

控制层：使用Model或者ModelAndView返回详情对象

前端：JS：

思路：将详情中得到的结果，和复选框的值进行比较，如果一致则选中状态设置为：true。

//从返回对象中获取爱好集合
var hobbyList = '${user.hobbyList}'.split(",")
//遍历该集合
for (let x in hobbyList) {
    $("[value = "+hobbyList[x]+"]").attr("checked",true)
}

复选框回显，结果集返回一对多，

控制层：controller

拿到集合，转成JSON格式的字符串，给到Model

实体类中：

mapper.xml中：

前端页面：

拿到Model中的foodsList 用JSON.parse()转成对象

遍历对象，比较vlalue一致就设置选中状态为true

六、登录失败3次,XX分钟后再登录

cookie存的单位是秒.

在判断密码错误的地方存放cookie

//获得cookie中的值
var e = document.cookie[2];
if(e=='3') {
    alert("登录失败三次,10s内不能重复登录")
    return false;
}



alert("密码错误")
//获取cookie的第三位
var e = document.cookie[2];
if(isNaN(e)) {//判断cookie中的值是不是不是一个数
    document.cookie = "a=1;max-age=10";
}else { //如果存在+1
    var newE = parseInt(e) + 1;
    document.cookie = "a=" + newE + ";max-age=10";
}

代码示例: