jqgrid 控制列的水平宽度

最新推荐文章于 2020-12-24 00:59:57 发布

转载最新推荐文章于 2020-12-24 00:59:57 发布 · 1.6k 阅读

文章标签：

#jqgrid #表格

博客介绍了jqGrid在表字段较多时，控制列水平宽度和表格宽度的方法。可指定参数shrinkToFit:false，让列宽度使用colModel指定的宽度，同时设置autowidth:true来控制jqGrid的宽度。

控制列的水平宽度

当表字段比较多时，如果按照colModel指定的宽度，整个jqGrid宽度会太宽，我们通常希望控制一下grid的宽度，并同时保持各列的指定宽度。

可以指定jgrid的参数 shrinkToFit:false 。

shrinkToFit属性用来说明当初始化列宽度时候的计算类型，如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用 colModel指定的宽度。

同时需要控制jqgrid的宽度。通过autowidth:true属性可以达到目地。

嗯，还是大神的解释比较容易懂。（原博 https://blog.youkuaiyun.com/jk6801251/article/details/6193447）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

纯爱七七

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

ajax jqgrid,JavaScript系列：ajax异步加载jqgrid

weixin_42310271的博客

08-05

799

ajax简介Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)，是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 1通过在后台与服务器进行少...

jQuery实现冻结表格行和列

10-24

首先，冻结表格行和列的基本思路是通过复制原始表格的部分内容并创建新的div元素来承载这些内容，然后通过CSS样式控制这些div的位置和层级，使其在页面滚动时保持在可视区域内。具体实现分为以下几个步骤： 1. **...

参与评论您还未登录，请先登录后发表或查看评论

数据表格JqGrid自适应列宽度

04-16

NULL 博文链接：https://vipshow.iteye.com/blog/1812381

jqGrid 设置列宽

diweng4066的博客

08-07

1462

在jqgrid显示出来之后，需要手动调整列宽。 1. 经过调查jqgrid本身不支持指定列宽，当然这个是说的的初始化完成后。 2. 经过调查手动是可以调整列宽，所以进行了事件的查看resizestop的事件在调整后被调用。 3. 经过一番思考，这个事件不能满足要求。 4. 从html角度考虑，只要把这列宽调整好就行，抛弃jqgrid的实现方式，直接操作，于是有了下面的实现初稿，大...

jqgrid调整宽度自适应

qq_41038929的博客

06-28

5297

//当浏览器调整大小时，调整jqGrid的大小 $(window).bind('resize', function () { $("#gridList").setGridWidth($('.col-md-12').width()); }).trigger('resize'); $gridList.dataGrid({ url: "Handler/AdminHandle...

jqgrid 调整宽度自适应

marlay@126.com

07-22

2485

jqgrid属性： width ：Grid的宽度，如果未设置，则宽度应为所有列宽的之和；如果设置了宽度，则每列的宽度将会根据shrinkToFit选项的设置，进行设置。 shrinkToFit ：此选项用于根据width计算每列宽度的算法。默认值为true。如果shrinkToFit为true且设置了width值，则每列宽度会根据width成比例缩放；如果shrinkToFit为fals...

实现jqGrid三级表头功能，支持冻结，拖动

04-18

要启用此功能，我们需要在初始化jqGrid时设置`shrinkToFit`为`false`，以防止表格自适应宽度导致冻结列消失。至于拖动列，jqGrid通过`sortable`选项支持列的拖放排序。默认情况下，列是不可排序的，我们需要将`...

jqGrid实现左右固定列的源码解析与优化

所谓“冻结列”，是指当表格水平滚动时，某些关键列始终保持可见状态，不随其他列一起滚动，以便用户在浏览大量横向数据时仍能对照关键信息（如ID、名称或金额）。传统的冻结列仅支持左侧冻结，而本方案突破了这一...

jqGrid JS 5.2.1 实现高效可编辑表格功能

描述中提到的“排序、宽度拖动、锁定列、翻页”等功能构成了 jqGrid 的基础交互体系。排序功能支持本地排序与远程排序两种模式，可根据数据量大小选择合适的策略；宽度拖动允许用户手动调整列宽，提升可读性和个性化...

jqGrid随窗口大小变化自适应大小的示例代码

01-21

第一种： jqGrid随窗口大小变化自适应宽度代码如下:$(function(){ $(window).resize(function(){ $(“#listId”).setGridWidth($(window).width()); }); }); 第二种：代码如下:[removed] = function _doResize() { var ss = pageSize(); $(“#listId”).jqGrid(‘setGridWidth’, ss.WinW-10).jqGrid(‘setGrid

jqgrid表格宽度自适应

热门推荐

杨咩咩

09-04

3万+

$(function(){ //页面加载完成之后执行 pageInit(); }); function pageInit(){ //创建jqGrid组件 jQuery("#list2").jqGrid( { url : 'data/JSONData.json',//组件创建完成之后请求数据的url datat

23jqGrid - 列宽

阿甘兄

04-24

510

这个例子展示了表格列的动态调整。已知的是表格的列宽度总和。我们可以通过设置表格的宽度来重写他。在这种情况下，列宽是新计算出来的宽度。如果高度设置为100%，那么我们可以重新计算表格的高度。尝试翻到下一页。 HTML代码举例 <html> <head> <title>jqGrid 实例</title> </head> ...

jqgrid 固定列宽度_jqGrid 设置列宽

weixin_29717875的博客

12-24

2316

在jqgrid显示出来之后，需要手动调整列宽。1. 经过调查jqgrid本身不支持指定列宽，当然这个是说的的初始化完成后。2. 经过调查手动是可以调整列宽，所以进行了事件的查看resizestop的事件在调整后被调用。3. 经过一番思考，这个事件不能满足要求。4. 从html角度考虑，只要把这列宽调整好就行，抛弃jqgrid的实现方式，直接操作，于是有了下面的实现初稿，大约有3个地方需要进行调整。...

JqGrid自适应列宽度

duzhanxiaosa的专栏

12-28

2万+

国内外的网站都翻了一遍都没有找到一个通用的jqgrid能自适应列宽的方法，要么是太繁琐，要么是不能用，通过参照http://vipshow.iteye.com/blog/1812381这篇文章，自己稍作修改写了个通用的，希望能帮到那些苦苦寻觅的人。代码如下：//重新调整jqgrid每列的宽度 function jqgridColResize(){ var td=$('#tdCompute

JQGrid 自适应宽度

sqh001的专栏

04-25

914

需要设置的属性如下：autowidth: true, shrinkToFit: false,不设置width

JqGrid表格高度宽度自适应

zhangruilinmoo

03-28

970

我在做表格时，使用jqGrid来做表格时，发现表格宽度超出范围，想自适应 然后再网上查找了很多，发现不顶用，可能是我太菜的原因。反正我用没效果。然后我自己发现了一个属性可以实现自适应，就在下面呐！要用的直接傻瓜式操作：粘贴复制即可. height:"auto",//高度自适应 autowidth:true,//宽度自适应 对了，位置不要放错了，放在初始化参数位置上以后要用直接来找...

28jqGrid 3.0新特征- 调整列宽

阿甘兄

04-24

502

这个例子展示了只有某些列可以应用colModel的新属性resizable来改变宽度。在这种情况下，可以改变宽度的只有两列:Client和Total。 HTML代码举例 <html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··...

jqGrid随窗口大小调整表格宽度

benmin1的博客

07-01

7218

第一种： jqGrid随窗口大小变化自适应宽度复制代码代码如下:$(function(){ $(window).resize(function(){ $("#listId").setGridWidth($(window).width()); }); }); 第二种：复制代码代码如下:window.onresi

jqgrid表格列固定宽度和自适应列

09-04

jqGrid是一个基于jQuery的表格插件，可以实现表格的固定宽度和自适应列的效果。固定宽度指的是表格的每一列都有一个固定的宽度，不会随着内容的长度变化而改变宽度。可以通过设置colModel中的width属性来实现固定宽度，如： ```javascript colModel: [ { name: 'id', index: 'id', width: 100 }, { name: 'name', index: 'name', width: 150 }, //... ] ``` 上述代码中，id列的宽度为100px，name列的宽度为150px，这样就实现了固定宽度的效果。 自适应列指的是表格的宽度会根据内容的长度自动调整列的宽度，使得所有内容能够完整显示在表格中。可以通过设置colModel中的resizable属性来实现自适应列，如： ```javascript colModel: [ { name: 'id', index: 'id', resizable: true }, { name: 'name', index: 'name', resizable: true }, //... ] ``` 上述代码中，将resizable属性设置为true，表示该列可以自动调整宽度以适应内容的长度。需要注意的是，固定宽度和自适应列可以同时使用，也可以单独使用。可以根据具体的需求来选择使用哪一种方式。