300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 使用layui修改table样式

使用layui修改table样式

时间:2019-07-07 03:45:40

相关推荐

使用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 = mon;

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);}

}

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。