有四级的checkbox,我归为1234级,全选开始一对多,然后下来都是多对多。。
结果碰到了很多问题,这里没有用双向绑定,用的是一个ui框架 layer。
现在的问题:我在点击第4级的任何一个checkbox的时候,非常麻烦!要判断父级再父级。。。。依次像上!而且这个美化过的checkbox的checked状态和点击的p不是双向绑定的。要在最后render一次!!!所以我几乎没有办法判断同级的是否已经全选,父级的是否全选。。。。
附上文档,http://www.layui.com/doc/modu...
求解思路!!
<p class="upfloor">
<p class="ltside">模块</p>
<p class="rtside"><span>操作权限</span>
<input id="chooseall" type="checkbox" class="choosewhole" lay-filter="chooseall" lay-skin="primary">
<label class="chooseall">全选</label>
</p>
</p>
<p class="floor">
<!-- 开单接待 -->
<p class="frfloor floorsign">
<p class="ltside">
<input type="checkbox" lay-filter="choosepart" class="choosepart" lay-skin="primary">
<span>开单接待</span>
</p>
<p class="rtside h72">
<!-- 一组 -->
<p class="items">
<p class="groupall">
<input class="checkgroup" type="checkbox" lay-skin="primary">
<span>维修开单</span>
<p class="indexline"></p>
</p>
<p class="groupli">
<input type="checkbox" class="single" lay-skin="primary">
<span>开单</span>
<input type="checkbox" class="single" lay-skin="primary">
<span>完工</span>
<input type="checkbox" class="single" lay-skin="primary">
<span>结算</span>
<input type="checkbox" class="single" lay-skin="primary">
<span>打印</span>
</p>
</p>
<p class="items">
<p class="groupall">
<input class="checkgroup" type="checkbox" lay-skin="primary">
<span>维修开单</span>
<p class="indexline"></p>
</p>
<p class="groupli">
<input type="checkbox" class="single" lay-skin="primary">
<span>开单</span>
<input type="checkbox" class="single" lay-skin="primary">
<span>完工</span>
<input type="checkbox" class="single" lay-skin="primary">
<span>结算</span>
<input type="checkbox" class="single" lay-skin="primary">
<span>打印</span>
<input type="checkbox" class="single" lay-skin="primary">
<span>反结算</span>
</p>
</p>
</p>
</p>
<!-- 库存管理 -->
<p class="sdfloor floorsign">
<p class="ltside">
<input type="checkbox" lay-filter="choosepart" class="choosepart" lay-skin="primary">
<span>库存管理</span>
</p>
<p class="rtside h394">
<p class="items">
<p class="groupall">
<input type="checkbox" class="checkgroup" lay-skin="primary">
<span>维修开单</span>
<p class="indexline"></p>
</p>
<p class="groupli">
<input type="checkbox" class="single" lay-skin="primary">
<span>维修开单</span>
<input type="checkbox" class="single" lay-skin="primary">
<span>维修开单</span>
<input type="checkbox" class="single" lay-skin="primary">
<span>维修开单</span>
<input type="checkbox" class="single" lay-skin="primary">
<span>维修开单</span>
</p>
</p>
</p>
</p>
</p>
트리 메뉴는 클릭한 하위 노드부터 상위 노드까지 반복됩니다. 반복 시 다음 하위 노드가 모두 선택되었는지 확인합니다. 모든 하위 노드가 선택되면 현재 노드를 true로 설정합니다.