JS,JQuery,之数组三维for循环

最新推荐文章于 2022-11-03 19:42:49 发布

xinuxZ

最新推荐文章于 2022-11-03 19:42:49 发布

阅读量2.4k

点赞数

分类专栏： JS JQuery

本文链接：https://blog.csdn.net/u014289186/article/details/24811169

版权

JS JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

array(3) {
  [9]=>
  array(11) {
    ["actionid"]=>
    string(1) "9"
    ["actionname"]=>
    string(12) "一级菜单"

    ["child"]=>
    array(3) {
      [0]=>
      array(11) {
        ["actionid"]=>
        string(2) "25"
        ["actionname"]=>
        string(6) "二级菜单"

        ["child"]=>
        array(3) {
          [0]=>
          array(10) {
            ["actionid"]=>
            string(2) "13"
            ["actionname"]=>
            string(12) "

三级菜单

"  }          
[1]=> array(10) {  ["actionid"]=> string(2) "23"  ["actionname"]=> string(21) "三级菜单" }  }  }

这个问题是在，设计后台管理系统的时候遇到的，由于自己对JS不了解，也不怎么会写JS代码，所以一直没有想到比较好的方法。当然直接用PHP的foreach循环非常好解决，但是，我只是想试一试JS到底能不能实现，这样的三维数组的输出。

主要是可以实现前后端的分离。

面对后端传到前端的这样的代码（如下数组）

1、后端传过来的数组：

array(3) {
  [9]=>
  array(11) {
    ["actionid"]=>
    string(1) "9"
    ["actionname"]=>
    string(12) "一级菜单"

    ["child"]=>
    array(3) {
      [0]=>
      array(11) {
        ["actionid"]=>
        string(2) "25"
        ["actionname"]=>
        string(6) "二级菜单"

        ["child"]=>
        array(3) {
          [0]=>
          array(10) {
            ["actionid"]=>
            string(2) "13"
            ["actionname"]=>
            string(12) "三级菜单
"  }          [1]=>          array(10) {            ["actionid"]=>            string(2) "23"            ["actionname"]=>            string(21) "三级菜单"            ["parentid"]=>            string(2) "25"            ["levelid"]=>            string(1) "3"            ["menuorderid"]=>            string(1) "2"            ["module"]=>            string(5) "index"            ["controller"]=>            string(5) "video"            ["action"]=>            string(9) "ListVideo"            ["viewmode"]=>            string(1) "1"            ["createdate"]=>            string(19) "2014-04-19 18:37:42"          }                  }      }

2、JS，JQuery代码实现：

实现代码如下：

<span style="font-size:14px;">    function powerlist(res) {
        for (var trees in res) {
            var parenttree = res[trees].actionname;

                tmp = $('.first.hide_templete').clone();//克隆
                $('.firsttree', tmp).text(parenttree);
                tmp.removeClass('hide_templete');//移除隐藏class值
                tmp.children().addClass('ab'+res[trees].actionid);//为每个一级父节点设置不同的class值
                tmp.appendTo('.powertree');//将克隆的添加到他的父节点

            var childs = res[trees].child;
            for (var tree in childs) {
                var firstchild     = childs[tree].actionname;

                tmp2 = $(".second.hide_templete").clone();
                $('.secondtree', tmp2).text(firstchild);
                tmp2.removeClass('hide_templete');
                tmp2.children().addClass('a'+childs[tree].actionid);
                tmp2.appendTo('.ab'+res[trees].actionid);

                var second = childs[tree].child;
                for ( var child in second) {
                    var secondchild = second[child].actionname;

                    tmp3 = $('.third.hide_templete').clone();
                    $('.thirdtree', tmp3).text(secondchild);
                    tmp3.removeClass('hide_templete');
                    tmp3.appendTo('.a'+childs[tree].actionid);
                }   
            }   
        }   
    }   </span>