控制EasyUI DataGrid高度

这次要说的是控制EasyUI的高度，平时我公司的项目，用EasyUI较多，然后datagrid这个组件是用的非常多的。平时我们都是固定高度，常见代码如下：

            <table id="tt" style="width: 100%; height: 600px; $(this).width() * 0.2;">

</table>

 

然后本次有些特殊的地方在于，本次公司想让高度自适应屏幕，就是在不同的高度的浏览器里面，这个table始终全屏。我首先想到的是，通过js来获取浏览器高度，再来一个$("#tt").css(“height",xxx)不就搞定了嘛。。。

            后来发现，这个不可行，因为在浏览器全端渲染的时候，table代码已经改变很多， 不能继续用id来控制了，需要用到一下代码：

逻辑大概是：通过页面加载，然后获取浏览器高度，然后再减去头部和尾部的高度，就得出中间高度，然后就是datagrid的高度，然后再通过外围的ID找到真正控制EasyUI DataGrid高度的类，然后再给他设置高度，代码如下：

    <div id="top" class="top">

        <div class="topMenu">

            <div class="topIcon">

                <a title="返回后台首页" href="index.aspx">

                    <img src="../img/home.png" alt="返回后台首页" /></a>

            </div>

            <div class="topIcon">

                <a title="退出登陆" href="../index.aspx">

                    <img src="../img/exit.png" alt="退出登陆" /></a>

            </div>

            <div class="topCloum">

            </div>

            <div class="topIcon" style="margin-left: 50px; margin-top: 20px;">

 

                <div class="line" style="height: 70px;">

                    <img src="../img/pic.png" />

                </div>

                <div class="line" style="height: 40px; text-align: left; color: white; font-weight: bold; line-height: 35px; text-indent: 10px; font-size: 18px;">

                    Admin

                </div>

            </div>

        </div>

    </div>

    <div id="center" class="center" style="background: url(../img/bookMain.png) 0 0 repeat;">

        <div id="lineForDataGrid" class="line">

            <table id="tt" style="width: 100%; height: 600px; $(this).width() * 0.2;">

            </table>

        </div>

    </div>

    <div id="bottom" class="bottom" style="background: url(../img/bookBottom.png) 0 0 no-repeat;">

        用户管理

    </div>

    <script type="text/javascript">

        $(function () {

            var vWindowHeight = document.body.scrollHeight;

            var vCenterHeight = vWindowHeight - 131 - 82;

            $("#center").height(vCenterHeight);

            var vMargionTop = (vCenterHeight - 360) / 2;

            $(".centerBook").css("margin-top", vMargionTop);

            fLoadTable();//加载参数

            $('#tt').datagrid('reload', {

                method: 'firstLoad'

            });

            //设置高度

            $("#lineForDataGrid").find(".panel").find(".datagrid-wrap").css("height", vCenterHeight + "px");

        })

 

 

对代码看不懂，建议下载附件来看。有完整代码。 

 

好了，本次经验分享到此结束，转载请保留原作者地址以及姓名，附件如果未能正常上传，请在评论中留下邮箱，我看到后会发给您。

（本人无偿分享经验，有偿接单制作APP（基于MUI，HTML5+Webservice）和中小型管理系统（基于EasyUI，asp.net，例如项目管理，中介管理，公司内部管理系统、农家乐系统等。），有需要可以联系我。）；

 

作者：南宫萧尘  

E-mail：314791147@qq.com

QQ：314791147

日期：2016-04-25