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;

ece4
//            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');

}
})
}
}
})

这样就实现了根据一级菜单来选中对应一级菜单下的二级菜单（菜鸟总结）