Beego下的三级联动菜单实现

Beego下的三级联动菜单实现

• 后台处理：

在数据库中，我们设定pid字段为本级菜单的上级菜单的id号，设定一级类型pid为0。

    o := orm.NewOrm()
	var oneClass []models.TpshopCategory
	o.QueryTable("TpshopCategory").Filter("Pid", 0).All(&oneClass)
    //定义一个大容器
	var types []map[string]interface{}
	/*tclass1:=make(map[string]interface{})*/    
	for _, v1 := range oneClass {
		tclass1 := make(map[string]interface{})
		tclass1["class11"] = v1
		var twoClass []models.TpshopCategory
		o.QueryTable("TpshopCategory").Filter("Pid", v1.Id).All(&twoClass)
		var tclass2 []map[string]interface{}
		for _, v2 := range twoClass {
			tclass3 := make(map[string]interface{})
			tclass3["class21"] = v2
			var threeClass []models.TpshopCategory
			o.QueryTable("TpshopCategory").Filter("Pid", v2.Id).All(&threeClass)
			tclass3["class22"] = threeClass
			tclass2 = append(tclass2, tclass3)
		}
		tclass1["class12"] = tclass2
		types = append(types, tclass1)
	}
	this.Data["types"] = types

注意，tclass1:=make(map[string]interface{})是不能放在/*…*/所在位置的，因为map本质是把内存地址存入了切片，如果放在外面，每次的存入的地址都是相同的，那么在最后types里的每个元素都会相同，是tclass1最后一次的值，而如果放在里面，每次tclass1初始化的地址都将不一样，这样types的内容就会不一样。

• 前端处理：

{{range .types}}
<div class="item">
    <h3><a href="">{{.class11.CateName}}</a></h3>
    <div class="item-list clearfix">
        <div class="subitem">
		{{range .class12 }}
            <dl class="fore1">
                <dt><a href="">{{.class21.CateName}}</a></dt>
                <dd>{{range .class22}}<em><a href="">{{.CateName}}</a></em>{{end}}</dd>
            </dl>
		{{end}}
        </div>
    </div>
</div>
{{end}}