php 自动分配数据到个人,数据表格自动分配列宽的一种实现方法
layui数据表格自动分配列宽效果图:
适用场景:
主要是解决窗口大小改变后表格尾列出现空白和滚动条的问题
-窗口由小变大,出现表格尾列出现空白
窗口由大变小,出现横向滚动条
重新加载框架后恢复正常
使用前提:
-每一列的表头必须全部设置minWidth(依靠minWidth属性进行的判断)
-自己中间使用的,其他方式效果未知
-页面只能有一个数据表格,多个数据表格的话需要自己修改代码(表格的判断,列数的获取等)
具体步骤:
-监听窗口大小改变事件var resizeTimer;
$(window).resize(function () {
if (resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function () {
resizeTimer = null;
dstributionColumnWidth();
}, 200);
});
/*
经过测试发现,当窗口大小改变之后,这个方法会调用多次
所以需要使用clearTimeout方法取消由 setTimeout() 方法设置的 timeout
也就是说每一次调用后200毫秒内的下一次调用都会取消上一次的调用
这样可以大概率保证最终只执行一次
如果还是不行就把200调大点比如500
当然值越小,给人的感觉越流畅
*/
获取表格的宽度、列数、求出平均列宽// 表格宽度
var tabWidth = $(".layui-table-header").width();
// 列数
var colNum = $("tr").eq(0).find("th").length;
// 平均列宽
var avgWidth = tabWidth / colNum;
/*
求宽度和列宽的方式比较简单,也不知道有没有通用性(水平所限),
自己使用没有问题,如果大家拿不到值的话就根据自己的情况写代码拿到相应的值就行了,
当然要是有更好更优雅的方法也一定要留言告诉我
*/
获取每一列的data-field和data-minwidth属性的值并封装为对象,并按照data-minwidth的值由大到小排序/**
* 列对象
* @param index 所在列在当前行中的索引位置(没用上可以不要)
* @param name 对应表头中设置的field
* @param minWidth 对象表头中的minWidth
* @param width 最终的宽度
* @constructor
*/
function Column(index, name, minWidth, width) {
this.index = index;
this.name = name;
this.minWidth = minWidth;
this.width = width;
}
// 获取参数封装对象
if (cols === undefined) {
cols = $("tr").eq(0).find("th").map(function (index, item) {
var col = new Column(index, $(this).attr("data-field"), $(this).attr("data-minwidth"));
return col;
});
// 排序
cols.sort(function (a, b) {
return b["minWidth"] - a["minWidth"];
});
}
/**
* 计算列宽
* @param columns column对象数组
* @param colNum 列数
* @param tabWidth 表格宽度
* @param avgWidth 平均宽度
*/
function calculateColumnWidth(columns, colNum, tabWidth, avgWidth) {
// 是否显示表格横向滚动条
showOverflowX = false;
// 是否完成比较
var isComplete = false;
for (var i = 0; i < columns.length; i++) {
var column = columns[i];
// 如果计算出的平均列宽比最大的minWidth还要大,那么剩下的就不用比较了,直接赋值即可
if (column["minWidth"] <= avgWidth || isComplete) {
column["width"] = parseInt(avgWidth);
isComplete = true;
} else {
/*
如果minWidth > 平均列宽,那么就用表格宽度减去minWidth
然后除以列数-1,重新求平均列宽
*/
column["width"] = column["minWidth"];
tabWidth -= column["minWidth"];
colNum -= 1;
avgWidth = tabWidth / colNum;
// 如果最后一列时,平均列宽大于最小列宽,说明当前页面的宽度足够显示表格,就可以隐藏横向滚动条,反之则需要显示滚动条
if (i == columns.length - 1) {
showOverflowX = true;
}
}
}
}
设置单元格宽度、设置滚动条// 这里是根据名称查找相应的th、td标签,可能有更好的方法,欢迎留言
for (var i = 0; i < cols.length; i++) {
var col = cols[i];
var width = cols[i].width;
$("[data-field='" + cols[i]["name"] + "']").each(function () {
// 实际修改的是th、td下的div标签
// 我使用的是动画的方式,也可以选择直接赋值
$(this).children().eq(0).animate({width: width}, 200);
})
}
// 根据showOverflowX的值判断是否需要显示滚动条
if (showOverflowX) {
$('.layui-table-body').css({"overflow-x": "auto"});
} else {
$('.layui-table-body').css({"overflow-x": "hidden"});
}
完成!
完整代码var cols, showOverflowX;
/**
* 列对象
* @param index 所在列在当前行中的索引位置(没用上可以不要)
* @param name 对应表头中设置的field
* @param minWidth 对象表头中的minWidth
* @param width 最终的宽度
* @constructor
*/
function Column(index, name, minWidth, width) {
this.index = index;
this.name = name;
this.minWidth = minWidth;
this.width = width;
}
/**
* 计算列宽
* @param columns column对象数组
* @param colNum 列数
* @param tabWidth 表格宽度
* @param avgWidth 平均宽度
*/
function calculateColumnWidth(columns, colNum, tabWidth, avgWidth) {
showOverflowX = false;
var isComplete = false;
for (var i = 0; i < columns.length; i++) {
var column = columns[i];
if (column["minWidth"] <= avgWidth || isComplete) {
column["width"] = parseInt(avgWidth);
isComplete = true;
} else {
column["width"] = column["minWidth"];
tabWidth -= column["minWidth"];
colNum -= 1;
avgWidth = tabWidth / colNum;
if (i == columns.length - 1) {
showOverflowX = true;
}
}
}
}
/**
* 分配列宽
*/
function dstributionColumnWidth() {
// 表格宽度
var tabWidth = $(".layui-table-header").width();
// 列数
var colNum = $("tr").eq(0).find("th").length;
// 平均列宽
var avgWidth = tabWidth / colNum;
if (cols === undefined) {
cols = $("tr").eq(0).find("th").map(function (index, item) {
var col = new Column(index, $(this).attr("data-field"), $(this).attr("data-minwidth"));
return col;
});
cols.sort(function (a, b) {
return b["minWidth"] - a["minWidth"];
});
}
calculateColumnWidth(cols, colNum, tabWidth, avgWidth);
for (var i = 0; i < cols.length; i++) {
var col = cols[i];
var width = cols[i].width;
$("[data-field='" + cols[i]["name"] + "']").each(function () {
$(this).children().eq(0).animate({width: width}, 200);
})
}
if (showOverflowX) {
$('.layui-table-body').css({"overflow-x": "auto"});
} else {
$('.layui-table-body').css({"overflow-x": "hidden"});
}
}
var resizeTimer;
$(window).resize(function () {
if (resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function () {
resizeTimer = null;
dstributionColumnWidth();
}, 200);
});
使用方法layui.config({
// 放到这个目录里
base: '/static/js/extend/'
}).extend({formSelects: 'formSelects-v4.min'});
// 这里
layui.use(['table', 'element', 'layer', 'jquery', 'form', 'formSelects', 'tools', 'autoColumnWidth'], function () {
var table = layui.table,
element = layui.element,
layer = layui.layer,
$ = layui.$,
form = layui.form,
formSelects = layui.formSelects,
tools = layui.tools,
// 这里
autoColumnWidth = layui.autoColumnWidth;
然后在需要的地方直接调用autoColumnWidth.resize();
ps:窗口大小监听代码还是要自己写的
想要数据表格加载之后就分配列宽可以写在done的回调里done: function () {
autoColumnWidth.resize();
}
php 自动分配数据到个人,数据表格自动分配列宽的一种实现方法相关推荐
- php自动分配,PHP上传文件时自动分配路径的方法_php技巧
本文实例讲述了PHP上传文件时自动分配路径的方法.分享给大家供大家参考.具体分析如下: 网站上传文件时,如果是小的企业站,放在一个目录还没问题,当网站大了,上传的文件多了,我们就不能放在同一个目录了, ...
- html表格自动下一页,word中表格自动跑到下一页
word中表格自动跑到下一页以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! word 表格 为什么自动转到下一页 步骤1 ...
- c语言 printf分栏输出,excel表格分栏打印输出的两种巧妙方法_excel教程
有时Excel中的表格只有两三列内容,这样在处理完表格中数据如果直接打印输出就会显得很不美观,且浪费纸张.如果能象Word和WPS那样具有分栏功能就好了.下面我们就借助外力对Excel中的表格实现分栏 ...
- 计算机二级考试字处理表格和文字分栏,Exce表格分栏打印输出的两种巧妙方法...
有时Excel中的表格只有两三列内容,这样在处理完表格中数据如果直接打印输出就会显得很不美观,且浪费纸张.如果能象Word和WPS那样具有分栏功能就好了.下面我们就借助外力对Excel中的表格实现分栏 ...
- c语言 printf分栏输出,Exce表格分栏打印输出的两种巧妙方法
作者: 王道才 原创 有时Excel中的表格只有两三列内容,这样在处理完表格中数据如果直接打印输出就会显得很不美观,且浪费纸张.如果能象Word和WPS那样具有分栏功能就好了.下面我们就借助外力对Ex ...
- 新字符设备驱动实验(自动分配设备号、自动创建应用层设备节点、新字符设备注册到内核的结构体)
目录 自动分配和释放设备号 示例代码 新的字符设备注册到内核方法 字符设备结构体(前面的设备号也放进来) cdev_init结构体初始化函数 cdev_add 添加到linux内核 cdev_del内 ...
- 14、DHCP(自动分配IP地址)
DHCP(自动分配IP地址) DHCP ( Dynamic Host Conf iguration Protocol,动态主机配置协议)是一个局域网的网络协议,使用UDP协议工作,主要有两个用途: ...
- oracle 数据 导出 excel 自动分多个文件,从oracle数据库中导出大量数据到excel中为什么自动分成了好几个excel文件《excel表格新手入门》...
EXCEL中一个单元格中多行文本如何导入或复制到SQL SERVER 数据库表中? 保留换行符保存进数据表啊,读取出来显示的时候根据需要进行转换就行了,比如要在网页上显示,可以把换行符转换成HTML的 ...
- JS 原生自动加载的大数据表格探索
目录 尝试1.使用table初级实现 动态加载关键代码 效果 尝试2.使用绝对定位优化表格 效果 尝试3.绝对定位+scroll动态加载优化尝试 效果 尝试4. table + 绝对定位 + scro ...
最新文章
- debian下编译安装php5.2
- matlab 灰色Verhulst预测模型
- 2018-2019-2 网络对抗技术 20165301 Exp3 免杀原理与实践
- Zuul 2 : The Netflix Journey to Asynchronous, Non-Blocking Systems--转
- MySQL 高级- 输出参数
- S3C2410 bootloader ----VIVI阅读笔记 (转)下
- Android之哭笑不得的BUG--xml设置的padding不起作用,幕后黑手竟然是?
- Maven的Snapshot版本与Release版本
- Apache目录禁止解析
- 图解傅里叶变换(时域频域)
- 全国青少年软件编程等级考试内容,知识点思维导图(Scratch编程三级)
- QMT量化交易网格交易 源码
- linux登陆端口号和协议,linux iso镜像下载 协议号与端口号大全
- 数据分析入门-第四天
- 计算机与home键功能相反的是,home键是什么,虚拟home键如何使用
- dx12 龙书第五章学习笔记 -- 渲染流水线
- 【应用程序无法正常启动0xc000007b 请点击确定关闭应用程序】的错误如何解决?
- [Servlet] HttpServletRequest
- 实现表格内容第一行居中,其他行与第一行左对齐
- 关键词搜索量是什么,如何看待关键词热度!
热门文章
- 刷题总结——飞飞侠(bzoj2143 最短路)
- 界面设计与测试的规范
- JavaScript split() 方法
- .net oracle 参数化,.NET参数化Oracle查询参数
- 实战经验:Oracle recyclebin过大导致的Insert逻辑读暴增问题的解决
- 周二直播丨Oracle数据库SQL执行计划的取得和解析
- 数据库每日一题 2020.05.07
- 一文了解GaussDB 200的产品架构、数据流程、组网方案、服务部署原则、企业级增强特性......
- 云小课|打造企业数据“高内聚,低耦合”--试试GaussDB(DWS)逻辑集群,实现数据物理隔离
- 你真的懂Redis的5种基本数据结构吗?