easyui Datagrid 表格高度计算及自适应页面的实现
Posted aimee-ai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了easyui Datagrid 表格高度计算及自适应页面的实现相关的知识，希望对你有一定的参考价值。
因为页面上既要计算表格的高度，又要自适应浏览器大小，之前都都采用固定表格高度，这样就会导致不同的分辨率电脑上看起来表格高矮不一，
所以采用了计算网页高度和其他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 表格高度计算及自适应页面的实现的主要内容，如果未能解决你的问题，请参考以下文章
为啥easyui-datagrid分页控件把所有的都遮住了？
为啥easyui-datagrid分页控件把所有的都遮住了？