首页 > 代码库 > 基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自动适应宽带高度
基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自动适应宽带高度
在默认情况下，EasyUI的DataGrid好像都没有具备自动宽度的适应功能，一般是指定像素宽度的，但是使用的人员计算机的屏幕分辨率可能不一样，因此导致有些地方显示太大或者太小，总是不能达到好的预期效果，如果DataGrid能够根据窗口尺寸进行伸缩，效果应该好很多。本文主要介绍DataGrid控件实现自动适应宽带高度的操作。
首先我们需要定义一个resizeDataGrid的扩展函数，方便在页面里面进行调用，扩展函数定义如下所示。
//datagrid宽度高度自动调整的函数$.fn.extend({ resizeDataGrid: function (heightMargin, widthMargin, minHeight, minWidth) { var height = $(document.body).height() - heightMargin; var width = $(document.body).width() - widthMargin; height = height < minHeight ? minHeight : height; width = width < minWidth ? minWidth : width; $(this).datagrid(‘resize‘, { height: height, width: width }); }});
定义好上面的函数后，我们就可以在页面里面使用Javascript进行调用，调用方法如下所示：$(‘#grid‘).resizeDataGrid。
var heightMargin = $("#toolbar").height() + 60; var widthMargin = $(document.body).width() - $("#tb").width(); // 第一次加载时和当窗口大小发生变化时，自动变化大小 $(‘#grid‘).resizeDataGrid(heightMargin, widthMargin, 0, 0); $(window).resize(function () { $(‘#grid‘).resizeDataGrid(heightMargin, widthMargin, 0, 0); });
通过上面的代码，我们就可以定义两个高度、宽度的边界，但是这些我们不应该固定化，应该通过一些界面代码的对象动态获取边框大小。
HTML代码如下所示。
<div id="tb" style="padding:5px;height:auto"> <!-------------------------------搜索框-----------------------------------> <fieldset> <legend>信息查询</legend> <form id="ffSearch" method="post"> <div id="toolbar"> <table cellspacing="0" cellpadding="0"> <tr> <th> <label for="txtProvinceName">省份名称：</label> </th> <td> <input type="text" ID="txtProvinceName" name="txtProvinceName" style="width:100px" /> </td> <td colspan="2"> <a href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘" id="btnSearch">查询</a> <a href="javascript:void(0)" class="easyui-linkbutton" id="btnImport" iconcls="icon-excel" onclick="ShowImport()">导入</a> <a href="javascript:void(0)" class="easyui-linkbutton" id="btnExport" iconcls="icon-excel" onclick="ShowExport()">导出</a> </td> </tr> </table> </div> </form> </fieldset> <!-------------------------------详细信息展示表格-----------------------------------> <table id="grid" style="width: 940px" title="用户操作" data-options="iconCls:‘icon-view‘"> </table> </div>
这个界面效果如下所示。
其他类似的界面类似效果如下所示。
对比上面的界面，下面的界面增加了左边一个面板，这里的代码也不需要特殊的设置。
var heightMargin = $("#toolbar").height() + 40; var widthMargin = $(document.body).width() - $("#tb").width() + 20; // 第一次加载时和当窗口大小发生变化时，自动变化大小 $(‘#grid‘).resizeDataGrid(heightMargin, widthMargin, 0, 0); $(window).resize(function () { $(‘#grid‘).resizeDataGrid(heightMargin, widthMargin, 0, 0); });
上面的代码也只是根据效果进行了一些微调，基本和第一部分的设置宽度代码差不多。
基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自动适应宽带高度
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。