jq实现循环遍历树形结构的CheckBox根据父级选中子级
首先贴一张需要实现是效果图(这树形结构用的是easyui的),这效果是用jq实现的,数据是后台查询出来,并实例化到前台,再循环遍历
后台查询出来的数据本来是这样的:
这样的二维数组是不够的,需要我们处理一下:
$newarray = array(); foreach ($list as $data){ $rolename = $data['rolename']; if(array_key_exists($rolename, $newarray)) { $d = $newarray[$rolename]; $yearArray = $d['text']; } else { $d = array(); $d['rolename'] = $rolename; $yearArray = array(); } $YearMonthData = array( 'userroleid' => $data['userroleid'], 'vkorgtext' => $data['vkorgtext'], 'vtwegtext' => $data['vtwegtext'], 'vkburtext' => $data['vkburtext'], ); $yearArray[] = $YearMonthData; // var_dump($yearArray); $d['text'] = $yearArray; $newarray[$rolename] = $d; }这样处理之后我们的数组就变成了这样结构:
里面的数据是根据你的需要进行更改。
HTML布局,对后台处理过的数据进行循环遍历,
<td> <div class="easyui-panel" style="padding:5px;width: 250px;"> <ul class="easyui-tree"> <li> <span>{$vkorglist[0]['vktext']}</span> <ul> <!--一级菜单--> <foreach name="vtweglist" item="i"> <li data-options="state:'closed'"> <span> <input style="height:12px;" class="vtweg" type="checkbox" name="vtweg[]" value="{$i.vtweg}" id="{$i.vtweg}"> <span>{$i.wegtext}</span> </span> <!--二级菜单--> <ul> <foreach name="i.vkbur" item="vo"> <li> <span> <input style="height:12px;" class="vkbur" type="checkbox" name="vkbur[]" value="{$vo.vkbur}" id="{$vo.vkbur}"> <span>{$vo.vkbe}</span> </span> </li> </foreach> </ul> </li> </foreach> </ul> </li> </ul> </div> </td>
下面就是jq部分:
//后台实例化对象传到前台的数组,将数组转换成json格式的字符串 var olddata = '<?php echo json_encode($old);?>'; //将json格式的字符串转换成json格式的对象 var olddatas = JSON.parse(olddata); var count = olddatas.length; //一级菜单 $(".vtweg").each(function(){ var vtweg = $(this); var vtwegid = vtweg.attr('id'); for(var i=0;i<count;i++){ if(olddatas[i].VTWEG == vtwegid){ vtweg.attr('checked','true'); //二级菜单 vtweg.parent().parent().next().children().find('.vkbur').each(function(){ var vkbur = $(this); var vkburid = $(this).attr('id'); if(olddatas[i].VKBUR == vkburid){ vkbur.attr('checked','true'); } }) } } })
这样就实现了根据一级菜单来选中对应一级菜单下的二级菜单(菜鸟总结)