基於ExtJs6前台,SpringMVC-Spring-Mybatis,resteasy,mysql無限極表設計，實現樹狀展示資料(treepanel)

標籤：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. */@Repositorypublic 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. */@Servicepublic 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)