记录（2018年7月2日）解决的树形三级页面循环问题

描述：页面三级树型样式，循环出样式和内容

内容：

记录2018/7/2日遇到的问题

问题表述：

后台添加新的输入框、按钮、富文本、单选、多选、等等，则在对应的树的节点的页面位置下形成新的html代码，通过字符串连接，将多个新增的html连接起来。

Assessment控制器：

/**
     * 返回新三级树，每个节点新增html字段
     * @author Tonny 
     * @param  $attrList       数组数据
     * @param  $defaultInfo    默认值
     */
    public function ConTree($attrList, $defaultInfo)
    {
        foreach ($attrList as $key => $v1) {
            switch ($attrList[$key]['big_no']) {
                case 1:
                    $attrList[$key]['html'] = '<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                    <div class="grid-item active"><h3><i class="layui-icon layui-icon-template-1"></i>' . $attrList[$key]['name'] . '</h3><span class="line r"></span></div></div>';
                    break;
                case 2:
                    $attrList[$key]['html'] = '<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                    <div class="grid-item"><h3><i class="layui-icon layui-icon-password"></i>' . $attrList[$key]['name'] . '</h3><span class="line l"></span><span class="line r"></span></div></div>';
                    break;
                case 3:
                    $attrList[$key]['html'] = '<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                    <div class="grid-item">
                    <h3><i class="layui-icon layui-icon-auz"></i>' . $attrList[$key]['name'] . '</h3>
                    <span class="line l"></span></div></div>';
                    break;
            }
            if ($v1['children'] != null) {
                foreach ($v1['children'] as $k2 => $v2) {
                    if ($attrList[$key]['children'][$k2]['second_no'] == 1) {
                        $attrList[$key]['children'][$k2]['html'] = '<li class="layui-this" lay-id="00">' . $attrList[$key]['children'][$k2]['name'] . '</li>';
                    } else {
                        $attrList[$key]['children'][$k2]['html'] = '<li lay-id="11">' . $attrList[$key]['children'][$k2]['name'] . '</li>';
                    }
                    if ($v2['children'] != null) {
                        foreach ($v2['children'] as $k3 => $v3) {
                            $attrList[$key]['children'][$k2]['children'][$k3]['html'] = $this->getAttrHTML($attrList[$key]['children'][$k2]['children'][$k3], $defaultInfo);
                        }
                    }
                }
            }
        }
        return $attrList;
    }

    /**
     * 组合HTML格式
     * @author Tonny
     * @param  $info    数组数据
     * @param  $defaultInfo 默认值
     */
    public function getAttrHTML($info, $defaultInfo)
    {
        $this->assign(['info' => $info, 'defaultInfo' => $defaultInfo]);
        $optionHtml = '';
        $option = json_decode($info['option'], true);
        for ($j = 0; $j < count($option['type']); $j++) {
            $optionHtml .= $this->fetch('form/item_' . $option['type'][$j], ['defaultName' => $option['defaultName'][$j], 'default' => $option['default'][$j], 'grade' => $option['grade'][$j], 'hint' => $option['hint'][$j]]);
        }
        return $optionHtml;
    }

Model中：

/**
     * 获取所有信息
     * @author Tonny 
     * @return array 树型结构
     */
    public function getChilds() {
        $items = collection($this->where('status',0)->select())->toArray();    
        $info = $this->treeArray($items);
        return $info;
    }
    /**
     * 无限极分类
     * @author  Tonny 
     * @param   $items       所有数据
     * @param   $pid         当前查询的最高级父id
     * @return  array        树形数组
     */
    public function treeArray($items,$pid = 0) {
        $arr = array();
        foreach ($items as $v) {
            if ($v['pid'] == $pid) {
                $arr[$v['id']] = $v;
                $arr[$v['id']][config('classify_name')] = $this->treeArray($items, $v['id']);
            }
        }
        return $arr;
    }

说明：在model中利用递归，将查询到的数据形成树形结构，同时返回到控制器中，再通过ConTree方法在每个树的节点下新增一个html字段来保存html代码（目的是将这个字段在页面上循环出来）。

在getAttrHTML方法中，说明：

通过方框中的代码，根据type的不同，将view中的html通过字符串连接形成新的html代码，同时存到第三级树的相应位置。

View试图 + Config配置文件

这样只需要在页面上通过三个volist循环嵌套就可将html循环出来。
格式：

{volist name="html" vo="vo1"}

    {$vo1.html}

        {volist name="vo1.children" id="vo2"}

            {$vo2.html}

                {volist name="vo2.children" id="vo3"}

                    {$vo3.html}

                {/volist}

        {/volist}

{/volist}

通过这个方式，就可以解决页面三级循环html的问题。

成果图：