layui实现可拉伸上下分栏"/>
layui实现可拉伸上下分栏
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的margintopvar 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>更多推荐
layui实现可拉伸上下分栏
发布评论