Easyui 让DataGrid适应浏览器宽度

DataGrid有100%宽度的设置，但是有时不是很让人满意，比如你你放大或者拉放你的浏览器，那么DataGrid只维持第一次加载的宽高，非常难看

 $('#List').datagrid({url: '/SysSample/GetList',width: $(window).width() - 10,methord: 'post',height: $(window).height() - 35,fitColumns: true,
.................................

你看到$(window).width() - 10和$(window).height() - 35

这是我设置的页面第一次载入，去后去窗体的宽度和高度进行计算，那么在第一次载入显示是正常的，但是放大或者拉伸浏览器,datagrid将不做改变了，我们这是要用到一个jquery的方法，叫resize()

参数

fnFunctionV1.0

在每一个匹配元素的resize事件中绑定的处理函数。

[data],fnString,FunctionV1.4.3

data:resize([Data], fn) 可传入data供函数fn处理。

fn:在每一个匹配元素的resize事件中绑定的处理函数。

看到浏览器变化时候激发的事件，所以我们要加入:

!--自动DataGrid 从第一次加载与重置窗体大小时候发生的事件:分部视图-->
<script type="text/javascript">$(function () {$(window).resize(function () {$('#List').datagrid('resize', {width: $(window).width() - 10,height: $(window).height() - 35}).datagrid('resize', {width: $(window).width() - 10,height: $(window).height() - 35});});});
</script>

好了，我们来做一个对比（第一载入的时候）

缩小浏览器的时候

完美显示

Easyui 让DataGrid适应浏览器宽度相关推荐

easyui的datagrid的使用方法
环境:Spring boot +Thymeleaf+jps+easyui 引入thymeleaf模板引擎 <html lang="en" xmlns:th="htt ...
EasyUI之datagrid展示数据列表
写在最前: 如果你用惯了Web Mvc框架的视图跳转方式来开发后台系统,第一次接触到EasyUI的时候,往往会有一个大大的疑问,这EasyUI是如何做跳转的啊?增删改查都不知道如何下手了!但是当你知道 ...
【抬杠】在某些时候不希望用户缩小浏览器的宽度，因为咳咳~会导致你的布局混乱，那么这个代码就是帮助你如何限制浏览器宽度的
方式1:简单纯粹,非Vue项目直接复制用完即走! /*限制浏览器宽度*/ @media screen and (max-width: 1200px) {html {overflow: hidden;} ...
CSS实现自适应浏览器宽度的正方形
2019独角兽企业重金招聘Python工程师标准>>> CSS实现自适应浏览器宽度的正方形有以下三种方法: 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分 ...
给Jquery easyui 的datagrid 每行增加操作链接（转载）
转自:http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的E ...
EasyUI 之datagrid 使用【DataGrid属性解释】
可选的参数 DataGrid 属性覆写了 $.fn.datagrid.defaults. 参数名类型描述默认值 title string Datagrid面板的标题 null iconCls ...
给Jquery easyui 的datagrid 每行增加操作链接(转)
http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的Easy ...
easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题
做一个用easyui的datagrid显示数据的功能时发现表格的列头与数据错位了,而且这个现象不总是能重现,一直没搞清楚原因.后来偶然在控制台看出了一点端倪: 推测表头或者单元格的class名应该是用 ...
SSh结合Easyui实现Datagrid的分页显示
近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...

Easyui 让DataGrid适应浏览器宽度

参数

fnFunctionV1.0

[data],fnString,FunctionV1.4.3

Easyui 让DataGrid适应浏览器宽度相关推荐

最新文章

热门文章