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>

好了,我们来做一个对比(第一载入的时候)

缩小浏览器的时候

完美显示

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏彭湖湾的编程世界

【javascript】详解javascript闭包 — 大家准备好瓜子,我要开始讲故事啦~~

前言: 在这篇文章里,我将对那些在各种有关闭包的资料中频繁出现,但却又千篇一律,且暧昧模糊得让人难以理解的表述,做一次自己的解读。或者说是对“红宝书”的《函数表...

25360
来自专栏大数据学习笔记

Spark2.x学习笔记:14、Spark SQL程序设计

Spark2.x学习笔记:14、 Spark SQL程序设计 14.1 RDD的局限性 RDD仅表示数据集,RDD没有元数据,也就是说没有字段语义定义。 RDD...

83970
来自专栏王二麻子IT技术交流园地

JS中encodeURI,escape,encodeURIComponent区别

js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,...

25080
来自专栏彭湖湾的编程世界

【javascript】您好, 您要的ECMAScript6速记套餐到了 (一)

【前言】本文“严重参考” 自阮一峰老师写的ES6文档,在此我郑重感谢他沉默无声的帮助 总结一下ES6为 javascript中的 对象/数组/函数 这JS三巨头...

20670
来自专栏10km的专栏

thrift:返回null的解决办法

最的项目用到swift:thrift做RPC框架,开始也没有了解太深,就开始干了,今天开始测试了,发现thrift居然不允许服务接口返回null。跟踪源码到下面...

48460
来自专栏彭湖湾的编程世界

【javascript/PHP】当一个JavaScripter初次进入PHP的世界,他将看到这样的风景

本文将从以下11点介绍javascript和PHP在基础语法和基本操作上的异同: 1.数据类型的异同 2.常量和变量的定义的不同,字符串连接运算符不同 3.对...

235100
来自专栏大数据学习笔记

Hadoop源码分析:HDFS读取文件

Hadoop源码分析:HDFS读取文件 上一篇博客http://blog.csdn.net/chengyuqiang/article/details/78636...

54260
来自专栏HT

JS数组追加数组采用push.apply的坑

JS数组追加数组没有现成的函数,这么多年我已经习惯了a.push.apply(a, b);这种自以为很酷的,不需要写for循环的写法,一直也没遇到什么问题,直到...

36650
来自专栏彭湖湾的编程世界

【javascript】详解变量,值,类型和宿主对象

JS数据类型 JS类型分类 ? 讲到类型, 首先要说的当然是JS的类型分类, 对于这一点,《javascript高级语言程序设计》和《你不知道的javasvri...

24160
来自专栏彭湖湾的编程世界

【javascript】原生js更改css样式的两种方式

下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1;css表达式...

33980

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励