<!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>
<!-- 风格切换 -->
<!--<div class="tpl-skiner">
<div class="tpl-skiner-toggle am-icon-cog">
</div>
<div class="tpl-skiner-content">
<div class="tpl-skiner-content-title">
选择主题
</div>
<div class="tpl-skiner-content-bar">
<span class="skiner-color skiner-white" data-color="theme-white"></span>
<span class="skiner-color skiner-black" data-color="theme-black"></span>
</div>
</div>
</div>-->
<!-- 内容区域 -->
<#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">
<!-- menuTree -->
<#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>
<!--------------------------------------- TEST -------------------------------------------------------->
<div>
</div>
<!-------------------------------------------------- TEST END -------------------------------------------->
<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>
<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>
<!-- 风格切换 -->
<!--<div class="tpl-skiner">
<div class="tpl-skiner-toggle am-icon-cog">
</div>
<div class="tpl-skiner-content">
<div class="tpl-skiner-content-title">
选择主题
</div>
<div class="tpl-skiner-content-bar">
<span class="skiner-color skiner-white" data-color="theme-white"></span>
<span class="skiner-color skiner-black" data-color="theme-black"></span>
</div>
</div>
</div>-->
<!-- 内容区域 -->
<#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">
<!-- menuTree -->
<#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>
<!--------------------------------------- TEST -------------------------------------------------------->
<div>
</div>
<!-------------------------------------------------- TEST END -------------------------------------------->
<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>