$(window).bind('resize', function () { var width = $('.jqGrid_wrapper').width(); $('#gridtable').setGridWidth(width); var gridHeight = $(window).height() - $('.jqGrid_wrapper').offset().top - 130; $('#gridtable').jqGrid('setGridHeight', gridHeight); }); 每个页面都会用到,需要怎么封装才好
时间: 2024-01-25 08:03:09 浏览: 21
你可以将这个代码封装成一个函数,然后在每个页面需要用到的时候调用即可。具体代码如下:
```javascript
function initGrid(gridSelector) {
var width = $('.jqGrid_wrapper').width();
$(gridSelector).jqGrid({
// Grid配置项
...
});
$(window).bind('resize', function () {
var width = $('.jqGrid_wrapper').width();
$(gridSelector).setGridWidth(width);
var gridHeight = $(window).height() - $('.jqGrid_wrapper').offset().top - 130;
$(gridSelector).jqGrid('setGridHeight', gridHeight);
}).trigger('resize');
}
```
在上述代码中,我们将原来的代码封装成了一个名为 `initGrid` 的函数,该函数接收一个 `gridSelector` 参数,用于指定 Grid 的选择器。在函数内部,我们首先获取 Grid 的宽度,然后通过调用 `$(gridSelector).jqGrid({...})` 初始化 Grid。接着,我们绑定了一个 `resize` 事件,在事件回调函数中重新计算了 Grid 的宽度和高度,并设置给 Grid。最后,我们通过调用 `.trigger('resize')` 来触发一次窗口大小改变事件,以初始化 Grid 的宽度和高度。这个函数可以放在公共的 js 文件中,然后在每个页面需要用到的时候调用即可。