easyui datagrid 自适应窗口边宽度

最新推荐文章于 2019-08-07 14:24:44 发布

原创最新推荐文章于 2019-08-07 14:24:44 发布 · 3.6k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#easyui

收录于

jquery easyui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了easyui datagrid如何实现自适应窗口宽度。当datagrid的pagination属性为false时，设置fit为true即可自适应。若pagination为true，则需监听window对象的resize事件，动态调整datagrid大小，例如：$(window).resize(function () { $('#datagridID').datagrid('resize'); })。

1.底部如果没有分页工具栏(即datagrid属性pagination为false)，这种情况可以直接设置datagrid属性fit为true 即可。

2.底部如果有分页工具栏时(即datagrid属性pagination为true)，这时需要监听window对象(即浏览器窗口)大小的改变，动态的改变datagrid大小。
这时用到resize()函数，它用于为每个匹配元素的resize事件绑定处理函数。该函数也可用于触发resize事件。此外，还可以额外传递给事件处理函数一些数据。
语法：

jQueryObject.resize( [ [ data ,]  handler ] );(参数均为可选)

触发window对象的resize事件：

$(window).resize(function(){
    alert("调整了窗口大小!");
});

可以在事件处理函数中对datagrid进行尺寸调整。
$(window).resize(function () { 
  $('#+datagridID').datagrid('resize'); 
});