TaoLer/app/admin/view/auth_group/roleedit.html

{extend name="public/base" /}

{block name="body"}

  <div class="layui-form" lay-filter="layuiadmin-form-role" id="layuiadmin-form-role" style="padding: 20px 30px 0 0;">
	<div class="layui-form-item layui-hide">
	 <input type="text" name="id" class="layui-input" value="{$auth.id}">
	</div>
	
    <div class="layui-form-item">
      <label class="layui-form-label">角色</label>
      <div class="layui-input-block">
        <select name="title">
		{volist name="authGroup" id="vo"}
          <option {if condition="$vo.id eq $Request.param.id"} selected {/if} id="{$vo.id}" value="{$vo.title}">{$vo.title}</option>
		{/volist}  
        </select>
      </div>
    </div>

	<div class="layui-form-item" id="test">
        <label class="layui-form-label">权限范围</label>             
			{volist name="menus" id="vo1"}
			 <ul class="layui-input-block" style="margin-top: 10px ;">
				 <li>
					 <input type="checkbox" name="rules" class="parent"  lay-skin="primary" data-level="{$vo1.level}" value="{$vo1.id}" title="{$vo1.title}------|" {if (in_array($vo1.id,$rus))} checked {/if}>
					 <ul>
					{if condition="isset($vo1['children'])"}
						{volist name="vo1['children']" id="vo2"}
						<li>
							{if condition="isset($vo2['children'])"}
							<input type="checkbox" name="rules" class="parent"  lay-skin="primary" data-level="{$vo2.level}" value="{$vo2.id}" title="{$vo2.title}：" {if (in_array($vo2.id,$rus))} checked {/if}>
								
								{volist name="vo2['children']" id="vo3"}
									<input type="checkbox" name="rules"  lay-skin="primary" id="{$vo3.id}" data-level="{$vo3.level}" value="{$vo3.id}" title="{$vo3.title}" {if (in_array($vo3.id,$rus))} checked {/if}>
								{/volist}
								
							{else /}
							<input type="checkbox" name="rules" lay-skin="primary" id="{$vo2.id}" data-level="{$vo2.level}" value="{$vo2.id}" title="{$vo2.title}：" {if (in_array($vo2.id,$rus))} checked {/if}>
							{/if}
						</li>	
						{/volist}
					{/if}
					 </ul>
				 </li>
			 </ul>
			{/volist}
    </div>
	

    <div class="layui-form-item">
      <label class="layui-form-label">具体描述</label>
      <div class="layui-input-block">
        <textarea type="text" name="descr" lay-verify="required" autocomplete="off" class="layui-textarea" value="{$auth.descr}">{$auth.descr}</textarea>
      </div>
    </div>
    <div class="layui-form-item layui-hide">
      <button class="layui-btn" lay-submit lay-filter="LAY-user-role-submit" id="LAY-user-role-submit">提交</button>
    </div>
  </div>

{/block}
{block name="js"}

	
  <script>
  layui.config({
    base: '/static/admin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table','form'], function(){
    var $ = layui.$
    ,form = layui.form 
	,table = layui.table;
	
//	var name = "{$ru}";
//	var names = name.split(",");
//	var inputs = $('input[name=rules]');
//	 for (var i =0;i<inputs.length;i++) {
//		for (var n =0;n<names.length;n++) {
//			if (names[n]===inputs[i].value) {
//				inputs[i].checked = true;
//			}
//		}
//	}
	
	form.on('checkbox()', function(data){
        //var pc =  data.elem.classList; //获取选中的checkbox的class属性
		var othis = $(data.elem);
		var level = $(data.elem).attr('data-level');

		
		//选择
        if(data.elem.checked==true){

		//主菜单
			if(level === '0'){
                var c =$(data.elem).siblings().find("input[type='checkbox']");
                c.each(function(){
                    var e = $(this); 
                    e.next().addClass("layui-form-checked");
                });
			
			}
			//子菜单及子项
			if(level === '1'){		
				 var c = $(data.elem).siblings("input[type='checkbox']");
                c.each(function(){
                    var e = $(this); 
                    e.next().addClass("layui-form-checked");
               });
			   
			  $(data.elem).parent().parent().prev().addClass("layui-form-checked");
                    
			}
			
			//子项
			if(level === '2'){

				$(data.elem).siblings('div:first').addClass("layui-form-checked");
                $(data.elem).parent().parent().prev().addClass("layui-form-checked");			
			}
                            
        }else{
		//取消

			if(level === '0'){
                var c =$(data.elem).siblings().find("input[type='checkbox']");
                c.each(function(){
                    var e = $(this); 
                    e.next().removeClass("layui-form-checked");
                });
			
			}

		if(level === '1'){
				 var c = $(data.elem).siblings("input[type='checkbox']");
                c.each(function(){
                    var e = $(this); 
                    e.next().removeClass("layui-form-checked");
               });
			   //子项为0，菜单取消选择
			   var s = $(data.elem).parent().parent().children('li').children('div:first-of-type .layui-form-checked');
				if(s.length === 0){
					$(data.elem).parent().parent().prev().removeClass("layui-form-checked");
				}
                    
			}
			
			//子项
			if(level === '2'){	
				var t = othis.siblings('div .layui-form-checked');
				if(t.length == 1){
					$(data.elem).siblings('div:first').removeClass("layui-form-checked");
				}
				//子项为0，菜单取消选择
				var s = $(data.elem).parent().parent().children('li').children('div:first-of-type .layui-form-checked');
				if(s.length === 0){
					$(data.elem).parent().parent().prev().removeClass("layui-form-checked");
				}			
			}
        }
    });      
	

  })
  </script>
 
{/block}