Layui treeTable

目录

 

目录

后端 SpringBoot+Mybatis

第一步从数据库里面查询所有数据

第二步ServiceImpl

PageEntity工具类

            MenuInfo实体类

第三步 Controller

前端  Layui(TreeTable)

HTML5

JS

---

 

---

后端 SpringBoot+Mybatis

第一步从数据库里面查询所有数据

SELECT * FROM 表

第二步ServiceImpl

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

PageEntity工具类

/**
 * 对Page结果进行包装
 * 

 * 新增分页的多项属性
 */
@SuppressWarnings({"rawtypes", "unchecked"})
public class PageEntity 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 data;
    //是否为第一页
    private boolean isFirstPage = false;
    //是否为最后一页
    private boolean isLastPage = false;


    public PageEntity() {
    }

    /**
     * 包装Page对象
     *
     * @param list
     */
    public PageEntity(List 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 children;

第三步 Controller

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

前端  Layui(TreeTable)[TreeTable文件下载]

HTML5

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}
        ]]
    });
});