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

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, 表格宽度为列模块宽度之后

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

C语言窗口水平滚动条,C语言Windows程序设计滚动条
滚动条由滚动滑块以及两端的滚动箭头组成, 滚动条的作用是当需要显示的内容超过窗口客户区大小时提供上下/左右的翻页使用户能够完整的阅读显示信息 Windows滚动条介绍滚动条由滚动滑块以及两端的滚动箭 ...
Web端隐藏垂直滚动条且保留滚动效果
在做项目时,发现UI们常常为了快速出图,在设计UI图时只设计一种正常情况下的布局,但是往往实际应用中,内容超出限定区域是很常见的现象,当内容超出时,如果css样式没有设置隐藏则会出现滚动条,而滚动条的 ...
css怎么去掉滚动条滑块,css如何去掉滚动条样式
css去掉滚动条样式的方法是,给滚动条设置[overflow:hidden]样式,将滚动条完全隐藏即可,例如[::-webkit-scrollbar {display: none; /* Chrome ...
html页面消除横向滚动条,框架网页中去掉横向(水平)滚动条的方法
有的时候,我们可能需要在网页页面中嵌入框架页面,嵌入之后可能会由于框架页面中的页面过宽而会出现横向(水平)滚动条的现象,这样非常不便于浏览者的习惯,我们往往习惯于垂直滚动条,所以在这里向大家介绍一种框 ...
滚动条造成页面抖动问题
总结: 若用到 margin:0 auto; 使页面居中,若部分页面出现滚动条,滚动条默认有 20px,这样会造成页面抖动: 解决办法:参考 1. html{overflow:scoll;} 让页面一 ...
去掉iframe的水平滚动条而保留垂直滚动条
如果untitled3.html页中文字超过一屏的话,就会出现了垂直滚动条,在IE7.FF下都是不出现水平滚动条,但在IE6下会出现．在网上找了两种方法如下: 在<boby>里加入scr ...
html自动隐藏滚动条,隐藏HTML页面上的滚动条
是的,有点.. 当你问到"浏览器的滚动条是否能以某种方式被移除,而不是简单地隐藏或伪装"时,每个人都会说"不可能",因为这样做是不可能的.移除所有浏览器的滚动条 ...
解决boostrap-table有水平和垂直滚动条时，滚动条滑到最右边表格标题和内容单元格无法对齐的问题
解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标题和内容单元格无法对齐的问题参考文章: (1)解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标 ...
easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）
easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...

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

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

2、原因分析及解决方案

3、请留意shrinkToFit参数

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

最新文章

热门文章

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

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

2、原因分析及解决方案

3、请留意shrinkToFit参数

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

最新文章

热门文章

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

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