layui实现可拉伸上下分栏

最新推荐文章于 2024-07-04 16:56:10 发布

1322207395

最新推荐文章于 2024-07-04 16:56:10 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Layui使用笔记 JQuery 文章标签： layui 拉伸拖拽

本文链接：https://blog.csdn.net/u013020593/article/details/103223642

Layui使用笔记同时被 2 个专栏收录

3 篇文章

订阅专栏

JQuery

3 篇文章

订阅专栏

本文介绍了一种使用layui框架实现上下分栏自动拉伸的方法，通过调整div的高度和使用鼠标拖拽事件，使得两个分栏能够根据窗口大小自动调整高度，并保持拖动条的自定义高度。该方法适用于需要灵活调整布局的网页设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui实现可拉伸上下分栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="layui/css/layui.css">
		<title>layui实现分栏拉伸模板</title>
		<style>
			.layui-table-view {
				margin: 0;
			}

			#row1,#row2 {
				overflow: overlay;
			}

			.move-bar hr {
				cursor: n-resize;
			}
		</style>
	</head>
	<body>
		<div class="layui-fluid">
			<div class="layui-row">
				<div class="layui-btn-group">
					<button class="layui-btn layui-btn-sm">测试按钮一</button>
					<button class="layui-btn layui-btn-sm">测试按钮二</button>
				</div>
			</div>
			<div class="layui-row" id="row1">
				<table class="layui-hide" id="table" lay-filter="table"></table>
			</div>
			<div class="move-bar">
				<hr class="layui-bg-green">
			</div>
			<div class="layui-row" id="row2">
				<table class="layui-hide" id="table2" lay-filter="table2"></table>
			</div>
		</div>
	</body>
	<script src="layui/layui.js"></script>
	<script>
		var tableID = "table";
		var table2ID = "table2";
		layui.use(['table'], function() {
			var $ = layui.$,
				table = layui.table;
			var tableParam = getTableParam(tableID);
			var table2Param = getTableParam(table2ID);
			var tableIns = table.render(tableParam);
			var table2Ins = table.render(table2Param);

			// 初始化自适应表格高度
			autoHeight();
			$(document).resize(function() {
				autoHeight();
			});

			function autoHeight() {
				var clientHeight = $(window).height();
				var row1Height = clientHeight * 0.5;
				var row2Height = clientHeight - row1Height - 56;
				$("#row1").height(row1Height);
				$("#row2").height(row2Height);
				$("[lay-id='table']").height(row1Height - 2);
				$("[lay-id='table']").find('.layui-table-main').height(row1Height - 72);
				$("[lay-id='table2']").height(row2Height - 2);
				$("[lay-id='table2']").find('.layui-table-main').height(row2Height - 72);
			}
			//监听鼠标拖拽拖动条事件
			var moveFlag = false; //是否拖动标志
			$(document).on('mousedown', function(e) {
				//当鼠标点击到拖动条上时,移动鼠标即可拖拽
				if ($(e.target).offset().top == $(".move-bar hr").offset().top) {
					moveFlag = true;
				}
			});
			$(document).on('mousemove', function(e) {
				if (moveFlag) {
					var clientHeight = $(window).height();
					var pageY = e.pageY;
					//控制光标的最小和最大值
					if(pageY < 120){
						pageY = 120;//按钮+标题栏+分页栏高度
					}
					if(pageY > clientHeight * 0.9){
						pageY = clientHeight * 0.9;
					}
					//表格高度=光标位置-按钮高度-hr的margintop
					var row1Height = pageY - 42;
					var row2Height = clientHeight - pageY - 14;
					$("#row1").height(row1Height);
					$("#row2").height(row2Height);
					$("[lay-id='table']").css('height', '100%'); //与父容器同高
					$("[lay-id='table']").find('.layui-table-box').css('height', 'calc(100% - 40px)'); //父容器高度-分页栏高度
					$("[lay-id='table']").find('.layui-table-main').css('height', 'calc(100% - 40px)'); //父容器高度-标题栏高度
					$("[lay-id='table2']").css('height', '100%'); //与父容器同高
					$("[lay-id='table2']").find('.layui-table-box').css('height', 'calc(100% - 40px)'); //父容器高度-分页栏高度
					$("[lay-id='table2']").find('.layui-table-main').css('height', 'calc(100% - 40px)'); //父容器高度-标题栏高度
					//表格出现纵向滚动条时,同时会出现横向滚动条,layui提供了解决方法,会在最后添加一空列
					table.resize(tableID);
					table.resize(table2ID);
				}
			});
			$(document).on('mouseup', function() {
				moveFlag = false;
			});

			function getTableParam(tableID) {
				return {
					elem: '#' + tableID,
					id: tableID,
					size: 'sm',
					limit: 100,
					page: true,
					cols: [
						[{
							type: 'numbers'
						}, {
							field: 'id',
							title: 'ID',
						}, {
							field: 'name',
							title: 'NAME',
						}, {
							field: 'sex',
							title: 'SEX',
						}, {
							field: 'addr',
							title: 'ADDR',
						}]
					],
					data: [{}, {}, {}, {}, {}, {}, {}],
					done: function() {}
				}
			}
		});
	</script>
</html>

在这里插入图片描述