基于ExtJs6前台,SpringMVC-Spring-Mybatis,resteasy,mysql无限极表设计,实现树状展示数据(treepanel)
先从后台讲起
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)的更多相关文章
- SSM(SpringMVC+Spring+MyBatis)三大框架使用Maven快速搭建整合(实现数据库数据到页面进行展示)
本文介绍使用SpringMVC+Spring+MyBatis三大框架使用Maven快速搭建一个demo,实现数据从数据库中查询返回到页面进行展示的过程. 技术选型:SpringMVC+Spring+M ...
- 3.springMVC+spring+Mybatis整合Demo(单表的增删该查,这里主要是贴代码,不多解释了)
前面给大家讲了整合的思路和整合的过程,在这里就不在提了,直接把springMVC+spring+Mybatis整合的实例代码(单表的增删改查)贴给大家: 首先是目录结构: 仔细看看这个目录结构:我不详 ...
- SpringMVC+Spring+Mybatis+Maven+mysql整合
一.准备工作1.工具:jdk1.7.0_80(64)+tomcat7.0.68+myeclipse10.6+mysql-5.5.48-win322. 开发环境安装配置.Maven项目创建(参考:htt ...
- springmvc spring mybatis插入mysql中文乱码
springmvc 插入mysql数据库中文乱码问题: 1.将页面中的编码改成utf-8 2.用SQLyog右击->改变数据库 以上两步可以保证页面数据编码一致 3.在mybatis连接的地方加 ...
- SpringMVC+Spring+mybatis项目从零开始--分布式项目结构搭建
转载出处: SpringMVC+Spring+mybatis+Redis项目从零开始--分布式项目结构搭建 /** 本文为博主原创文章,如转载请附链接. **/ SSM框架web项目从零开始--分布式 ...
- 基于SpringMVC+Spring+MyBatis实现秒杀系统【概况】
前言 本教程使用SpringMVC+Spring+MyBatis+MySQL实现一个秒杀系统.教程素材来自慕课网视频教程[https://www.imooc.com/learn/631].有感兴趣的可 ...
- SpringMVC+Spring+Mybatis+Mysql项目搭建
眼下俺在搭建一个自己的个人站点玩玩.一边练习.一边把用到的技术总结一下,日后好复习. 站点框架大致例如以下图所看到的: 眼下仅仅用到了SpringMVC+Spring+Mybatis+Mysql.把它 ...
- springmvc学习总结(二) -- maven+springmvc+spring+mybatis+mysql详细搭建整合过程讲解
@_@ 写在最前 之前分享过下面这几篇: mybatis学习笔记(五) -- maven+spring+mybatis从零开始搭建整合详细过程(上)(附demo和搭建过程遇到的问题解决方法) myba ...
- maven+springmvc+spring+mybatis+mysql详细搭建整合过程讲解
转自:https://www.cnblogs.com/lmei/p/7190755.html?utm_source=itdadao&utm_medium=referral @_@ 写在最前 之 ...
随机推荐
- 还在为画“类Word文档报表”而发愁吗?
欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ Word 是非常强大的文档编辑工具,一些行业制式文档都是使用Word来创建的,像教育行业的申请表,履历表,审批表等,像石油业的 ...
- Linux服务器学习(一)
一.首先连接服务器 下载一个windows下连接linux的ssh工具,我这里用的putty.一次填入HostName(主机名,可以是服务器域名也可以是对应的ip).Port(端口号默认为22).Co ...
- 如何写出面试官欣赏的Java单例
单例模式是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例的特殊类.通过单例模式可以保证系统中一个类只有一个实例. 今天我们不谈单例模式的用途,只说一说如果在面试的时候面试官让你敲一段代码 ...
- android studio生成junitLibs
apply plugin: 'com.android.application'android { compileSdkVersion 24 buildToolsVersion "25.0.0 ...
- 基于脚本的modelsim自动化仿真笔记
这里记录一下基于脚本的modelsim自动化仿真的一些知识和模板,以后忘记了可以到这里查找.转载请标明出处:http://www.cnblogs.com/IClearner/ . 一.基本介绍 这里介 ...
- 微信小程序-滚动消息通知
写在前面: 微信小程序学的不太多,做了一个简单的项目,回来很快时间内把在深圳两天的房租给赚回来了. 这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组 ...
- echarts_部分图表配置_堆叠折线图
echarts基本图表使用: 1.获取包裹元素(var myChart = echarts.init(document.getElementById('thisId'));)2.设置option(op ...
- 51nod 1130 N的阶乘的长度(斯特林近似)
输入N求N的阶乘的10进制表示的长度.例如6! = 720,长度为3. Input 第1行:一个数T,表示后面用作输入测试的数的数量.(1 <= T <= 1000) 第2 - T + ...
- 6-最基础的服务-es6写法
创建server.js 'use strict'; //http模块 var http = require('http'); //封装的方法 var handlers = require('./han ...
- Vmware虚拟机安装win7系统教程
第一步:下载虚拟机 可以下载VMware虚拟机,这里用的是Vmware12专业版,百度网盘直通车密码:c3mt密钥:5A02H-AU243-TZJ49-GTC7K-3C61N 第二部:安装 第三部:做 ...