easyui Datagrid 表格高度计算及自适应页面的实现

最新推荐文章于 2022-08-12 13:51:17 发布

aijie1919

最新推荐文章于 2022-08-12 13:51:17 发布

阅读量708

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Aimee-AI/p/9648016.html

版权

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

所以采用了计算网页高度和其他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" οnclick="Change(\'' + row.xh + '\')" class="btn btn-outline btn-success" >编辑</a>';
                    return button;
                },
            }
        ]]
    };
    $('#List').datagrid(_options);
}