先從後臺講起

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)