jqgrid属性:
width :Grid的宽度,如果未设置,则宽度应为所有列宽的之和;如果设置了宽度,则每列的宽度将会根据shrinkToFit选项的设置,进行设置。
shrinkToFit :此选项用于根据width计算每列宽度的算法。默认值为true。如果shrinkToFit为true且设置了width值,则每列宽度会根据width成比例缩放;如果shrinkToFit为false且设置了width值,则每列的宽度不会成比例缩放,而是保持原有设置,而Grid将会有水平滚动条。
autowidth :默认值为false。如果设为true,则Grid的宽度会根据父容器的宽度自动重算。重算仅发生在Grid初始化的阶段;如果当父容器尺寸变化了,同时也需要变化Grid的尺寸的话,则需要在自己的代码中调用setGridWidth方法来完成。
这些属性只能是保证第一次时的宽度,当浏览器大小变化如还想让表格宽度自适应,就需要用jqgrid的方法setGridWidth,它有两个参数,new_width,shr,当第二个参数不设置时会按照shrinkToFit 的设置值或默认值,而第一个参数则要设置的新的宽度值,所以在些可用js实现对浏览器宽度变化的自适应:
$(function(){
$(window).resize(function(){
$("#analyDataTab").setGridWidth($(window).width()*0.99);
$("#charDataTab").setGridWidth(document.body.clientWidth*0.99);
});
});
注:这里的百分比可按自己需要来设定,也可直接是浏览器的宽度大小。
分享到:
相关推荐
本文将深入探讨“数据表格JqGrid自适应列宽度”这一主题,以帮助开发者更好地理解和实现这一功能。 首先,JqGrid允许用户根据屏幕尺寸或窗口大小自动调整列宽,以优化用户体验。这种自适应性是现代Web应用中必不可...
为了实现自适应窗口大小,你可以监听窗口的`resize`事件,然后调用jqGrid的`setGridWidth`方法来动态调整表格宽度: ```javascript $(window).on('resize.jqGrid', function () { var newWidth = $(this).width();...
如果希望表格在窗口大小变化时同时调整宽度和高度,那么方法二是更好的选择。记得在使用这些代码时,确保已经引入了jqGrid的JavaScript库和相应的CSS文件。此外,为了提高性能,可以考虑使用 throttle 或 debounce ...
要启用此功能,我们需要在初始化jqGrid时设置`shrinkToFit`为`false`,以防止表格自适应宽度导致冻结列消失。 至于拖动列,jqGrid通过`sortable`选项支持列的拖放排序。默认情况下,列是不可排序的,我们需要将`...
1. **数据展示**:JqGrid可以轻松地展示成百上千行的数据,并支持多种布局模式,如固定列宽、自适应宽度等。用户可以根据需求自由调整列的显示。 2. **数据操作**:提供了排序、搜索、分页等基础功能。用户可以通过...
- `shrinkToFit`: 控制列宽是否根据表格总宽度自适应,`true`表示自适应,`false`则保持列宽不变,可能导致水平滚动条出现。 - `autowidth`: 是否自动设置表格宽度,`true`表示自动调整,`false`则不调整。 - `...
`autowidth` 选项允许表格自动调整宽度,当设为 `true` 时,表格会根据内容自适应宽度。`pager` 参数用来定义分页控件的位置,如 `'#pjqgajax'` 表示分页条在 id 为 `pjqgajax` 的元素内。`sortname` 指定默认排序的...
在这个简单实例中,我们将探讨如何使JqGrid表格随着浏览器窗口大小的调整而自动调整其宽度,确保表格始终保持良好的布局。 首先,我们需要理解JqGrid的基本结构。JqGrid通常包含一个表格(`<table>`)和一个分页器...
8. MyTableGrid:这个DataGrid控件是基于Prototype框架开发的,它支持快速分页和数据排序,并能拖动调整列宽度和隐藏不需要显示的列。 9. GT-Grid:这是一个国内开发的表格组件,可以纯客户端使用,也可以内置Java...
7. **Elastic Columns** - 轻量级响应式插件,可根据浏览器宽度自动调整网格布局。 8. **Mason.js** - 自动填充网格间隙,通过预定义的元素或内容来优化网格布局,支持多种配置选项。 9. **rowGrid.js** - 小巧的...