您现在的位置是:首页 > 前端 > 网站首页前端
简介
解决layui锁定列后内容区和锁定区高度不一致的问题
解决layui锁定列后内容区和锁定区高度不一致的问题
废话不多说直接上代码
var id="mytable";
//动态监听表头高度变化,冻结行跟着改变高度
$("div [lay-id='" + id + "'] .layui-table-header tr").resize(function () {
$("div [lay-id='" + id + "'] .layui-table-header tr").each(function (index, val) {
$($("div [lay-id='" + id + "'] .layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
});
});
//初始化高度,使得冻结行表头高度一致
$("div [lay-id='" + id + "'] .layui-table-header tr").each(function (index, val) {
$($("div [lay-id='" + id + "'] .layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
});
//动态监听表体高度变化,冻结行跟着改变高度
$("div [lay-id='" + id + "'] .layui-table-main tr").resize(function () {
$("div [lay-id='" + id + "'] .layui-table-body tr").each(function (index, val) {
$($("div [lay-id='" + id + "'] .layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
});
});
//初始化高度,使得冻结行表体高度一致
$("div [lay-id='" + id + "'] .layui-table-main tr").each(function (index, val) {
$($("div [lay-id='" + id + "'] .layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
});
//初始化滚动条
$("div [lay-id='" + id + "'] .layui-table-fixed .layui-table-body").animate({ scrollTop: $("div [lay-id='" + id + "'] .layui-table-main").scrollTop() }, 0);
done: function(res, curr, count){
//如果是异步请求数据方式,res即为你接口返回的信息。
//如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
// console.log(res);
// 防止分页变形
{if condition="in_array($table,['shop','staff'])"}
if(curr==1){
// console.log(456);
var height=$(".layui-table-view").height();
$(".layui-table-view").height(height+40);
}
{/if}
try
{
if(typeof(eval(sumary))=="function")
{
sumary(res.sumary);
}
}catch(e)
{
//alert("not function");
}
//得到当前页码
//console.log(curr);
//得到数据总量
// console.log(count);
// 该方法用于解决,使用fixed固定列后,行高和其他列不一致的问题
$(".layui-table-main tr").each(function (index, val) {
$($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
});
}
下一篇:去掉alert默认带网址的提示