相关的坑
目录
layui 使用内置模块加载表格
创建一个table实例最简单的方式是,在页面放置一个元素 table id=“demo” ,然后通过 table.render() 方法指定该容器
layui的table工具条,根据不同的条件显示特定的按钮,涉及模板引擎laytpl
table.render({
cols: [[
{field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器
,{field:'id', title:'ID', width:100}
]]
});
由于模板遵循 laytpl 语法(建议细读 laytpl文档 ),因此在模板中你可以写任意脚本语句(如 if else/for等):
<script type="text/html" id="titleTpl">
{{# if(d.id < 100){ }}
<a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
{{# } else { }}
{{d.title}}(普通用户)
{{# } }}
</script>
layui对table中的数据进行判断(0、1、2)转换为相应信息
<script id="toStatus" type="text/html">
{{# if(d.status ==1 ){ }}
<button class="layui-btn tbtn layui-btn-primary">未支付</button>
{{# }else if(d.status == 2){ }}
<button class="layui-btn tbtn layui-btn-success">已支付</button>
{{# }else if(d.status == 3){ }}
<button class="layui-btn tbtn layui-btn-normal">已发货</button>
{{# }else if(d.status == 4){ }}
<button class="layui-btn tbtn layui-btn-danger">已退款</button>
{{# }else if(d.status == 5){ }}
<button class="layui-btn tbtn layui-btn-warm">已收获</button>
{{# } }}
</script>
table.render() 里面的写法{field:'status',title:'订单状态',align:'center',width:30,templet:'#toStatus'}
layui规定列之后,自适应(小屏幕)行变形
//渲染表格
let tableRes = table.render({
elem: '#demo', //绑定容器
id:'reolad_id', //重新加载的id
url: '/admin/stadium/getAll', //数据接口,异步
width: documentWidth,
cellMinWidth:80,
page: true, //开启分页
limit:50,
cols:[[
{field:'id',title:'ID',align:'center',width:'3%'},
{title: '操作',align: 'left',toolbar:'#operator',width:'25%',fixed:'right'},
]],
parseData: function (res) {
if (res.code != 0){
layer.msg('加载数据失败',{time:2000});
return false;
}
//console.log(res);
return {
"code": res.code,
"msg": res.msg,
"count": res.data.total,
"data": res.data.data
}
},
done:function (res,curr,count) {
$("#demo").css("width","100%");
//表头部分
//动态监听表头高度变化,冻结行跟着改变高度
$(".layui-table-header tr").resize(function () {
$(".layui-table-header tr").each(function (index, val) {
$($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
});
});
//初始化高度,使得冻结行表头高度一致
$(".layui-table-header tr").each(function (index, val) {
$($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
});
//表体部分
//动态监听表体高度变化,冻结行跟着改变高度
$(".layui-table-body tr").resize(function () {
$(".layui-table-body tr").each(function (index, val) {
$($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
});
});
//初始化高度,使得冻结行表体高度一致
$(".layui-table-body tr").each(function (index, val) {
$($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
});
}
});
操作栏被挤压后,单击不触发;解决办法,使用原生的click来实现
<script type="text/html" id="operator">
<button class="layui-btn layui-btn-primary layui-btn-xs" onclick='edit("{{d.id}}")'>编辑</button>
<button class="layui-btn layui-btn-primary layui-btn-xs" onclick='detail("{{d.id}}")'>详情</button>
<!-- <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</button>-->
<!-- <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</button>-->
<!-- <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="stock">库存</button>-->
</script>
<script>
//编辑
function edit(id) {
xadmin.open('编辑','/admin/stadium/edit.html?id='+id,null,null,true);
}
//详情
function detail(id) {
xadmin.open('详情','/admin/stadium/detail.html?id='+id,null,null,true);
}
</script>