jquery,ajax动态从数据库加载数据并自动选中复选框

ajax动态加载下拉框数据(前端js发送ajax请求,后端查询数据库,得到数据,返回前端),GET,POST,DELETE,PUT上一篇地址

上一篇讲了下拉框,现在说说复选框

先从简单的单选框说起

 <tr>
        <td class="tableleft">状态</td>
        <td>
            <input type="radio" name="rState" value="0" checked/> 启用
           <input type="radio" name="rState" value="1" /> 禁用
        </td>
    </tr>

单选框

单选框在数据库中一般是以数值(整型)方式存储,也就是0和1,就是他们的value值,所以查询数据回显时一行代码搞定

//value是数据库中存储的数据,这行代码的意思是,选中value值为key的单选框,这样就实现了根据后台数据准确选择对应的单选框
//注意,key要以字符串拼接的方式拼接,这样key就是变化的,而不是字符串
 $("input[name=rState][value="+ key +"]").attr("checked",true);
 

那些年踩过的坑

<tr>
   <td width="10%" class="tableleft">角色名称</td>
   <td><input type="text" name="rName" value=""/></td>
</tr>
//普通的输入框直接传值(如下),单选框和复选框不能如此,
//举个例子:两个单选框的值value都会变为uState,我就是因为太年轻犯下这样的错误
//想修改状态,调试半天,怎么后台接收到的值不变,我还以为是后端出了问题(前端恐怖如期,嘿嘿)
$("input[name='rName']").val(rName);//rName为后台传入的值

复选框

静态的只有一个id

<td class="tableleft">权限</td>
<td id="menuList"></td>

js代码

let menuList = [];//定义一个空数组,用来装复选框各选项对应的值(比如第一个是挂号管理,对应主键为1(可以查看上面菜单表),就把1存入)
$(//页面加载事件,当页面加载完成时,发送ajax请求(可以看小明上一篇其他形式的ajax)
    function queryMenu () {//页面加载时,显示全部菜单
        $.get("/role/menu",function (vo) {//vo是小明自己封装的返回对象
            $("#menuList").empty();//清空
            var menus1 = vo.pageInfo.list;//根据个人情况,得到菜单集合
            //功能上类似java的forEach
            //我在别人那里学来的函数,第一个参数menus1是要遍历的集合,后面是一个匿名函数,i就类似java的for循环里的i,取其他的也行,
            //e应该是element元素的意思,也就是menus1集合里面的元素,在这是菜单元素
            $.each(menus1, function (i, e) {
            	//字符串的拼接一定要注意,value值就菜单元素的主键也就是e.mId
            	//mId和mName是后端菜单类的属性字段,不能搞混哦,(算了,到时贴出来)
                $("#menuList").append(
                    "<ul><label className='checkbox inline'><input type='checkbox' name='menus1' value='" + e.mId + "'/>" + e.mName + "</label></ul>"
                );
            });//到这就把所有的菜单多选框都加载完了
            //老实说这两行代码我也不懂,大概意思就是把,从数据
            $("input[name='menus1']").each(function (i) {//把复选框的所有值存入数组
            	//还记得第一行定义的那个数据吗(再去看下第一行注释)
            	//这样就把数据库中所有的菜单主键值装入数据中了(这是让其自动选中做的准备)
                return menuList[i] = $(this).val();
            });
        },"json")
    }

	function queryById(rId) {
        $.ajax({
            type: "GET",
            url: "/role/"+rId, //RESTful风格的API定义
            data: "",
            success: function (vo) {
                let obj=vo.obj;
                let rId=obj.rId;
                let rName=obj.rName;
                let rState=obj.rState;
                let menus=obj.menus;
                $("input[name='rName']").val(rName);
                //单选框回显
                $("input[name=rState][value="+rState+"]").attr("checked",true);
                /*if (rState==1){//这个可以让rState==1即禁用状态的复选框也处于禁用状态
                    //$("input[name=menus1]").addClass("disabled");
                    $("input[name=menus1]").attr("disabled",true);
                }else {
                    $("input[name=menus1]").removeAttr("disabled");
                }*/
                //复选框回显
                //功能上类似java的forEach
                $.each(menus, function (o, e) {//menus是从数据库中查询出来的此角色包含的菜单
                    for (var i=0; i<menuList.length; i++) {//还记得那个数据吗,装着所有复选框的值
                    	//这里是双重for循环,可以比对每一个值
                        if (menuList[i]==e.mId){//只要该角色中的包含该菜单
                            //页面就把该菜单对应的多选框选中,大概这么个意思
                            $("input[name=menus1][value="+menuList[i]+"]").attr("checked",true);
                        }
                    };
                });
            }
        });
    }

);

前端有意思是有意思,可问题我不会😭,写这两篇博客把我仅有的前端知识都榨干了,以后…,不行,打死不能立flag,一立必死。

ajax动态加载下拉框数据(前端js发送ajax请求,后端查询数据库,得到数据,返回前端),GET,POST,DELETE,PUT上一篇地址