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

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

HTML部分:

  1. <body class="gray-bg">
  2. <div class="wrapper wrapper-content white-bg">
  3.  
  4. <div class="search-head">
  5. <ul>
  6. <li class="w20" id="li_dateTime">
  7. <div class="input-group" id="date">
  8. <span class="input-group-btn">日 期:</span>
  9.  
  10. <input id="dateTime" type="text" class="easyui-datebox" th:value="${time}"/>
  11. </div>
  12. </li>
  13. <li>
  14. <a href="javascript:Search();" id="selectAll" class="btn btn-outline btn-success"
  15. style="float: left;">查询</a>
  16.  
  17. </li>
  18. </ul>
  19. </div>
  20. <div class="ibox-content">
  21. <table id="List" class="easyui-datagrid">
  22. </table>
  23. </div>
  24. </div>
  25. </body>

JS 部分:

  1. $(function () {
  2. computeWidthAndHeight();
  3. initList();
  4. })
  5. // 计算高度、宽度
  6. function computeWidthAndHeight() {
  7. var width=Number($(".gray-bg").width())*0.96;// 获取网页的宽度
  8. var height=(Number($(".gray-bg").height())-Number($(".search-head").height()))*0.9; // 计算高度
  9. $("#List").datagrid({
  10. width : width,
  11. height : height
  12. });
  13. }
  14. function initList() {
  15. var _options = {
  16. method: "POST",
  17. url: Url + "/test/test",
  18. idField: 'xh',
  19. fit: true, //自动大小 ,开启这个控制,就可自适应浏览器大小
  20. fitColumns: true,
  21. remoteSort: false,
  22. pageSize: 15,
  23. pageList: [15, 30, 50, 100, 200],
  24. pagination: true,//分页控件
  25. rownumbers: true, //行号
  26. columns: [[
  27. {
  28. field: 'xh', print: false, toExcel: false, width: 70, align: 'Center',
  29. halign: 'center',
  30. title: '学号'
  31. },
  32. {
  33. field: 'id', print: false, toExcel: false, width: 75, align: 'center',
  34. halign: 'center',
  35. title: '操作',
  36. formatter: function (value, row, index) {
  37. button += '<a style="margin-left: 10px" name="opera1" onclick="Change(\'' + row.xh + '\')" class="btn btn-outline btn-success" >编辑</a>';
  38. return button;
  39. },
  40. }
  41. ]]
  42. };
  43. $('#List').datagrid(_options);
  44. }

日常记录,留待查阅~

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. python的学习笔记__初识函数

    函数定义与调用 #函数定义 def mylen(): """计算s1的长度""" s1 = "hello world" ...

  2. arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  3. arcgis api 3.x for js 实现克里金插值渲染图不依赖 GP 服务(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  4. 服务器四:多进程epoll

    #include <fcntl.h> #include <sys/socket.h> #include <netinet/in.h> #include <ar ...

  5. 30号快手笔试(三道ac两道半)————-历史上最大的网络失误orz

    case  50 ,20,100 做题以来第一次重大失误:最后两分钟发现手机关机了,然后充电开机orz 页面是js代码, 钟表是一直会走的, 手机没电了, 电脑连接的手机的热点: 只顾在调试,先过了第 ...

  6. StackExchange.Redis中文使用文档

    StackExchange.Redis中文使用文档 Intro 最近想深入学习一些 Redis 相关的东西.于是看了看官方的项目 StackExchange,发现里面有一份文档,于是打算翻译成中文,方 ...

  7. 通过 Sqoop1.4.7 将 Mysql5.7、Hive2.3.4、Hbase1.4.9 之间的数据导入导出

    目录 目录 1.什么是 Sqoop? 2.下载应用程序及配置环境变量 2.1.下载 Sqoop 1.4.7 2.2.设置环境变量 2.3.设置安装所需环境 3.安装 Sqoop 1.4.7 3.1.修 ...

  8. 数据加密--详解 RSA加密算法 原理与实现

    RSA算法简介 RSA是最流行的非对称加密算法之一.也被称为公钥加密.它是由罗纳德·李维斯特(Ron Rivest).阿迪·萨莫尔(Adi Shamir)和伦纳德·阿德曼(Leonard Adlema ...

  9. Agent Job相关的系统表

    参考: http://www.cnblogs.com/CareySon/p/5262311.html msdb中,有三张与Agent Job相关的系统表,需要了解一下 msdb.dbo.sysjobs ...

  10. PhpStorm 常用快捷键

    PhpStorm 常用快捷键 File Structure 路径: Main menu > Navigate > File Structure 显示当前文件的类和函数结构,便于查找当前文件 ...