layui admin 树形表格 treetable 插件使用post请求，并带请求头token

前言

引入方法在github有详细介绍，附上github地址: https://gitee.com/whvse/treetable-lay

1.HTML部分

<table id="table1" class="layui-table" lay-filter="table1"></table>

2.设置为post请求方式，并带请求头token

   // 1.写一个ajax 将url放在ajax里面 
   // 2.在ajax设置请求头  请求方式
   // 3.在成功回调执行 渲染表格方法 带入一个参数 也就是返回的data
   // 4.渲染表格render方法里面 data:data 带入数据给表格
   $.ajax({
      url: 'https://easy-mock.com/mock/5c131015dada7b27ac3a5c36/titi/ceshi',
      headers: {
        "token": 'dsohaonoagnoangonaog'
      },
      type: 'post',
      dataType: 'json',
      success: function(res) {
        renderTable(res.data);
      }
    })

    // 渲染表格
    var renderTable = function(data) {
      layer.load(2);
      treetable.render({
        data: data,
        treeColIndex: 2, // 树形图标显示在第几列
        treeSpid: -1, // 最上级的父级id
        treeIdName: 'id', // id字段的名称
        treePidName: 'pid', // pid字段的名称
        treeDefaultClose: true, // 是否默认折叠
        treeLinkage: false, // 父级展开时是否自动展开所有子级
        elem: '#table1', // 表格id
        page: false, // 树形表格一般是没有分页的
        cols: [[
            { type: 'radio' },
            { field: 'bumenid', title: '部门ID' },
            { field: 'bumenname', title: '部门名称' },
            { field: 'sex', title: '上级部门' },
            { field: 'sortnum', title: '排序号' }
        ]],
        done: function() {
          layer.closeAll('loading');
        }
      });
    }

附上效果图

3.遇到的问题

将代码全部复制到项目之后，表格初始化没有自适应

原因是layui.css的table样式有影响

解决方法：

将auto覆盖，使用百分比

 <style>
    .layui-table-view .layui-table {
      width: 100% !important;
    }
  </style>

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。