jq实现循环遍历树形结构的CheckBox根据父级选中子级

最新推荐文章于 2024-09-14 09:41:26 发布

ZYJ~

最新推荐文章于 2024-09-14 09:41:26 发布

阅读量3.7k

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/zyj_15067066062/article/details/73649102

版权

Javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

首先贴一张需要实现是效果图（这树形结构用的是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');

                }
            })
        }
    }
})

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