1. 程式人生 > >jq實現迴圈遍歷樹形結構的CheckBox根據父級選中子級

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');
                }
            })
        }
    }
})

這樣就實現了根據一級選單來選中對應一級選單下的二級選單(菜鳥總結)