注: 只要你会做了这道题目, 你的能力已经可以进入百度了! 如果别的部门不要你, 请你给我发邮件, 我一定尽我所能强烈推荐你! 如果你不想加入百度, 而别的公司又不要你, 只能说明那家公司瞎眼了.
题目: 见图片, 该图是某网页的一个区域的截图, 用于显示商品或者其它信息的分类. 该分类的每一项可以折叠和收起(展开和收缩, 如果有子分类的话). 分类的级数不固定. 现有一个PHP变量:
$cats = array(
array(
'id' => 1,
'name' => '学术和教育',
'children' => array(
array(
'id' => 2,
'name' => '自然科学',
'children' => null,
),
// ...
),
),
// ...
);
请写一段PHP代码, 将该数组所包含的分类数据生成一段能实现如图片所示功能的HTML/JavaScript代码, 可不考虑CSS样式.
----------
注解: 这道题目考察的范围非常广, 包括PHP, HTML, JavaScript, CSS, 递归, 只有真正掌握了如上几种全部技能, 才能实现完整的功能, 否则必须依赖分工. 应聘者所能实现的程度越大, 得分就越高.
如果应聘者的应聘职位不包括HTML/JS/CSS, 那么题目可改为: 把上面的PHP数据用缩进换行文本的形式保存到文件, 并读取文件生成一个同样的PHP数组.(自定义格式的序列化和反序列化)
看到这篇日志的读者, 如果已经做了出来, 并且个人想加入百度, 请在评论中回复URL并说明你的意愿, 我会主动联系你. 或者你可以把程序打包发给我.
----------
Loading ...
<?php
$cats = array(
array(
‘id’ => 1,
‘name’ => ‘学术’,
‘children’ => array(
array(
‘id’ => 8,
‘name’ => ‘学术A’,
‘children’ => array(
array(
‘id’ => 9,
‘name’ => ‘学术B’,
‘children’ => null,
), array(
‘id’ => 10,
‘name’ => ‘学术C’,
‘children’ => null,
),
array(
‘id’ => 11,
‘name’ => ‘学术D’,
‘children’ => array(
array(
‘id’ => 12,
‘name’ => ‘学术D1′,
‘children’ => null,
),
),
),
// …
),
),
// …
),
),
array(
‘id’ => 2,
‘name’ => ‘教育’,
‘children’ =>array(
array(
‘id’ => 13,
‘name’ => ‘A教育’,
‘children’ =>array(
array(
‘id’ => 14,
‘name’ => ‘B教育’,
‘children’ =>null,
),
),
),
array(
‘id’ => 15,
‘name’ => ‘C教育’,
‘children’ =>null,
),
),
),
array(
‘id’ => 3,
‘name’ => ‘生活’,
‘children’ =>null,
),
array(
‘id’ => 4,
‘name’ => ‘运动．休闲’,
‘children’ =>null,
),
array(
‘id’ => 5,
‘name’ => ‘大众文化’,
‘children’ =>null,
),
array(
‘id’ => 6,
‘name’ => ‘娱乐’,
‘children’ =>null,
),
array(
‘id’ => 7,
‘name’ => ‘城市.区划’,
‘children’ =>null,
),
// …
);
function showtree($cats)
{
$html = ”;
$arrayCast = array();
$rows = count($cats);
for($i = 0; $i < $rows; $i++)
{
$id = $cats[$i]['id'];
$name = $cats[$i]['name'];
$arrayCast = $cats[$i]['children'];
$html .= ‘<li>';
if ($arrayCast != null)
{
$html .= "<a href=’javascript:void(0)’ onclick=’retractable(".$id.")’><span id=’span".$id."’>+</span>".$name."</a>";
}
else
{
$html .= ”.$name.”;
}
$html .= ‘</li>’ ;
if ($arrayCast != null)
{
$html .= ‘<ul id="ul’.$id.’" style="display:none">';
$html .= showTree($arrayCast);
$html .= ‘</ul>';
}
}
return ‘<ul>’.$html.'</ul>';
}
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>baidu test</title>
<style type="text/css">
ul {margin:0px; width:100px; list-style:none;padding-left:30px;}
ul li{width:100px;;}
ul li a{text-decoration: none; }
ul li a:hover{ color:#F00; text-decoration: none;}
</style>
<script type="text/javascript" language="javascript">
/*
@Retractable 展开或收起li标签
@parm ulid : obj ul标签id
@parm signid：string +-符号id
@author zhaolei
*/
function retractable(signid)
{
var spansign = document.getElementById(‘span’ + signid);
var ulid = document.getElementById(‘ul’ + signid);
if (spansign.innerHTML == ‘-‘)
{
spansign.innerHTML = ‘+';
ulid.style.display = ‘none';
}
else
{
spansign.innerHTML = ‘-‘;
ulid.style.display = ‘block';
}
}
</script>
</head>
<body>
<div>
<?php echo showtree($cats);?>
</div>
</body>
</html> Reply
function tree( $root ) {
echo ‘<ul>';
for($i = 0; $i < count($root); $i++) {
if( $root[$i]['children']) {
echo "<li>↓{$root[$i]['name']}</li>";
tree($root[$i]['children']);
}else {
echo "<li>{$root[$i]['name']}</li>";
}
}
echo ‘</ul>';
}
tree($cats); Reply
>>4. ideawu Says:
>>2011-03-31 at 18:13:08
>>上面的同学, 不知道是否愿意应聘百度? 如果能做成一个网页, 包括租空间(或者>>VPS), 申请域名, 完成完整的功能就太好了. Reply
{
foreach( $arr as $key=>$value)
{
echo "<ul>";
echo "<ul>".$value['name']."</ul>";
if(is_array($value['children']))
{
tree($value['children']);
}
echo "</ul>";
}
} Reply