树形表格

1. 使用到treetable树形表格，而treetable是第三方基于layui开发的所以要先引用layui的的文件。

 

treetable树形表格的效果图

 

2、引用treetable的路径。

layui.config({

        //前面的文件名称路径
        base: '${pageContext.request.contextPath}/statics/treetable/module/'
}).extend({

    //倒数最后一个文件名的路径以及插件treetable.js的路径

   //只需要treetable.js的文件名treetable就可以了，不需要写到后缀.js
   treetable: '/treetable-lay/treetable'});

1. Js的请求加载以及样式

layui.config({
   base: '${pageContext.request.contextPath}/statics/treetable/module/'
}).extend({
   treetable: '/treetable-lay/treetable'
}).use(['table', 'treetable'], function () {
   var $ = layui.jquery;
   var table = layui.table;
   var treetable = layui.treetable;

   // 渲染表格
   var renderTable = function () {
      layer.load(1);
      treetable.render({
         size: 'lg', //尺寸
         treeColIndex: 0, //设置下拉箭头在第在几列
         treeSpid: "0",   //最上级的父级id
         treeIdName: 'id', //id字段的名称(自己的id)
         treePidName: 'branchid', //pid字段的名称（父亲的id）
         treeDefaultClose: true, //是否默认折叠
         treeLinkage: false, //父级展开时是否自动展开所有子级
         elem: '#currentTableId', //表格的id

         //数据请求地址，用到跟路径（${pageContext.request.contextPath}），返回json格式数据（映射路径）
          url: '${pageContext.request.contextPath}/admin/menu/loadMenuTree',       

          page: false,
          cols: [[ //列数和列名可根据需要更改
              {field: 'branchName', width:"40%",align:'left' , title: '名称'},
              {field: 'id', align:'center', title: '联系人'},
              {field: 'id', align:'center', title: '电话'},
              {field: 'branchid',align:'center' , title: '排序'},
              {toolbar: '#oper-col',align:'center', title: '操作'} //toolbar:工具条的id
            ]],
         done: function (d) {
            console.log(d)
            layer.closeAll('loading');
         }
      });
   };

//调用树形表格
   renderTable();
});

 

Controller控制器的代码
@RestController//全部返回JSON格式
@RequestMapping("/admin/menu")
public class MenuController {

@Resource
private MenuService menuService;

@RequestMapping(value = "/loadMenuTree")
public Map<String,Object> loadMenuTree(){
          Map<String,Object> map = new HashMap<String, Object>();
          //调用查询所有菜单列表的方法
         List<Employee> menuList =menuService.findEmployeeList();
         map.put("data",menuList);
         return map;
}