技术汇总：第五章：使用angularjs做首页三级分类

页面：

代码语言：javascript复制

 <script type="text/javascript" src="plugins/angularjs/angular.min.js"></script>
    <script type="text/javascript" src="js/service/userService.js"></script>
    <script type="text/javascript" src="js/controller/userController.js"></script>
     
    <div class="item bo" ng-repeat="entity in list">
    <!-- 去重 -->
        <h3><a href=""  ng-hide="list[$index].catOneName == list[$index 1].catOneName">{{entity.catOneName}}</a></h3>
        <div class="item-list clearfix">
        <div class="subitem">
        <dl class="fore">
    <!-- 去重 -->
        <dt><a href="" ng-hide="list[$index].catTwoName == list[$index 1].catTwoName">{{entity.catTwoName}}</a></dt>
            <dd><em><a href="">{{entity.catThreeName}}</a></em></dd>
        </dl>
        </div>
        </div>
    </div>
1234567891011121314151617

实体类：

代码语言：javascript复制

  public class TbItemCat implements Serializable{
        private Long id;
     
        private Long parentId;
     
        private String name;
     
        private Long typeId;
12345678

sql做自连接查询:

mapper.xml

代码语言：javascript复制

<select id="selectAll" resultType="java.util.HashMap">
        SELECT
        cat1.`id` catOneId,cat1.`name` catOneName,cat1.`parent_id` parentIdOne,cat2.id catTwoId,cat2.`name` catTwoName,cat2.`parent_id` parentIdTwo,cat3.id catThreeId,cat3.`name` catThreeName,cat3.`parent_id` parentIdThree
        FROM tb_item_cat cat1,tb_item_cat cat2,tb_item_cat cat3
        WHERE cat1.`id`=cat2.`parent_id` AND cat2.id=cat3.`parent_id`
      </select>
123456

mapper接口：

List<Map<String,TbItemCat>> selectAll(); impl实现类:

代码语言：javascript复制

 @Override
    public List<Map<String,TbItemCat>> selectAll() {
        List<Map<String,TbItemCat>> selectAll = itemCatMapper.selectAll();
        return selectAll;
    }
controller控制层:

    @RequestMapping("/findAll")
    public List<Map<String,TbItemCat>> findAll(){
        List<Map<String,TbItemCat>> selectAll = itemCatService.selectAll();
        return selectAll;
    }
123456789101112

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/120575453

angularjs

0 人点赞