{extend name="mould:base" /}
{block name="title"}{/block}
{block name="content"}
<style type="text/css">
fieldset{padding:.35em .625em .75em;margin:0 2px; border:1px dotted silver}
legend{padding:.5em; border:0; width:auto; font-size: 1rem;}
legend label{ margin: 0; margin-right:15px; word-wrap: break-word; word-break: break-all; line-height: 24px;}
h5{ font-family: "微软雅黑"; background: #f1f1f1; padding-top: 5px}

</style>
<form action="{:url('rule',array('rule'=>1))}" method="post" class="layui-form" lay-filter="rules">
	<table width="100%" class="table_form"> 
	   	{volist name='rules' id='node1'}
	        <tr>
		        <td style="border:1px dotted #ccc; margin-bottom: 10px; padding: 10px;">
		            <h5>
		            	<input id='node{$node1.id}' pid='0' type="checkbox" value="{$node1.id}" name="rules[{$node1.id}]" {in name='node1.id' value='$field["rules"]'}checked = 'checked' {/in} title="{$node1.title}" lay-skin="primary" lay-filter="rules"/>
		            </h5>
		            {volist name='node1._data' id='node2'}
			        	<fieldset>
			                <legend>
			                	<input id='node{$node2.id}' pid='node{$node1.id}' cid="node{$node2.id}" type="checkbox" value="{$node2.id}" name="rules[{$node2.id}]" {in name='node2.id' value='$field["rules"]'}checked = 'checked' {/in} title="{$node2.title}" lay-skin="primary" lay-filter="rules"/>
			                </legend>
			                <div class="" style="padding-left: 10px;">
			                	{volist name='node2._data' id='node3'}
			                        <input id="node{$node3.id}" pid='node{$node2.id}' class="node{$node1.id}" type="checkbox" value="{$node3.id}" name="rules[{$node3.id}]" {in name='node3.id' value='$field["rules"]'}checked = 'checked' {/in} title="{$node3.title}" lay-skin="primary" lay-filter="rules"/>
			    				{/volist}
			    			</div>
			           </fieldset>
		    		{/volist}
		        </td>
		    </tr>
		{/volist}
	</table>
	{:widget('Widgets/button', ['name'=>'id','value'=>$field.editid,'buttontext'=>'保存'])}
</form>

{/block}
{block name="script"}
<script type="application/javascript">
$(function(){

layui.use('form', function(){
	var form = layui.form;
	form.on('checkbox(rules11111)', function(data){
		console.log(data.elem); //得到checkbox原始DOM对象
		//console.log(data.elem.checked); //是否被选中，true或者false
		//console.log(data.value); //复选框value值，也可以通过data.elem.value得到
		//console.log(data.othis); //得到美化后的DOM对象
		// form.render(null, 'rules');
		
	});

});

layui.use('form', function(){
	var form = layui.form;
	//全选
	$('#checkbox-all').click(function(){
		$("input[type='checkbox']").prop("checked", true);
		form.render('checkbox','rulesd');
	});
	//反选
	$('#checkbox-reverse').click(function(){
		$("input[type='checkbox']").prop("checked", function(index, attr){
			return !attr;
		});
		form.render('checkbox','rulesd');
	});
});


	layui.use('form', function(){
		var form = layui.form;
		$('body').on('click','.layui-form-checkbox',function(){
			var _self   = $(this),
			    _input  = _self.siblings('input'),
			    _value  = _input.val(),
			    _pid    = _input.attr('pid'),
			    _cid 	= _input.attr('cid'),
			    _class  = _input.attr('class');

			// 第一层
			if(_pid == 0){
				_input.is(':checked') ? _self.closest('td').find('input').prop('checked', true) : _self.closest('td').find('input').prop('checked', false);
			}

			// 第二层
			if(_pid != 0 && _cid != undefined){
				$('[pid='+_pid+']:checked').length ? $('#'+_pid).prop('checked',true) : $('#'+_pid).prop('checked',false);
				_input.is(':checked') ? $('[pid='+_cid+']').prop('checked',true) : $('[pid='+_cid+']').prop('checked',false);
			}

			// 第三层
			if(_pid != 0 && _cid == undefined){
				_input.is(':checked') ? $('#'+_pid).prop('checked',true) : $('#'+_pid).prop('checked',false);
				$('.'+_class+':checked').length ? $('#'+_class).prop('checked',true) : $('#'+_class).prop('checked',false);
			}

			form.render('checkbox','rules');
		});
	});
})
</script>
{/block}