使用layui修改table样式

table的结构：

<table lay-filter="userlist-table" style="display: none;">

  <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:{

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

}
}