jQuery 实现 checkbox的树形菜单结构（2）

最新推荐文章于 2021-06-04 21:55:10 发布

csl0l0

最新推荐文章于 2021-06-04 21:55:10 发布

阅读量1k

点赞数

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>新增角色</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png" href="${back.assetsPath}/i/favicon.png">
<link rel="apple-touch-icon-precomposed" href="${back.assetsPath}/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<script src="${back.assetsPath}/js/echarts.min.js"></script>
<link rel="stylesheet" href="${back.assetsPath}/css/amazeui.min.css" />
<link rel="stylesheet" href="${back.assetsPath}/css/amazeui.datatables.min.css" />
<link rel="stylesheet" href="${back.assetsPath}/css/app.css">
<script src="${back.assetsPath}/js/jquery.min.js"></script>
<script>
$(function(){

var menuIds = $('#menuIds').val();
alert("menuIds== "+menuIds);
if(menuIds!=''){//复选框错误回选
var idArray = menuIds.split(',');
for(var i=0;i<idArray.length;i++){
var checkbox_name = "checkbox_"+idArray[i];
$('[name ='+checkbox_name+']').prop({checked: true});
}
}

$('#but_add').click(function(){
$('#but_add').attr("disabled",true);
var menuIdArr = new Array();
$('input[type="checkbox"]').each(function(){//将所有的选中的复选框的值存入这里很奇怪使用$('input[type="checkbox"]：checked')处于模糊状态的父菜单获取不到但是用$(this).prop("checked")判断是true 测试发现和indeterminate 属性是true的话就会有这种问题 false就没有
//alert($(this).prop("name")+"===="+$(this).prop("checked") );
if($(this).prop("checked")){//
menuIdArr.push($(this).val());
}

});
//alert("menuIdArr== " +menuIdArr);
$('#menuIds').val(menuIdArr);
if($('#roleId').val()==''){
$('#roleForm').attr("action",'${contextPath}/back/system/role/roleadd.htm');
}else{
$('#roleForm').attr("action",'${contextPath}/back/system/role/roleedit.htm');
}
$('#roleForm').submit();
});


$('#but_check_all').click(function(){//全选和全部反选
//$("input[type='checkbox']").attr("checked","true");
$("input[type='checkbox']").each(function(i,o){
//alert($(this).prop("name")+" "+$(this).prop("checked")+" "+$(this).attr("checked"));
$(o).prop("checked",!$(o).prop("checked"));
});

});

//菜单树选择JS
// Apparently click is better chan change? Cuz IE?
$('input[type="checkbox"]').change(function(e) {

var checked = $(this).prop("checked"),//当前复选框的是否被选中
container = $(this).parent().parent(),//当前复选框的爷爷元素 <li class="sidebar-nav-link c_checkbox_class">
siblings = container.siblings();//当前复选框的同级元素

//alert("container name:"+ container.prop("name")+" container class:"+ container.prop("class"));//以 Smurfs为例 container class= li_class_1
//遍历container中所有的 checkbox 并且把父元素下的复选框全部选中
//问题：现在是父元素下只有一个复选框有多个的话就会有问题选一个就会把父元素下的所有都选中
//解决方案:父元素的下的同级子元素必须用html 元素分开
container.find('input[type="checkbox"]').prop({
indeterminate: false,
checked: checked
});

//checkSiblings BEGIN
function checkSiblings(el) {

var parent = el.parent().parent(),// parent为传入元素的爷爷元素这里是 <li class="sidebar-nav-link p_checkbox_class" > 所以父菜单与子菜单之间要间隔2个元素
all = true;

var $parent = $(parent);
//alert("checkSiblings parent class== "+ $parent.prop("class"))
el.siblings().each(function() {//如果el的同级元素有没有被选中的则 each 循环会跳出即有一个同级的复选框没选中循环会跳出
var childern_checked = $(this).children().children('input[type="checkbox"]').prop("checked");
//alert("childern_checked = "+childern_checked);
all = ( childern_checked === checked);
return all;
//return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
});

//alert("all:"+all+"---checked:"+checked); //all:true
if (all && checked) {//其父菜单下的其他子菜单选中且当前复选框选中选中状态一致
//alert("进了all && checked all=="+all+"---checked=="+checked);
parent.children().children('input[type="checkbox"]').prop({
indeterminate: false,
checked: true
});

checkSiblings(parent);//递归

} else if (all && !checked) {//其父菜单下的其他子菜单没勾且当前复选框变为没勾中状态
//alert("进了all && !checked all=="+all +"---checked=="+checked);
parent.children().children('input[type="checkbox"]').prop("checked", checked);//将父菜单变成勾中状态
parent.children().children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
checkSiblings(parent);

} else {//其父菜单下的其他子菜单也没选中将父菜单变成模糊状态
//alert("进了 else all=="+all+"---checked=="+checked);
//alert("name=="+el.parents("li").children('input[type="checkbox"]').prop("name"));
el.parents("li").children().children('input[type="checkbox"]').prop({//将父菜单选中图标变成模糊状态
indeterminate: true,
checked: true 这里业务上是需要将模糊状态的父菜单的值上传的
});

}

}
//checkSiblings END

checkSiblings(container);//Smurfs
});
//菜单树选择JS END
});

</script>
</head>

<body data-type="index" style="background:#fff;">
<script src="${back.assetsPath}/js/theme.js"></script>





<#if errMsg??>
<div class="am-alert am-alert-warning am-text-center am-text-xs am-padding-0" data-am-alert>${errMsg!''}</div>
</#if>
<div class="widget am-cf">
<div class="widget-head am-cf">
<div class="widget-title am-cf">新增角色</div>
</div>
<div class="widget-body-md widget-body am-fr am-text-center">
<form class="am-form am-form-inline tpl-form-border-form tpl-form-border-br" id="roleForm" method="post" action="${contextPath}/back/system/role/roleadd.htm" >
<input type="hidden" id="menuIds" name="menuIds" value="${(roleMenu.menuIds)!''}" />
<input type="hidden" id="roleId" name="roleId" value="${(role.id)!''}" />
<table class="am-table am-table am-table-bordered am-table-radius am-table-striped" style="width:500px; margin:15px auto;">
<tbody>
<tr>
<td class="am-text-right">*角色名称：</td>
<td class="am-text-left">
<input type="text" placeholder="角色名称" id="roleName" name="roleName" value="${(role.roleName)!''}" />
</td>
</tr>
<tr>
<td class="am-text-right">
菜单树：
<button id="but_check_all" type="button" >全选</button>
</td>
<td class="am-text-left">
<ul class="sidebar-nav">

<#if menuTree?? && menuTree?size gt 0>
<#list menuTree as umenu>
<#if umenu.menuType = 1>
<li class="sidebar-nav-link p_checkbox_class" >
<a href="javascript:" class="sidebar-nav-sub-title p_href">
<input type="checkbox" name="checkbox_${umenu.id!0}" id="checkbox_${umenu.id!0}" value="${umenu.id!0}">
${umenu.menuName!''}
<span class="am-icon-chevron-down am-fr am-margin-right-sm sidebar-nav-sub-ico"></span>
</a>
<#if umenu.childernList?? && umenu.childernList?size gt 0>
<ul class="sidebar-nav sidebar-nav-sub">
<#list umenu.childernList as childernMenu >
<li class="sidebar-nav-link c_checkbox_class">
<a href="javascript:" class="c_href_menuType_1">
<input type="checkbox" name="checkbox_${childernMenu.id!0}" id="checkbox_${childernMenu.id!0}" value="${childernMenu.id!0}">
${childernMenu.menuName!0}
</a>
</li>
</#list>
</ul>
</#if>
</li>
<#elseif umenu.menuType = 2>
<li class="sidebar-nav-link">
<a href="javascript:" class="c_href_menuType_2" >
<input type="checkbox" name="checkbox_${umenu.id!0}" id="checkbox_${umenu.id!0}" value="${umenu.id!0}">
${umenu.menuName!''}
</a>
</li>
<#else>

</#if>
</#list>
</#if>
</ul>
</td>
</tr>
</tbody>
</table>

<div>

</div>

<div class="am-form-group am-text-center">
<a href="${contextPath}/back/system/role/rolelist.htm" class="am-btn am-btn-default tpl-btn-bg-color-success am-margin-right-lg">返回列表</a>
<button id="but_add" type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button>
</div>


</form>
</div>
</div>

<script src="${back.assetsPath}/js/amazeui.min.js"></script>
<script src="${back.assetsPath}/js/amazeui.datatables.min.js"></script>
<script src="${back.assetsPath}/js/dataTables.responsive.min.js"></script>
<script src="${back.assetsPath}/js/app.js"></script>

</body>

</html>

csl0l0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 实现 checkbox的树形菜单结构（2）

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;新
复制链接

扫一扫