记录(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的问题。
成果图: