php思维处理点击父级所有子集选中,点击子集选中父级

最近在做权限管理,前端页面效果也需要实现,不精通前端,所以只能自己用后端PHP的思维来写权限管理的选中效果

以下是我整理过后的代码,将所有的代码都写在一个php文件内了,粘贴下来可以直接运行

<?php
    $jurisdiction = '[{"id":"3deccd009ea311e8b08545822ddd7074","pid":"cfcd208495d565ef66e7dff9f98764da","name":"\u9996\u9875","icon":"\/img\/jur_img\/index.png","url":"\/auth\/home\/index","level":0,"child":[{"id":"6ea917609ea311e89174e915778b980d","pid":"3deccd009ea311e8b08545822ddd7074","name":"\u56ed\u6240\u4e3b\u9875","icon":"\/img\/index\/iconIndex.png","url":"\/auth\/school\/detail","level":1,"child":[{"id":"a3bb07609ea311e8aeb331e8f67b2e4b","pid":"6ea917609ea311e89174e915778b980d","name":"\u4eca\u65e5\u603b\u89c8","icon":null,"url":"\/auth\/today\/view","level":2,"child":[]}]}]},{"id":"525ba8909ea311e8b4939f9c535b76bb","pid":"cfcd208495d565ef66e7dff9f98764da","name":"\u5e7c\u513f\u7ba1\u7406","icon":"\/img\/jur_img\/child.png","url":"\/auth\/child\/index","level":0,"child":[{"id":"da7223f0a84011e8b22b25579648904c","pid":"525ba8909ea311e8b4939f9c535b76bb","name":"\u5e7c\u513f\u4fe1\u606f","icon":"\/img\/index\/iconChild.png","url":"\/auth\/child\/information","level":1,"child":[{"id":"c9086530a99711e88c2e7f13329cedcf","pid":"da7223f0a84011e8b22b25579648904c","name":"\u5728\u56ed\u5e7c\u513f","icon":null,"url":"\/auth\/child\/index","level":2,"child":[]},{"id":"ed340640aa6211e89d42556886302b47","pid":"da7223f0a84011e8b22b25579648904c","name":"\u79bb\u56ed\u5e7c\u513f","icon":null,"url":"\/auth\/child\/leave","level":2,"child":[]},{"id":"f3880430a84011e88033551ca022acb5","pid":"da7223f0a84011e8b22b25579648904c","name":"\u770b\u56ed\u65b0\u751f","icon":null,"url":"\/auth\/visitor\/index","level":2,"child":[]}]}]},{"id":"a13b8a509ec811e8b4d15999e360754b","pid":"cfcd208495d565ef66e7dff9f98764da","name":"\u804c\u5de5\u7ba1\u7406","icon":"\/img\/jur_img\/teacher.png","url":"\/auth\/teacher\/manage","level":0,"child":[{"id":"4c244d60a69711e8a6a6b3c6fdb2ed4a","pid":"a13b8a509ec811e8b4d15999e360754b","name":"\u804c\u5de5\u4fe1\u606f","icon":"\/img\/index\/iconDetails.png","url":"\/auth\/teacher\/information","level":1,"child":[{"id":"37f904b0a69811e896bff3c8c48783fe","pid":"4c244d60a69711e8a6a6b3c6fdb2ed4a","name":"\u6743\u9650\u7ba1\u7406","icon":null,"url":"\/auth\/jurisdiction\/administration","level":2,"child":[{"id":"5249b380a69811e88803ad31bbcd2436","pid":"37f904b0a69811e896bff3c8c48783fe","name":"\u6dfb\u52a0\u89d2\u8272","icon":null,"url":"\/auth\/role\/add","level":3,"child":[]},{"id":"64b34220a69811e8be3ef93f2f680afa","pid":"37f904b0a69811e896bff3c8c48783fe","name":"\u7f16\u8f91\u89d2\u8272","icon":null,"url":"\/auth\/role\/update","level":3,"child":[]},{"id":"7a4126e0a69811e8a545839f58f138ca","pid":"37f904b0a69811e896bff3c8c48783fe","name":"\u7f16\u8f91\u7535\u8111\u7aef\u6743\u9650","icon":null,"url":"\/auth\/role\/jurisdiction","level":3,"child":[]}]},{"id":"5d8e4290a69711e8aca5975bcfe599ee","pid":"4c244d60a69711e8a6a6b3c6fdb2ed4a","name":"\u804c\u5de5\u660e\u7ec6","icon":null,"url":"\/auth\/teacher\/index","level":2,"child":[{"id":"6f99d140a69711e8a623830b556f816a","pid":"5d8e4290a69711e8aca5975bcfe599ee","name":"\u65b0\u589e\u804c\u5de5","icon":null,"url":"\/auth\/teacher\/add","level":3,"child":[]},{"id":"86cfee00a69711e8b88be1ba643726b1","pid":"5d8e4290a69711e8aca5975bcfe599ee","name":"\u67e5\u770b\u6559\u804c\u5de5","icon":null,"url":"\/auth\/teacher\/detail","level":3,"child":[]},{"id":"98f14f00a69711e8975745b16eafc7a6","pid":"5d8e4290a69711e8aca5975bcfe599ee","name":"\u4fee\u6539\u6559\u804c\u5de5","icon":null,"url":"\/auth\/teacher\/update","level":3,"child":[]},{"id":"aba0c140a69711e8b9232d6bf77c0710","pid":"5d8e4290a69711e8aca5975bcfe599ee","name":"\u5220\u9664\u6559\u804c\u5de5","icon":null,"url":"\/auth\/teacher\/delete","level":3,"child":[]},{"id":"be86fba0a69711e8bbf4b1c025873a9a","pid":"5d8e4290a69711e8aca5975bcfe599ee","name":"\u91cd\u7f6e\u5bc6\u7801","icon":null,"url":"\/auth\/teacher\/reset","level":3,"child":[]}]}]},{"id":"f9b4b2c0a83811e8b2b09120c7a33240","pid":"a13b8a509ec811e8b4d15999e360754b","name":"\u5de5\u8d44\u7ba1\u7406","icon":"\/img\/index\/iconMoney.png","url":"\/auth\/wages\/administration","level":1,"child":[{"id":"0f077450a83911e8ba8657477becb065","pid":"f9b4b2c0a83811e8b2b09120c7a33240","name":"\u5de5\u8d44","icon":null,"url":"\/auth\/wages\/wages","level":2,"child":[]},{"id":"276558a0a83911e88c65dd4f9668a005","pid":"f9b4b2c0a83811e8b2b09120c7a33240","name":"\u62a5\u8868","icon":null,"url":"\/auth\/wages\/form","level":2,"child":[{"id":"7f7a2290a83911e8aa1c3926f4850aea","pid":"276558a0a83911e88c65dd4f9668a005","name":"\u6708\u5de5\u8d44\u8868","icon":null,"url":"\/auth\/wages\/month","level":3,"child":[]},{"id":"8e42bb70a83911e88ff5a3d560562268","pid":"276558a0a83911e88c65dd4f9668a005","name":"\u5458\u5de5\u5de5\u8d44\u67e5\u8be2\u8868","icon":null,"url":"\/auth\/wages\/teacher","level":3,"child":[]},{"id":"a0968b00a83911e891d419118262f1de","pid":"276558a0a83911e88c65dd4f9668a005","name":"\u5de5\u8d44\u9879\u76ee\u5206\u7c7b\u8868","icon":null,"url":"\/auth\/wages\/projectClass","level":3,"child":[]}]},{"id":"be744e50a83911e8b039c3b2d7906ed2","pid":"f9b4b2c0a83811e8b2b09120c7a33240","name":"\u8bbe\u7f6e","icon":null,"url":"\/auth\/wageProject\/index","level":2,"child":[{"id":"d0a6fe30a83911e8bef5a734fb67e895","pid":"be744e50a83911e8b039c3b2d7906ed2","name":"\u65b0\u589e","icon":null,"url":"\/auth\/wageProject\/add","level":3,"child":[]},{"id":"db2ff840a83911e887437b1223a516a1","pid":"be744e50a83911e8b039c3b2d7906ed2","name":"\u4fee\u6539","icon":null,"url":"\/auth\/wageProject\/update","level":3,"child":[]},{"id":"e9b51210a83911e88d5097761a991d81","pid":"be744e50a83911e8b039c3b2d7906ed2","name":"\u5220\u9664","icon":null,"url":"\/auth\/wageProject\/delete","level":3,"child":[]}]}]}]},{"id":"b7637d00a93d11e88d2e8581663589cc","pid":"cfcd208495d565ef66e7dff9f98764da","name":"\u6559\u5b66\u7ba1\u7406","icon":"\/img\/index\/teach.png","url":"\/auth\/office\/administration","level":0,"child":[{"id":"902f32a0a93d11e89b82ad72268caa86","pid":"b7637d00a93d11e88d2e8581663589cc","name":"\u6587\u6863\u4e2d\u5fc3","icon":"\/img\/index\/iconStudy.png","url":"\/auth\/office\/center","level":1,"child":[{"id":"47ad99b0a93f11e8a55953363e95bf88","pid":"902f32a0a93d11e89b82ad72268caa86","name":"\u5e38\u7528\u6587\u6863","icon":"","url":"\/auth\/office\/index","level":2,"child":[]}]}]},{"id":"e32f4060a83211e8872b8194c0e35ce9","pid":"cfcd208495d565ef66e7dff9f98764da","name":"\u63a7\u5236\u4e2d\u5fc3","icon":"\/img\/index\/control.png","url":"\/auth\/control\/center","level":0,"child":[{"id":"9f11b4a0a83311e88157e387d5e9e3f5","pid":"e32f4060a83211e8872b8194c0e35ce9","name":"\u57fa\u7840\u914d\u7f6e","icon":"\/img\/index\/iconSick.png","url":"\/auth\/control\/config","level":1,"child":[{"id":"cefa0c70a83311e8892bed052a29c362","pid":"9f11b4a0a83311e88157e387d5e9e3f5","name":"\u57fa\u7840\u5b57\u6bb5","icon":null,"url":"\/auth\/field\/index","level":2,"child":[]}]}]}]'; // 权限json串
    $jurisdiction = json_decode($jurisdiction,true); // 将json串转成数组
    $roleJur      = '["3deccd009ea311e8b08545822ddd7074","6ea917609ea311e89174e915778b980d","a3bb07609ea311e8aeb331e8f67b2e4b","a13b8a509ec811e8b4d15999e360754b","4c244d60a69711e8a6a6b3c6fdb2ed4a","5d8e4290a69711e8aca5975bcfe599ee","be86fba0a69711e8bbf4b1c025873a9a","f9b4b2c0a83811e8b2b09120c7a33240","276558a0a83911e88c65dd4f9668a005","7f7a2290a83911e8aa1c3926f4850aea","be744e50a83911e8b039c3b2d7906ed2","db2ff840a83911e887437b1223a516a1"]'; // 当前角色所拥有的权限ID
    $roleJur      = json_decode($roleJur,true); // 转数组
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<?php
    function recursion($data,$roleJur){
        if(!empty($data)){
            foreach($data as $key => $val){
                $url ="<p>".str_repeat('━',$val['level']+1)."<input type='checkbox' name='ckb[]' ";
                if(in_array($val['id'],$roleJur)){
                    $url .= "checked='checked'";
                }
                $url .= "value=".$val['id']." id=".$val['id']." pid=".$val['pid']." class='list-box'><span>$val[name]</span></p>";
                echo $url;
                if(is_array($val['child']) && !empty($val['child'])){
                    recursion($val['child'],$roleJur); // 自己调用自己
                }
            }
        }
    }

    recursion($jurisdiction,$roleJur); // 调用方法
?>
</body>
</html>
<script>
    $(function(){
        parent_id = 'cfcd208495d565ef66e7dff9f98764da'; // 最高级别父id,这是我自己定义的

        // 点击选中效果
        $(document).on('click','.list-box',function(){
            var id  = $(this).attr('id'); // 获取到权限的id
            var pid = $(this).attr('pid'); // 获取到权限的父级pid
            if($(this).is(':checked')){
                if(pid != parent_id){ // 不是顶级权限 就进行选中父级操作
                    choiceParent(pid); // 父级选中操作
                }
                choiceChild(id); // 子集选中操作
            }else{
                cancelChoice(id)// 关闭子集操作
            }
        });


        /*
        *  父级选中
        *  parameter pid 父级id
        * */
        function choiceParent(pid) {
            $(".list-box").each(function(){
                if($(this).attr('id') == pid){
                    $(this).prop('checked',true);
                    new_pid = $(this).attr('pid');
                    if(pid != parent_id){
                        choiceParent(new_pid);
                    }
                }
            });
        }

        /*
         *  子集选中
         *  parameter pid 父级id
         * */
        function choiceChild(id){
            $(".list-box").each(function(){
                if($(this).attr('pid') == id){
                    $(this).prop('checked',true);
                    var new_id = $(this).attr('id');
                    choiceChild(new_id);
                }
            });
        }

        /*
         *  取消子集选中
         *  parameter pid 父级id
         * */
        function cancelChoice(id) {
            $(".list-box").each(function(){
                if($(this).attr('pid') == id){
                    $(this).prop('checked',false);
                    var new_id = $(this).attr('id');
                    cancelChoice(new_id);
                }
            });
        }
    })
</script>