因为页面上既要计算表格的高度，又要自适应浏览器大小，之前都都采用固定表格高度，这样就会导致不同的分辨率电脑上看起来表格高矮不一，

所以采用了计算网页高度和其他div 的高度之差作为表格的初始高度；

HTML部分：

<body class="gray-bg">

<div class="wrapper wrapper-content white-bg">

        <div class="search-head">

            <ul>

                <li class="w20" id="li_dateTime">

                    <div class="input-group" id="date">

                        <span class="input-group-btn">日　期：</span>

                        <input id="dateTime" type="text" class="easyui-datebox" th:value="${time}"/>

                    </div>

                </li>

               <li>

                        <a href="javascript:Search();" id="selectAll" class="btn btn-outline btn-success"

                       style="float: left;">查询</a>

                </li>

            </ul>

        </div>

        <div class="ibox-content">

            <table id="List" class="easyui-datagrid">

            </table>

        </div>

</div>

</body>

JS 部分：

$(function () {

    computeWidthAndHeight();

    initList();

    })

// 计算高度、宽度

function computeWidthAndHeight() {

    var width=Number($(".gray-bg").width())*0.96;// 获取网页的宽度

    var height=(Number($(".gray-bg").height())-Number($(".search-head").height()))*0.9; // 计算高度

    $("#List").datagrid({

        width : width,

        height : height

    });

 }

function initList() {

    var _options = {

        method: "POST",

        url: Url + "/test/test",

        idField: 'xh',

        fit: true, //自动大小 ,开启这个控制，就可自适应浏览器大小

        fitColumns: true,

        remoteSort: false,

        pageSize: 15,

        pageList: [15, 30, 50, 100, 200],

        pagination: true,//分页控件

        rownumbers: true, //行号

        columns: [[

            {

                field: 'xh', print: false, toExcel: false, width: 70, align: 'Center',

                halign: 'center',

                title: '学号'

            },

            {

                field: 'id', print: false, toExcel: false, width: 75, align: 'center',

                halign: 'center',

                title: '操作',

                formatter: function (value, row, index) {

                    button += '<a style="margin-left: 10px" name="opera1" onclick="Change(\'' + row.xh + '\')" class="btn btn-outline btn-success" >编辑</a>';

                    return button;

                },

            }

        ]]

    };

    $('#List').datagrid(_options);

}

日常记录，留待查阅~

easyui Datagrid 表格高度计算及自适应页面的实现的更多相关文章

  1. 一步步实现 easyui datagrid表格宽度自适应，效果非常好

    一步步实现 easyui datagrid表格宽度自适应,效果非常好: 一.设置公共方法,使得datagrid的属性  fitColumns:true $(function(){ //初始加载,表格宽 ...

  2. 关于easyui datagrid 表格数据处理

    首先先将easyui 引入到jsp页面中 <link rel="stylesheet" type="text/css" href="easyui ...

  3. EasyUi datagrid 表格分页例子

    1.首先引入 easyui的 css 和 js 文件 2.前台 需要写的js //源数据 function Async(action,args,callback){  $.ajax({  url: a ...

  4. easyui datagrid 表格适应屏幕

    1.项目后台系统使用easyui,datagrid 的数据设置为自动适应屏幕,那么对于笔记本的话,就会显得有的小,可以通过设置datagrid属性,进行固定长度的设置 $('#gridTable'). ...

  5. easyui datagrid 表格不让选中(双层嵌套)

    代码: function local(role,region,ip){ $("#roleList").datagrid({ // title:'服务器监控列表', height:( ...

  6. easyui datagrid 表格动态隐藏部分列的展示

    1.一套代码中,可能不同的项目情况都在用,但是可能不同的项目要求展示的datagrid列的内容并不一致,所以能够动态的显示部分datagrid列的内容. 即datagrid的中的某一列,这个项目要求显 ...

  7. easyui datagrid 表格中操作栏 按钮图标不显示

    jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染 解决办法: 使用解析器 Parser(解析器) $.parser.parse();       // 解析所有页面 $.par ...

  8. easyui datagrid 表格组件列属性formatter和styler使用方法

    明确单元格DOM结构 要想弄清楚formatter和styler属性是怎么工作的,首先要弄清楚datagrid组件内容单元格的DOM接口,注意,这里指的是内容单元格,不包括标题单元格,标题单元格的结构 ...

  9. easyUI datagrid表格添加“暂无记录”显示

    扩展grid的onAfterRender事件 var myview = $.extend({}, $.fn.datagrid.defaults.view, {     onAfterRender: f ...

随机推荐

  1. loj#6041. 「雅礼集训 2017 Day7」事情的相似度(SAM set启发式合并 二维数点)

    题意 题目链接 Sol 只会后缀数组+暴躁莫队套set\(n \sqrt{n} \log n\)但绝对跑不过去. 正解是SAM + set启发式合并 + 二维数点/ SAM + LCT 但是我只会第一 ...

  2. Nginx设置Https反向代理，指向Docker Gitlab11.3.9 Https服务

    目录 目录 1.GitLab11.3.9的安装 2.域名在阿里云托管,申请免费的1年证书 3.Gitlab 的 https 配置 4.Nginx 配置 https,反向代理指向 Gitlab 配置 目 ...

  3. 好代码是管出来的——.Net Core中的单元测试与代码覆盖率

    测试对于软件来说,是保证其质量的一个重要过程,而测试又分为很多种,单元测试.集成测试.系统测试.压力测试等等,不同的测试的测试粒度和测试目标也不同,如单元测试关注每一行代码,集成测试关注的是多个模块是 ...

  4. matplotlib正弦和余弦图

    代码: # -*- coding: utf-8 -*- """ Created on Thu Jul 12 16:37:47 2018 @author: zhen &qu ...

  5. SQL 行转列 PIVOT 学习示例

    CREATE TABLE [StudentScores] ( ), --学生姓名 ), --科目 [Score] FLOAT, --成绩 ) select * from [StudentScores] ...

  6. Jalor 5学习心得

    jalor5是一套功能强大的框架,该框架集成了spring.mybatis.cxf.日志.异常等组件,和其它未提及的部分组件,如消息组件. 它还自带了权限管理,内容管理,国际化等功能,该框架在项目开发 ...

  7. java拦截器（interceptor）

    1.声明式 (1)注解,使用Aspect的@Aspect (2)实现HandlerInterceptor /** * 拦截请求 * * @author Administrator * */ @Comp ...

  8. struct导入项目工程时工程旁边出现红色的×号

    在我们学习java的过程中难免要导入java工程项目,那么当我们导进去的时候出现错误怎么办呢, 一,首先 二,其次 选择Properties 三,再选择 四,再选择 (高版本的选择1.5尽量用1.6的 ...

  9. Ubuntu 16.04 屏幕亮度无法调节怎么办

    安装好ubuntu 16.04之后,发现屏幕超亮,找不到调节按钮,这应该是系统的一个漏洞, 不过可以安装工具来操作,从而解决亮度调节问题,下面是安装  Brightness Controller 的方 ...

  10. CentOS6.9安装WordPress搭建自己的博客网站

    首先说明我用的是服务器上之前装的mysql数据库,只需要配置上就行了 准备工作 CentOS6.9 在/目录下创建一个目录src,把下载的东西都放到这个文件夹下 下载Apache Httpd,下载地址 ...