最近项目需求:
仿制某网站的菜单功能
效果如下:
效果大概就是这样啦。分析下吧:主要是分级查询我的思路:首先从数据库中查询所有的顶级目录:
目前就是这几个顶级目录在数据库中特点就是 父级id是0(一般都会有,在自己设计信息分类 类型网站时也应该注意设计该字段)
拿到顶级id以后,在数据库中查找父级id为这些id的数据,拿到次级id:
最后根据次级id 查找父级id为次级id的所有数据:
当然啦,你的数据库要有些数据,要不然就不好看了。这些数据拿到以后,会有专门的js代码引入这些数据然后展示(参考网站的做法是:将这些数据写入一个文件,js读取该文件。好处是减少数据库读写次数)
因此,我们也要学习这个写法,还可以顺便直接使用人家写好的js代码~~(嘿嘿嘿)
好,现在总结下工作:拿到三级数据->写入js文件->使用别人写好的js文件读取并显式(完美!!)
下面上代码。(自己写的不成熟的代码,欢迎提意见~!)
<?php /* * 读取 destoon_category 表 parentid 为0 的所有数据(顶级目录) * * 根据 parentid 查找 次级 id 最后根据次级id 查找 三级id * * 组合成一个数组 写入 js 文件 ( 方便前台获取) * * 顶级目录格式 : var QS_jobs_parent=new Array("169,广告|媒体|艺术|出版","1,销售|市场|客服|贸易"); * 目标目录格式 : var QS_jobs=new Array(); * QS_jobs[169]="170,广告|171,影视/媒体|172,艺术设计"; QS_jobs[顶级目录id]="次级id,次级标题|次级id,次级标题 " * QS_jobs[170]="905,广告客户经理|906,广告客户专员"; QS_jobs[次级目录id]="三级id,三级标题|三级id,三级标题 " */ $toparr = select(0); getstring($toparr , 1); /* * 读写文件操作 * * 向文件追加内容 */ function write($str){ $fp = fopen("../skin/default/job2/js/cache_classify.js" ,"a+" ); if($fp){ $w = fwrite($fp , " ".$str); if(!$w){ echo "写入失败"; } } fclose($fp); } /* * 数据库查询操作 * * 传入 parentid */ function select($pid){ global $db; $A = array();//所有顶级目录 $query = "SELECT catid,catname FROM destoon_category WHERE parentid=".$pid; $arr = $db->query($query); while($r = $db->fetch_array($arr)) { $A[] = $r; } return $A; } /* * 获取2 3 级目录 * * 传入数组 上级目录id * * 返回字符串数组 */ function get23string($array){ for($a=0; $a<sizeof($array); $a++){ $str = 'QS_jobs['.$array[$a].']="'.getstring(select($array[$a]) , 2).'";'; write($str); } return $str; } /* * 传入二维数组(顶级目录) * * 生成 顶级目录 文本 var QS_jobs_parent=new Array("169,广告|媒体|艺术|出版","1,销售|市场|客服|贸易"); */ function getstring($arr ,$size){ $str = ""; $i = 0; $arr2 = array();//顶级id 数组 $j = 0; $arr3 = array();//次级id 数组 switch ($size){ case 1://生成顶级目录 文本 foreach ($arr as $Avalue){ foreach ($Avalue as $key=>$value){ if($key == 'catid'){ $arr2[$i]=$value; $str .= '"'.$value.","; }else{ $str .= $value.'"'; } } $i++; sizeof($arr)>$i && $str .= ","; } $temp = 'var QS_jobs_parent = new Array('.$str.');'; $str = $temp;//顶级目录 文本 write($str); write("var QS_jobs=new Array();"); //arr2 是顶级目录的 id //根据顶级目录获取次级目录数组 get23string($arr2); break; case 2: // 生成二级目录文本 case 3: //生成三级目录文本 foreach ($arr as $Avalue){ foreach ($Avalue as $key=>$value){ if($key == 'catid'){ $arr3[$j] = $value; $str .= $value.","; }else{ $str .= $value."|"; } } $j++; } get23string($arr3); //print_r($arr3); //QS_jobs[169]="170,广告|171,影视/媒体|172,艺术设计"; QS_jobs[顶级目录id]="次级id,次级标题|次级id,次级标题 " //$arr2 (顶级id) return $str; break; default: break; } return $str; } //var_dump($A); ?>
还有些注释,目标格式和最终实现效果:
另附别人写好的js代码:
/** 首页左侧职位类别下拉 */ jQuery.dropDownWidget = function (obj) { var c = $(obj).find(".job-sort-control"), l = $(obj).find(".job-sort-list"), lhtml = ''; if (QS_jobs_parent) { $.each(QS_jobs_parent, function (index, val) { var dataValArr = splitData(val, ","); lhtml += '<div class="js-items" code="' + dataValArr[0] + '"><div class="js-level2 clearfix"><i class="level-icon icon' + (index + 1) + ' f-left"></i><span class="f-left">' + dataValArr[1] + '</span><i class="sort-arrow f-right"></i></div></div>'; }); l.html(lhtml); } ; var j = l.find('.js-items'), cwidth = $(obj).outerWidth(), cheight = l.outerHeight() + 14; j.last().addClass("js-items-last"); j.bind('mouseenter', function (event) { j.removeClass('js-items-nrb').removeClass('js-items-trb').addClass('js-items-rb'); var subclass = $(this).attr("code"); var html = '<div class="show">'; if (MakeLi(subclass)) { html += MakeLi(subclass); } html += '</div>'; $(this).addClass('js-items-nrb').next().addClass('js-items-trb'); $(".leftmenu_box").empty(); $(".leftmenu_box").append(html).css({ "top": "0", "left": cwidth, "display": "block", "overflow": "auto", "height": cheight }); }); c.bind('click', function (event) { l.toggle(); }); $(obj).bind('mouseleave', function (event) { l.hide(); $(".leftmenu_box").hide(); j.removeClass('js-items-nrb').removeClass('js-items-trb').removeClass('js-items-rb'); }); function splitData(dataval, character) { if (dataval) { return dataval.split(character) } ; } function MakeLi(subclass) { if (!QS_jobs[subclass]) { return "无" } ; var liArray = QS_jobs[subclass].split("|"); var htmlstr = ''; if (liArray) { for (x in liArray) { if (liArray[x]) { var v = liArray[x].split(","); thirdclass = v[0]; htmlstr += '<div class="showbox"><div class="fl"><a target="_blank" title="' + v[1] + '" href="jobs/jobs-list.php?key=&jobcategory=' + subclass + '.' + v[0] + '.0">' + v[1] + '</a></div>'; if (thirdclass) { htmlstr += '<ul class="fr">'; htmlstr += Make_Third_Li(subclass, thirdclass); htmlstr += '</ul>'; } htmlstr += '<div class="clear"></div></div>'; } } } return htmlstr; } function Make_Third_Li(subclass, thirdclass) { if (!QS_jobs[thirdclass]) { return "无" } ; var tArray = QS_jobs[thirdclass].split("|"); var htmlstr1 = ''; if (tArray) { for (x1 in tArray) { if (tArray[x1]) { var v1 = tArray[x1].split(","); htmlstr1 += '<li><a target="_blank" title="' + v1[1] + '" href="jobs/jobs-list.php?key=&jobcategory=' + subclass + '.' + thirdclass + '.' + v1[0] + '">' + v1[1] + '</a></li>'; } } } return htmlstr1; } };
希望对你有用啊目标网站这里
上文代码优化:
/* * 顶级目录格式 : var QS_jobs_parent=new Array("169,广告|媒体|艺术|出版","1,销售|市场|客服|贸易"); * 目标目录格式 : var QS_jobs=new Array(); * QS_jobs[169]="170,广告|171,影视/媒体|172,艺术设计"; QS_jobs[顶级目录id]="次级id,次级标题|次级id,次级标题 " * QS_jobs[170]="905,广告客户经理|906,广告客户专员"; QS_jobs[次级目录id]="三级id,三级标题|三级id,三级标题 " */ function getjobs(){ global $db; $query = "select * from destoon_category where parentid=0"; $A = $db->_query($query); $count = count($A); foreach ($A as $ka => $a) { //echo "顶级 ==>".$a['catid'].$a['catname']." "; $ka < ($count-1) ? $end = "," : $end = ""; $str .= """.$a['catid'].",".$a['catname'].""".$end; $query = "select * from destoon_category where parentid=".$a['catid']; $str2 .= 'QS_jobs['.$a['catid'].']='."""; $B = $db->_query($query); $count2 = count($B); foreach ($B as $kb => $b) { //echo "次级 ====>".$b['catname']." "; $kb < ($count2-1) ? $end2 = "|" : $end2 = ""; $str2 .= $b['catid'].",".$b['catname'].$end2; $query = "select * from destoon_category where parentid=".$b['catid']; $str3 .= 'QS_jobs['.$b['catid'].']='."""; $C = $db->_query($query); $count3 = count($C); foreach ($C as $kc => $c) { //echo "三级 ======>".$c['catname']." "; $kc < ($count3-1) ? $end3 = "|" : $end3 = ""; $str3 .= $c['catid'].",".$c['catname'].$end3; } $str3 .=""; "; } $str2 .=""; "; } //$add = $str." "; $add = 'var QS_jobs_parent=new Array('.$str.');'." "; $add .= 'var QS_jobs=new Array();'." "; $add .= $str2.$str3; return $add; // echo $add; }
是不是看起来舒服多了
感谢大神写好的部分~