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覆盖,使用百分比
- python及numpy,pandas易混淆的点
- 深度学习中的损失函数总结以及Center Loss函数笔记
- TF使用例子-LSTM实现序列标注
- 图像学习-验证码识别
- ResNet原理及其在TF-Slim中的实现
- 理工男的文科梦 —— LSTM深度学习写春联
- keras学习笔记-黑白照片自动着色的神经网络-Alpha版
- keras学习笔记-黑白照片自动着色的神经网络-Beta版
- Python 设计模式初探
- 请注意,我们要谈谈神经网络的注意机制和使用方法
- TensorFlow官方教程翻译:导入数据
- TF使用例子-情感分类
- TensorFlow官方教程翻译:TensorFlow调试器
- 深度学习实战 | 使用Kera预测人物年龄
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Netty之旅三:Netty服务端启动源码分析,一梭子带走!
- Mysql几种join连接算法
- Flutter 学习笔记 16 - Hero 动画
- sdk冲突记录
- 个人账号密码管理体系(密码篇)
- 熬夜7天,我总结了JavaScript与ES的25个重要知识点!
- 【分享】MPSoC SWDT在Standalone下的应用
- 【分享】 PetaLinux工程出现大量Taskhash mismatch错误的原因
- Cypress系列(46)- then() 命令详解
- MultiDex原理
- 跨进程文件锁 - FileChannel
- 聊一聊二分查找法
- 【Ceph】集群升级之好好看ceph.conf
- Carthage使用
- java线程池(一):java线程池基本使用及Executors