使用layui修改table样式

table的结构：

<thead>
<tr>
<th lay-data="{field:'a', width:200}">序号</th>
<th lay-data="{field:'b', width:150}">登录账号</th>
<th lay-data="{field:'c', minWidth: 180}">用户名</th>
<th lay-data="{field:'d', minWidth: 180}">权限</th>
<th lay-data="{field:'e', minWidth: 180}">操作</th>
</tr>
</thead>
<tbody>
<#if baseUserPageModel?? && baseUserPageModel.data??>
<#list baseUserPageModel.data as user>
<tr>
<td>${(user.id)!''}</td>
<td>${(user.userAccount!'')}</td>
<td>${(user.userName!'')}</td>
<td>${(user.roleName!'')}</td>
<td>
<a class="layui-btn layui-btn-xs" class="edit" οnclick='editUser(${user.id})' >编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" class="del" οnclick='deleteUser(${user.id})' >删除</a>
</td>
</tr>
</#list>
</#if>
</tbody>

</table>

使用layui渲染table

layui.use(['common','table','jquery'], function(){
var common = layui.common;
var table = layui.table;
var $=layui.$;

var data={
table :{
id:'userlist-table',
options:{
}
},
page :{
id:"page",
fromId:"searchFrom",
options:{
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
first: '首页',
last: '尾页'
}
}
};
common.filltable(data);
});

common是自己封装的form table page一体的js插件。

如果想修改某个表格的单元格高度或者修改一些样式，可以在回调函数done里设置。

table :{
id:'userlist-table',
options:{

done: function(res, curr, count){
//如果是异步请求数据方式，res即为你接口返回的信息。
//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
console.log(res);
//得到当前页码
console.log(curr);
//得到数据总量
console.log(count);
}

}
}

使用layui修改table样式相关推荐

使用layui的table样式出现td标签的padding属性消不掉
在使用了layui的table属性后 <table class="layui-table"> 又想往表格的td标签内加一个input输入框 <td>< ...
Layui 修改表格样式
使用Layui做表格显示数据时候,不要自定义表格,但是layui的css已经写好了,这个时候要改layui的css就比较麻烦,本文我总结了layui表格风格更改样式比如下面,body是紫色, 我把表 ...
layui修改table中的按钮_layui数据表格中如何设置按钮切换（是否置顶）与分页居中...
手记1 一.数据表格中按钮切换(置顶与取消) 在layUI数据表格中是可以使用toolbar设置表格内的按钮使用laytel语法置顶 {{# if(d.order>0){ }} 取消 {{ ...
layui修改table中的按钮_如何发挥作用layui页面按钮给table移除一行（手动去除）...
本篇文章给大家导致的内容是关于如何做到layui浏览按钮给table加进一行(手动去掉),有一定的参考价值,有只能的朋友可以简介一下,期望对你有所为了让. 问题详细描述:只想借助于首页按钮在表格掺入一 ...
php修改table样式,CSS怎么设置table边框样式
今天和大家说一下CSS如何设置table表格边框样式,对table设置CSS样式边框分为4种情况,以下分别详细讲解这四种情况需要怎么处理. 1.只对table设置边框 2.对td设置边框 3.对tab ...
layui表头样式_js相关：layui中table表头样式修改方法
js相关:layui中table表头样式修改方法发布于 2020-7-25| 复制链接分享一篇关于layui中table表头样式修改方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小妖过来看 ...
php form 添加滚动条,element 使用总结(1. tree使用 2. table修改滚动条样式 3. el-form 自定义label添加icon)...
一, vue_elementUI_ tree树形控件 1.默认点击tree节点的第一个(注意不是checked选中) @node-drop="handleDrop"ref=&qu ...
js修改table字体及表格边框样式
1.实例:js修改table字体及table边框样式以下为完整代码 <!DOCTYPE html> <html> <head><meta http-equi ...
Ant Design Table修改滚动条样式
Ant Design Table修改滚动条样式目录一.目的二.步骤 1.了解滚动条的组成部分 2.样式修改 3.实现效果二.总结目录一.目的修改Ant表格的固定列滚动而产生的滚动条样式, ...
css 修改table边框的样式，修改单元格样式、间距
我们在调table的边框样式时,经常会出现单元格和表格的样式重叠,而造成某条边框的的异常粗,或者异常细. 修改单元格间距: cellspacing="0" 修改table标签的样式 ...

使用layui修改table样式

使用layui修改table样式相关推荐

最新文章

热门文章