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

时间:2019-01-23
本文章向大家介绍layui admin 树形表格 treetable 插件使用post请求,并带请求头token,主要包括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: 'get',
      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样式有影响

解决方法:

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

将auto覆盖,使用百分比