使用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);
6. //得到当前页码
7. console.log(curr);
9. //得到数据总量
10. console.log(count);
11. }

}


}

今天的文章使用layui修改table样式分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。