零散知识点（五）

多级菜单的实现

多级菜单的实现可以从数据库中查询出层级划分，实现起来代码比较复杂，执行效率底。

还可以使用前端ajax+ID选择器来实现

后台得到数据:

 

 

 那么在前台html中定义好ul标签：

<ul id='catalog'>


</ul>

前端ajax获取到后台数据后的处理方法：

li = <li id =id_item.id>
　　   <a href>item.title</a>
　　   <ul></ul>
    </li> 

$.each(res.data,function(index,item){
　　　　　将后台返回的数据，每一个都拿到函数中执行
　　　　　　首先将每条数据里面的内容装载到上面的li中，即创建一个<li>
　　　　　　1、判断每条数据是否有parent_id,如果没有则直接将li添加到根下面 <ul id='catalog'> 中
　　　　　　2、如果有parent_id，则扎到parent_id的哪个li,添加到li的ul中

　　　　  if(!item.parent_id){
          $('#catalog').append(li);
         }else{
         $('#id_'+item.parent_id).children('ul').append(li);
       }
 })

 后台在查询数据的时候，要根据深度排序查询，否则得到的数据可能因为顺序不对会出错。

设计表的时候加个dept（表示深度）字段,查询的时候按dept排序。

添加一条数据判断是否有parent，没有则dept=1。

有值则dept=parent.dept + 1