http://stackoverflow.com/questions/875225/resize-jqgrid-when-browser-is-resized
http://help.dottoro.com/ljgsfkbc.php
js事件列表
overflow事件
overflowChanged事件
转载
jqgrid调整宽度自适应 6 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外部样式为百分比显示。
gridComplete:function(){
$("div[class='ui-jqgrid ui-widget ui-widget-content ui-corner-all']").removeClass("width");
$("div[class='ui-jqgrid ui-widget ui-widget-content ui-corner-all']").css("width","100%");
$("div[class='ui-jqgrid-view']").removeClass("width");
$("div[class='ui-jqgrid-view']").css("width","100%");
$("div[class='ui-state-default ui-jqgrid-hdiv']").removeClass("width");
$("div[class='ui-state-default ui-jqgrid-hdiv']").css("width","100%");
$("table[class='ui-jqgrid-htable']").removeClass("width");
$("table[class='ui-jqgrid-htable']").css("width","100%");
$("div[class='ui-state-default ui-jqgrid-pager ui-corner-bottom']").removeClass("width");
$("div[class='ui-state-default ui-jqgrid-pager ui-corner-bottom']").css("width","100%");
}
分享到:
相关推荐
1. 效果展示:在滚动表格时,被锁定的列保持固定,而其他未锁定的列会随着滚动条移动。 2. 实现方法:在 `colModel` 配置中,通过设置 `frozen` 属性为 `true` 来锁定列。例如: ```javascript colModel: [ { ...
14. `scrollrows`: 是否启用行滚动条。 在初始化jqGrid时,需要注意以下问题: - 当不希望立即加载数据,即想在需要时动态显示表格,可以将`url`设为空字符串`""`,并把`datatype`设为"local",以避免初始化时的...
16. **forceFit**:如果设为`true`,将强制所有列适应表格宽度,避免出现水平滚动条。 17. **gridview**:当设为`true`时,可以显著提高表格加载速度,但会牺牲一些高级功能,如treeGrid、subGrid和`afterInsertRow...
- `shrinkToFit`:控制列宽计算方式,影响表格是否有水平滚动条。 - `autowidth`:如果设为 true,表格宽度会根据父容器自动调整。 - `pager`: 定义分页栏。 - `sortname`: 默认排序的列名。 - `viewrecords`: ...
同时,考虑表格和分页器的垂直布局,可能需要计算合适的高度以避免滚动条的出现。 总结来说,这个JqGrid实例通过监听窗口的`resize`事件,并调用`setGridWidth`方法,实现了表格宽度的动态调整,以适应窗口大小的...
- `forceFit`:设为`true`,自动调整列宽以适应整个表格,避免水平滚动条出现。 8. **树形表格(TreeGrid)**: - `treeGrid`:设为`true`启用树形表格功能。 - `ExpandColumn`:指定用于展开/折叠树形行的列名...
7. 滚动条插件:如Perfect Scrollbar或SimpleBar,这些插件可以替换浏览器默认的滚动条样式,提供更美观、更流畅的滚动体验。同时,它们支持自定义颜色、宽度,甚至可以实现滚动事件监听。 8. 消息通知条插件:如...
此外,窗口还支持拖动、缩放等交互,使得用户能够自由调整窗口大小和位置。 总的来说,jQuery作为强大的JavaScript库,为开发人员提供了丰富的工具和插件,使得构建具有高级功能的用户界面变得轻而易举。通过学习和...
其中,`frozenColumns`是固定的列,不会随着滚动条移动。 7. `formatter`:这是一个函数,用于自定义列的显示内容,例如在'action'列中,它返回两个操作按钮的HTML代码,分别对应编辑和删除功能。 8. `toolbar`:...
它支持图像加载事件、窗口缩放、不同高度的项目、动态宽度和CSS3过渡动画。 2. **Freewall** - 这是一个跨浏览器且响应式的jQuery插件,支持多种网格布局类型,如灵活布局、图像布局、嵌套网格等,并带有CSS3动画和...