码迷,mamicode.com
首页 > 数据库 > 详细

基于ExtJs6前台,SpringMVC-Spring-Mybatis,resteasy,mysql无限极表设计,实现树状展示数据(treepanel)

时间:2017-08-30 18:32:59      阅读:376      评论:0      收藏:0      [点我收藏+]

标签:mod   tty   equals   节点   mysql   listen   blog   doctype   containe   

 

先从后台讲起

1.表的设计

  parent_id就是另外一条记录的id,无限极表设计可以参考  http://m.blog.csdn.net/Rookie_Or_Veteran/article/details/75711386

技术分享

 

2.mysql查询很容易,关键是要把id,text,parentId查出来

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="bs.photo">

<
select id="queryPhoto" parameterType="com.xgt.bean.bs.PhotoBean" resultType="com.xgt.dao.entity.bs.Photo"> SELECT bp.id, bb.`name` brandName, bp.`name` text, bp.photo_url photoUrl, bp.number, bp.add_time addTime, bp.modify_time modifyTime, bp.parent_id parentId, bp.photo_number photoNumber, bp.`description`, bp.`condition`, bp.specification, bp.version_name versionName FROM bs_photo bp INNER JOIN bs_brand bb ON bp.brand_id = bb.id <include refid="sqlWhere"/> <include refid="common.Pagination_Limit"/> </select>
</mapper>
 

 3.dao层

package com.xgt.dao.bs;

import com.xgt.bean.bs.PhotoBean;
import com.xgt.dao.entity.bs.Photo;
import org.jboss.resteasy.annotations.Query;
import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Repository;

import java.util.List;

/**
 * Created by Administrator on 2017/8/21.
 */
@Repository
public class PhotoDao {
    @Autowired
    @Qualifier("sqlSession")
    private SqlSessionTemplate sqlSession;

    public List<Photo> queryPhoto(PhotoBean photoBean){
        return sqlSession.selectList("bs.photo.queryPhoto",photoBean);
    }
}

4.service逻辑层

   关键逻辑在buildPhoto方法和getChildren方法,这里用了lamda表达式,lamda表达式可以参考我的博客:http://www.cnblogs.com/Java-Starter/p/7424229.html

package com.xgt.service.bs;

import com.xgt.bean.bs.PhotoBean;
import com.xgt.dao.bs.PhotoDao;
import com.xgt.dao.entity.bs.Brand;
import com.xgt.dao.entity.bs.Photo;
import org.apache.commons.collections.map.HashedMap;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

/**
 * Created by Administrator on 2017/8/21.
 */
@Service
public class PhotoService {
    @Autowired
    private PhotoDao photoDao;

    private List<Photo> photoList;
    public List<Photo> queryPhotoArborescence(PhotoBean photoBean){
        photoList = photoDao.queryPhoto(photoBean);
        return buildPhoto();
    }
/**
     * 构建资源数
     * @return list
     */
    public List<Photo> buildPhoto() {
        List<Photo> target = new ArrayList<>();
        if (!photoList.isEmpty()) {
            // 根元素
            photoList.stream().filter(photo -> photo.getParentId() == 0).forEach(photo -> {  // 根元素
                List<Photo> children = getChildren(photo);
                photo.setChildren(children);
                target.add(photo);
            });
        }
        return target;
    }

    private List<Photo> getChildren(Photo photo) {
        List<Photo> children = new ArrayList<>();
        if (!photoList.isEmpty()) {
            photoList.stream().filter(child -> photo.getId().equals(child.getParentId())).forEach(child -> {
                List<Photo> tmp = getChildren(child);
                child.setChildren(tmp);
                if (tmp.isEmpty()) {
                    child.setLeaf(true);
                }
                children.add(child);
            });
        }
        return children;
    }
}

5.Controller层

  没什么操作

package com.xgt.controller;

import com.xgt.bean.bs.BrandBean;
import com.xgt.bean.bs.PhotoBean;
import com.xgt.common.BaseController;
import com.xgt.common.PcsResult;
import com.xgt.dao.entity.bs.Photo;
import com.xgt.exception.EnumPcsServiceError;
import com.xgt.service.bs.PhotoService;
import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.jboss.resteasy.annotations.Form;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;

import javax.ws.rs.*;
import javax.ws.rs.core.MediaType;
import java.util.List;
import java.util.Map;

/**
 * Created by Administrator on 2017/8/28.
 */
@Controller
@Path("/photo")
public class PhotoController extends BaseController{
    @Autowired
    private PhotoService photoService;

    /**
     * 遍历商品树状结构
     * @param accessToken
     * @param keyWord
     * @return
     */
    @GET
    @Path("/queryPhotoArborescence")
    @Produces(MediaType.APPLICATION_JSON)
    public PcsResult queryPhotoArborescence(@QueryParam("keyWord") String keyWord) {
        PhotoBean photoBean = new PhotoBean();
        photoBean.setKeyWord(keyWord);
        List<Photo> list = photoService.queryPhotoArborescence(photoBean);
        if(list.size()==0){
            return newResult(false);
        }
        return newResult(true).setData(list);
    }

}

前台部分

1.model层

  数据声明,便于查看有哪些数据,少一些数据不设置也可以

/**
 * Created by C on 2017/08/05.
 */
Ext.define(‘Admin.model.photoArborescence.PhotoArborescence‘, {
    extend: ‘Admin.model.Base‘,
    idProperty: ‘id‘,
    fields: [
        {name: ‘id‘, type: ‘int‘},
        {name: ‘name‘, type: ‘string‘},
        {name: ‘parentId‘, type: ‘int‘}
    ]
});

2.store层

  和后台连接的桥梁

/**
 * Created by Cjy on 2017/08/05.
 */
Ext.define(‘Admin.store.photoArborescence.PhotoArborescence‘, {
    extend: ‘Ext.data.TreeStore‘,

    requires: [
        ‘Common.Config‘
    ],

    storeId: ‘photoArborescence.PhotoArborescence‘,

    root: {
        id: 0,
        text: ‘效果图‘
    },
    proxy: {
        type: ‘ajax‘,
        api: {
            read: Common.Config.requestPath(‘Photo‘, ‘queryPhotoArborescence‘)
        },
        reader: {
            type: ‘json‘,
            rootProperty: ‘data‘
        }
    }
});

3.View层

/**
 * Created by Cjy on 2017/5/23.
 */
Ext.define(‘Admin.view.photoArborescence.PhotoArborescence‘, {
    extend: ‘Ext.container.Container‘,

    xtype: ‘photoArborescence‘,

    requires: [
        ‘Ext.tree.Panel‘,
        ‘Admin.view.photoArborescence.PhotoArborescenceController‘
    ],

    controller: ‘photoArborescence‘,

    layout: ‘fit‘,

    listeners: {
        beforerender: ‘pictureBeforeRender‘
    },

    defaults: {
        height: ‘100%‘
    },
    autoHeight : true,// 自动高度,默认false
    animate : true,// 展开动画
    enableDrag : true,// 是否可以拖动(效果上)
    enableDD : true,// 不进可以拖动,还可以改变节点层次结构
    enableDrop : false,// 仅仅drop
    rootVisible : true,// 是否显示根节点,默认true
    height : 150,

    items: [{
        title: ‘自主报价管理‘,
        xtype: ‘treepanel‘,
        reference: ‘photoTree‘,
        valueField: ‘name‘,
        useArrows: true,
        autoScroll:true,
        height:1150,
        store: ‘photoArborescence.PhotoArborescence‘
    }]
});

4.Controller层

  js动作,执行前加载

/**
 * Created by Cjy on 2017/5/23.
 */
Ext.define(‘Admin.view.photoArborescence.PhotoArborescenceController‘, {
    extend: ‘Admin.view.BaseViewController‘,
    alias: ‘controller.photoArborescence‘,


    /**
     * 界面 渲染的时候加载 菜单 tree
     */
    pictureBeforeRender: function () {
        var store = this.lookupReference(‘photoTree‘).getStore();
        console.log(store);
        store.getRoot().set(‘expanded‘, true);
        store.load();
    }

});

 

结果

技术分享

 

基于ExtJs6前台,SpringMVC-Spring-Mybatis,resteasy,mysql无限极表设计,实现树状展示数据(treepanel)

标签:mod   tty   equals   节点   mysql   listen   blog   doctype   containe   

原文地址:http://www.cnblogs.com/Java-Starter/p/7454548.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!