博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery的datagrid自适应浏览器的宽度
阅读量:6505 次
发布时间:2019-06-24

本文共 1082 字,大约阅读时间需要 3 分钟。

hot3.png

  这个问题困扰我很久了,我试过好多方法,例如设置datagrid的width为auto,还有设置datagrid的fit为true,但是这种方法不行,然后我在网上发现有人写了一个扩展方法,链接为。

按照这个链接提供的方法不能使高度按照内容来设置,因此我进行了修改,修改的代码如下:

/** 

 * JQuery扩展方法,用户对JQuery EasyUI的DataGrid控件进行操作。 

 */  

$.fn.extend({  

    /** 

     * 修改DataGrid对象的默认大小,以适应页面宽度。 

     *  

     * @param heightMargin 

     *            高度对页内边距的距离。 

     * @param widthMargin 

     *            宽度对页内边距的距离。 

     * @param minHeight 

     *            最小高度。 

     * @param minWidth 

     *            最小宽度。 

     *  

     */  

    resizeDataGrid : function( widthMargin, minWidth) {  

       /*  var height = $(document.body).height() - heightMargin;   */

        var width = $(document.body).width() - widthMargin;  

  

 /*        height = height < minHeight ? minHeight : height;   */

        width = width < minWidth ? minWidth : width;  

  

        $(this).datagrid('resize', {  

            width : width  

        });  

    }  

});  

$(function() { 

    //datagrid数据表格ID 

    var datagridId = 'test';  

     var datagridId2='spdata';

    // 第一次加载时自动变化大小  

    $('#' + datagridId).resizeDataGrid(20, 800);  

     $('#' + datagridId2).resizeDataGrid(20,800);  

    // 当窗口大小发生变化时,调整DataGrid的大小  

    $(window).resize(function() {  

        $('#' + datagridId).resizeDataGrid(20, 800);  

          $('#' + datagridId2).resizeDataGrid(20,800); 

    });  

});

转载于:https://my.oschina.net/u/659230/blog/209736

你可能感兴趣的文章
1.12 xshell密钥认证
查看>>
3.2 用户组管理
查看>>
ibatis 动态查询
查看>>
汇编语言之实验一
查看>>
git 调用 Beyond Compare
查看>>
SQL基础-->层次化查询(START BY ... CONNECT BY PRIOR)[转]
查看>>
android实现图片识别的几种方法
查看>>
mvc学习地址
查看>>
masonry 基本用法
查看>>
Word产品需求文档,已经过时了【转】
查看>>
dtoj#4299. 图(graph)
查看>>
关于网站的一些js和css常见问题的记录
查看>>
zabbix-3.4 触发器
查看>>
换用代理IP的Webbrowser方法
查看>>
【视频编解码·学习笔记】7. 熵编码算法:基础知识 & 哈夫曼编码
查看>>
spark集群安装部署
查看>>
MySql 查询表字段数
查看>>
mariadb 内存占用优化
查看>>
Centos7安装编译安装zabbix2.219及mariadb-5.5.46
查看>>
怎么获得combobox的valueField值
查看>>