使用layui.js实现表格数据动态展示
首先呢，先要创建一个 html 页面，其次在 head 中引入以下包
点击此处下载 layui v2.4.5
点击此处保存 jquery 3.3.1
其次，将页面框架写好
管理后台
用户列表
用户名:
手机号:
性别:
用户等级:
账号状态:
身份证ocr:
银行卡绑定:
view.css
.layui-view-body{
background-color: #f0f2f5;
}
.layui-content{
padding: 20px;
}
.layui-tab-title{
border-bottom-color: #e8e8e8;
}
.layui-card .layui-tab-brief .layui-tab-title li{
margin:0 15px;
padding: 0;
}
.layui-form-checked i, .layui-form-checked:hover i,
.layui-form-radio>i:hover, .layui-form-radioed>i,
.layui-breadcrumb a:hover,
.layui-laypage a:hover,
.layui-tab-brief>.layui-tab-title .layui-this{
color: #177ce3!important;
}
.layui-btn-primary:hover,
.layui-form-onswitch,
.layui-form-checked[lay-skin=primary] i,
.layui-form-checkbox[lay-skin=primary]:hover i,
.layui-form-checked, .layui-form-checked:hover,
.layui-tab-brief>.layui-tab-more li.layui-this:after,
.layui-tab-brief>.layui-tab-title .layui-this:after{
border-color: #177ce3;
}
.layui-checkbox-disbaled[lay-skin=primary]:hover i {
border-color: #d2d2d2!important;
}
.layui-form-onswitch,
.layui-form-checked[lay-skin=primary] i,
.layui-form-select dl dd.layui-this,
.layui-laypage .layui-laypage-curr .layui-laypage-em,
.layui-form-checked span, .layui-form-checked:hover span{
background-color: #177ce3;
}
.layui-btn-blue{
background-color: #177ce3;
background-repeat: repeat-y;
background-image: -moz-linear-gradient(left,#29adeb,#177ce3);
background-image: -webkit-linear-gradient(left,#29adeb,#177ce3);
background-image: -o-linear-gradient(left,#29adeb,#177ce3);
background-image: linear-gradient(left,#29adeb,#177ce3);
}
.layui-form-checkbox[lay-skin=primary]:hover span{
background: 0 0!important;
}
.layui-page-header{
margin: -20px -20px 20px;
}
.layui-page-header .pagewrap{
padding: 15px 20px;
background-color: #fff;
}
.layui-page-header .title{
margin-top: 15px;
}
.chart-card{
padding: 20px 24px 8px;
}
.chart-card .chart-header{
position: relative;
width: 100%;
overflow: hidden;
}
.chart-card .metawrap{
float: left;
}
.chart-card .metawrap .meta{
color: rgba(0,0,0,.45);
font-size: 14px;
line-height: 22px;
height: 22px;
}
.chart-card .metawrap .total{
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
color: rgba(0,0,0,.85);
margin-top: 4px;
margin-bottom: 0;
font-size: 30px;
line-height: 38px;
height: 38px;
}
.chart-card .chart-body{
margin-bottom: 12px;
position: relative;
width: 100%;
}
.chart-card .chart-footer{
padding-top: 9px;
margin-top: 8px;
border-top: 1px solid #e8e8e8;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.chart-card .field{
}
.chart-card .field span{
font-size: 14px;
line-height: 22px;
}
.chart-card .field span:last-child{
margin-left: 8px;
color: rgba(0,0,0,.85);
}
.form-box{
padding: 10px 0;
}好了，然后看看 js 确定引入了么，css 确定没毛病么，有毛病就先改改，没毛病，那就继续吧，嘿嘿
获取到 table 标签，开始请求接口了
where：请求接口需要的参数
cols：根据返回的 json 将列编写出来
var datagrid;
layui.use('table', function() {
var element = layui.element;
var table = layui.table;
var form = layui.form;
datagrid = table.render({
elem: '#demo'
, where:
{
rsid: localStorage.getItem("rsid"),
username : $("#username").val(),
mobile : $("#mobile").val(),
gender : $("#gender").val(),
user_level : $("#user_level").val(),
status : $("#status").val(),
is_auth : $("#is_auth").val(),
is_bank : $("#is_bank").val()
}
, url: 'http://localhost:8119/merchant/users'
, dataType:"json"
, cols: [[
{field: 'id', title: 'ID', sort: true}
, {field: 'username', title: '用户名'}
, {field: 'mobile', title: '手机号', width: 130}
, {field: 'gender', title: ' 性别'}
, {field: 'user_level', title: '用户等级'}
, {field: 'status', title: '账号状态'}
, {field: 'lastLoginTime', title: '上次登陆时间', width: 200}
, {field: 'merchant_name', title: '商户名'}
, {field:'', fixed: 'right', title: '操作', toolbar: '#barDemo'}
]]
, skin: 'line'
, loading: true
, even: true
, page: true
, limits: [5, 7, 10]
, limit: 5
});
});
如果说需要将返回的结果填充到 layui 规定的格式中，那么需要加入parseData 属性，拿到 json 中的 status、msg、count、body
parseData: function(res){
return {
"code": res.status,
"msg": res.msg,
"count": res.count,
"data": res.body.item
};
}
当然，如果表格中含有类似 level 这种字段，肯定需要数字与文字之间对应的啦
或者呢，需要拿到数据之后做一些判断之类的操作
那么就在该段代码中加入done属性
done: function(res){
var status = res.code;
if(status === '10000') {
parent.location.href ="../../login.html";
}
$("[data-field='user_level']").children().each(function () {
if ($(this).text() === '0') {
$(this).text("普通用户")
} else if ($(this).text() === '1') {
$(this).text("VIP用户")
} else if ($(this).text() === '2') {
$(this).text("高级VIP用户")
}
})
}如果要在列表中单击查询单列数据的话，那么就需要编写一个弹出层咯
table.on('tool(demoEvent)', function(obj){
data = obj.data;
sessionStorage.allmessage = JSON.stringify(data);
var layEvent = obj.event;
if(layEvent === 'edit') {
var index = layer.open({
type: 2,
title: '查询用户信息',
closeBtn: 1,
area: ['550px', '500px'],
shadeClose: true,
skin: 'demo layui-layer-rim',
content: 'user_info.html'
});
}
});刷新表格的话，就需要调用 reload 方法咯
$(".query").on("click",function()
{
//刷新表格
datagrid.reload(
{
where:
{
rsid: localStorage.getItem("rsid"),
username: $("#username").val(),
mobile : $("#mobile").val(),
gender : $("#gender").val(),
user_level : $("#user_level").val(),
status : $("#status").val(),
is_auth : $("#is_auth").val(),
is_bank : $("#is_bank").val()
}
});
});好啦，结束
博主扣扣： 博主微信：
