目錄

目錄

后端 SpringBoot+Mybatis

第一步從資料庫里面查詢所有資料

第二步ServiceImpl

PageEntity工具類

MenuInfo物體類

第三步 Controller

前端 Layui(TreeTable)

HTML5

JS

后端 SpringBoot+Mybatis

第一步從資料庫里面查詢所有資料

SELECT * FROM 表

第二步ServiceImpl

public PageEntity<MenuInfo> getMenulnfo(){
    return new PageEntity<>(MenuInfoMapper.getMenulnfo());
  }

PageEntity工具類

/**
 * 對Page<E>結果進行包裝
 * <p/>
 * 新增分頁的多項屬性
 */
@SuppressWarnings({"rawtypes", "unchecked"})
public class PageEntity<T> implements Serializable {
    private static final long serialVersionUID = 1L;
    //狀態
    private int code;
    //當前頁
    private int curr;
    //每頁的數量
    private int limit;
    //總記錄數
    private long count;
    //總頁數
    private int pages;
    //結果集
    private List<T> data;
    //是否為第一頁
    private boolean isFirstPage = false;
    //是否為最后一頁
    private boolean isLastPage = false;


    public PageEntity() {
    }

    /**
     * 包裝Page物件
     *
     * @param list
     */
    public PageEntity(List<T> list) {
        if (list instanceof Page) {
            Page page = (Page) list;
            this.code = 0;
            this.curr = page.getPageNum();
            this.limit = page.getPageSize();
            this.pages = page.getPages();
            this.data = page;
            this.count = page.getTotal();
        } else if (list instanceof Collection) {
            this.code = 0;
            this.curr = 1;
            this.limit = list.size();
            this.pages = 1;
            this.data = list;
            this.count = list.size();
        }
        if (list instanceof Collection) {
            //判斷頁面邊界
            judgePageBoudary();
        }
    }

    /**
     * 判定頁面邊界
     */
    private void judgePageBoudary() {
        isFirstPage = curr == 1;
        isLastPage = curr == pages;
    }

    .....................
}

MenuInfo物體類

public class MenuInfo implements Serializable {
    @Id
    private Integer mId;

    private String mName;

    private Integer mPid;

    private String mUrl;

    private Integer mClasses;

    private Integer mSort;

    private byte mStartup;

    private List<MenuInfo> children;

第三步 Controller

    @RequestMapping("/getMenulnfo")
  public PageEntity<MenuInfo> getMenulnfo(){
    System.out.println(MenuInfoService.getMenulnfo());
    return MenuInfoService.getMenulnfo();
  }

前端 Layui(TreeTable)[TreeTable檔案下載]

HTML5

<table class="layui-table layui-form" id="tree-table" lay-size="sm"></table>

JS

layui.extend({
    treeTable: 'treetable檔案路徑'
}).use(['treeTable','layer','code','form'],function() {
    var treeTable = layui.treeTable;
    treeTable.render({
        elem: '#tree-table',  //html(table id)
        url: '后端介面',
        tree:{
            iconIndex: 1,      //樹形圖示顯示在第幾列
            isPidData:true,    //此處設定是否是id、pid形式資料
            idName:'mId',      //id欄位的名稱
            pidName:'mPid',    //父級節點欄位
        },
        cols: [[
            {type: 'checkbox'}
            , {field: 'mName', title: 'name', width: 259}
            , {field: 'mId', title: 'mid', width: 120, sort: true}
            , {field: 'mPid', title: 'mpid', width: 120, sort: true}
        ]]
    });
});