jqGrid 如何shrinkToFit出现水平滚动条及页面有垂直滚动条时表格会超出父容器处理

最新推荐文章于 2023-06-26 10:49:42 发布

老马历写记

最新推荐文章于 2023-06-26 10:49:42 发布

阅读量2.2k

点赞数 1

分类专栏： WEB-Front 文章标签： jqGrid shrinkToFit autowidth 水平滚动条垂直滚动条

本文链接：https://blog.csdn.net/chuangxin/article/details/89034208

版权

WEB-Front 专栏收录该内容

87 篇文章 3 订阅

订阅专栏

1、下图右侧为表格超出panel部分

在这里插入图片描述
页面html代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>jggrid-classes</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.css" />
	<link rel="stylesheet" href="https://js.cybozu.cn/jqgrid/v5.3.1/css/ui.jqgrid.css" />
	<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
	<script src="https://js.cybozu.cn/jqgrid/v5.3.1/js/jquery.jqGrid.min.js"></script>
	<script src="https://js.cybozu.cn/jqgrid/v5.3.1/js/i18n/grid.locale-en.js"></script>
</head>
<body>
<div class="page-content container" style="margin-top: 30px; height: 500px; overflow-x: hidden; overflow-y:auto">
	<div class="page-body"> <!-- page-body -->
		<div class="panel panel-default" id="panel-orders">
			<div class="panel-heading">
				<h3 class="panel-title">有垂直滚动条时，表格会超出panel-body处理</h3>
			</div>
			<table id="orders"></table>
		</div>
		<div class="panel panel-default" id="panel-orders">
			<div class="panel-heading">
				<h3 class="panel-title">空panel</h3>
			</div>
			<div class="panel-body">空panel</div>
		</div>
	</div>
</div>
   
<script type="text/javascript">
	var data = [], rowIds = [];
	function getBills() {
		var rowCount = 10;
		for (var i = 0; i < rowCount; i ++) {
			data.push({
				goods_no: i + 1,
				goods_name: '零件名称' + rowCount + i,
				car_type_name: '车型' + rowCount + i,
				package_name: '包装器具' + rowCount + i,
				pihao: '20190329' + i,
				lj_desc: '零件描述，A零件B零件C零件A零件B零件C零件' + i,
				cx_desc: '车型描述，A车型B车型C车型A车型B车型C车型' + i,
			})
		}
		$("#orders").jqGrid("clearGridData").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
	}
	$(function() {
		$("#orders").jqGrid({
			colModel: [
				{label: "零件号", name: "goods_no", width: 60},
				{label: "零件名称", name: "goods_name", width: 480},
				{label: "车型", name: "car_type_name", width: 70},
				{label: "批号", name: "pihao", width: 70, },
				{label: "零件描述(原生显示)", name: "lj_desc", width: 350},
				{label: "零件描述(超出部分省略号)", name: "lj_desc", width: 350},
				{label: "车型描述(强制换行)", name: "cx_desc", width: 150},
			],
			datatype: 'local',
			rownumbers: true,
			height: 300,
			rowNum: 1000,
			shrinkToFit: false,
			autowidth: true
		});
		getBills();
	});
</script>
</body>
</html>

2、原因分析及解决方案

jqgrid在构建的时候，先确定表格宽度，再设置高度。那么问题来了，确定表格宽度的时候，由于表格没有高度，所以其宽度为没垂直滚动条时的宽度，设置style内联宽度；当其设置高度后，出现滚动条，此时panel由于width:100%，会自动缩小滚动条宽度约18px，而表格由于设置的是width:xxx px，因此宽度不会变，所以表格就超出父容器约18px宽度。
那么如何解决？
表格构建的时候显性设置width属性，如下：

	$("#orders").jqGrid({
		...
		width: 1120,  	//可以通过js计算
		autowidth: false
	});

注意：
设置了width的话，autowidth请设置为false或干脆不设置。

3、请留意shrinkToFit参数

当shrinkToFit为false时，表格列宽度为colModel设置宽度；
当shrinkToFit为true时：

表格不会出现水平滚动条；
autowidth = true, 会重新计算列宽
autowidth = false, 表格宽度为列模块宽度之后

老马历写记

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

jqGrid 如何shrinkToFit出现水平滚动条 及页面有垂直滚动条时表格会超出父容器处理

1、下图右侧为表格超出panel部分

2、原因分析及解决方案

3、请留意shrinkToFit参数

jqGrid 如何shrinkToFit出现水平滚动条及页面有垂直滚动条时表格会超出父容器处理