请问这里如何实现一个checkbox tree?

未结贴
4 142
选择一级checkbox时,就选择所有子级;选择二级checkbox时就全选了二级下面的子级和一级checkbox;选择二级下面的其中一个就默认选择 了二级checkbox和一级checkbox!

<div class="layui-input-block">
<!--主菜单-->
<input type="checkbox" name="" title="系统设置" lay-skin="primary" lay-filter="allChoose">
<div style="margin-left: 50px;" class="checked-box">
<!--二级菜单-->
<div class="checked2">
<input type="checkbox" name="" title="用户管理" lay-skin="primary" lay-filter="allChoose2">
<div style="margin-left: 50px;" class="checked-child">
<input type="checkbox" name="" title="添加用户" lay-skin="primary">
<input type="checkbox" name="" title="编辑用户" lay-skin="primary">
<input type="checkbox" name="" title="删除用户" lay-skin="primary">
</div>
</div>
<!--二级菜单-->
<div class="checked2">
<input type="checkbox" name="" title="角色管理" lay-skin="primary" lay-filter="allChoose2">
<div style="margin-left: 50px;" class="checked-child">
<input type="checkbox" name="" title="添加角色" lay-skin="primary">
<input type="checkbox" name="" title="编辑角色" lay-skin="primary">
<input type="checkbox" name="" title="删除角色" lay-skin="primary">
</div>
</div>

<!--二级菜单-->
<div class="checked2">
<input type="checkbox" name="" title="网关组管理" lay-skin="primary" lay-filter="allChoose2">
<div style="margin-left: 50px;" class="checked-child">
<input type="checkbox" name="" title="管理组" lay-skin="primary">
</div>
</div>
<!--二级菜单-->
<div class="checked2">
<input type="checkbox" name="" title="配置管理" lay-skin="primary" lay-filter="allChoose2">
<div style="margin-left: 50px;" class="checked-child">
<input type="checkbox" name="" title="添加配置" lay-skin="primary">
<input type="checkbox" name="" title="编辑配置" lay-skin="primary">
<input type="checkbox" name="" title="删除配置" lay-skin="primary">
</div>
</div>
</div>
</div>
form.on('checkbox(allChoose)', function(data){
var child = $(data.elem).parent('.layui-input-block').find('.checked-box :checkbox');
child.each(function(index, item){
item.checked = data.elem.checked;
});
form.render('checkbox');
});

form.on('checkbox(allChoose2)', function(data){
// var child2 = $(data.elem).siblings('.checked-child').find(':checkbox');
var child2 = $(data.elem).parent('.checked2').find('.checked-child :checkbox');
child2.each(function(index, item){
item.checked = data.elem.checked;
});
form.render('checkbox');
});
  • LYChao LYChao
    2017-03-21 13:09:44
    这个需求最近我也在做,目前官方没有提供便捷方法,希望下个版本能有新进展
    0 回复
  • Sofar Sofar
    2017-03-21 13:30:23
    可以用其他插件实现啊,比如ztree。
    0 回复
  • 学习ing 学习ing
    2017-03-21 17:58:30
    @LYChao 你现在是怎么实现的啊
    0 回复
  • LYChao LYChao
    2017-03-22 08:53:22
    @学习ing 这块不是紧急功能,所以先跳过了,暂时一个一个点啦[偷笑]
    0 回复
最近热帖
vip-admin Html v1.6.0 更新了 - 基于layui的后台模板 1262
layui省市区三级联动数据库版 1222
基于thinkphp3.2.3+layui的超简洁企业网站后台管理模版 452
基于LayUI封装的一个简单表格.(好久没发贴了,发一下福利),用得上就拿去吧~~~ 396
layui渲染select或checkbox问题 320
重新修改了Fly社区模版,取消响应式,PC和移动独立分开 256
不依赖服务端渲染模板,前端实现模板渲染加载问题的一些思考。 255
贤心大大,我想改网址 252
百思不得其解的一个问题! 232
请问为什么layer中弹出层内容点击事件不起作用?? 231
近期热议
vip-admin Html v1.6.0 更新了 - 基于layui的后台模板 15
基于thinkphp3.2.3+layui的超简洁企业网站后台管理模版 13
百思不得其解的一个问题! 12
layui的use加载问题 11
范围的日历,怎么让第一个日历选中时间后,第二个立刻自动弹出 10
请问为什么layer中弹出层内容点击事件不起作用?? 10
jquery的layer弹出层框架,如果设置 iframe弹出一个页面里是表单提交,提交完怎么关闭 10
为什么select我不加selected他默认选中呀? 9
请问如何监听右上角的关闭事件 9
弹出层宽度高度自适应 7