（转）基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自动适应宽带高度...

http://www.cnblogs.com/wuhuacong/p/4085725.html

在默认情况下，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" οnclick="ShowImport()">导入</a><a href="javascript:void(0)" class="easyui-linkbutton" id="btnExport" iconcls="icon-excel" οnclick="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);});

上面的代码也只是根据效果进行了一些微调，基本和第一部分的设置宽度代码差不多。

也可以使用布局 class="easyui-layout" 进行调整，使DataGrid表格能够进行自动调整。

    <div class="easyui-layout" data-options="fit:true" id="tb"><div data-options="region:'north'" style="padding:5px;height:70px"><!-------------------------------搜索框-----------------------------------><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" οnclick="ShowImport()">导入</a><a href="javascript:void(0)" class="easyui-linkbutton" id="btnExport" iconcls="icon-excel" οnclick="ShowExport()">导出</a></td></tr></table></div></form></fieldset></div> <div data-options="region:'center'"><!-------------------------------详细信息展示表格-----------------------------------><table id="grid" title="用户操作" data-options="iconCls:'icon-view'" fit="true"></table></div></div>

转载于:https://www.cnblogs.com/telwanggs/p/7125963.html

（转）基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自动适应宽带高度...相关推荐

（转）基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用
http://www.cnblogs.com/wuhuacong/p/3317223.html 在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔,本篇继续介绍其中界面部分的 ...
基于MVC4+EasyUI的Web开发框架经验总结（8）--实现Office文档的预览
在博客园很多文章里面,曾经有一些介绍Office文档预览查看操作的,有些通过转为PDF进行查看,有些通过把它转换为Flash进行查看,但是过程都是曲线救国,真正能够简洁方便的实现Office文档的预览 ...
基于MVC4+EasyUI的Web开发框架经验总结（6）--在页面中应用下拉列表的处理
在很多Web界面中,我们都可以看到很多下拉列表的元素,有些是固定的,有些是动态的:有些是字典内容,有些是其他表里面的名称字段:有时候引用的是外键ID,有时候引用的是名称文本内容:正确快速使用下拉列表的 ...
基于MVC4+EasyUI的Web开发框架经验总结（11）--使用Bundles处理简化页面代码
基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码在Web开发的时候,我们很多时候,需要引用很多CSS文件.JS文件,随着使用更多的插件或者独立样式文件 ...
[转载]基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览
在博客园很多文章里面,曾经有一些介绍Office文档预览查看操作的,有些通过转为PDF进行查看,有些通过把它转换为Flash进行查看,但是过程都是曲线救国,真正能够简洁方便的实现Office文档的预览 ...
（转）基于MVC4+EasyUI的Web开发框架经验总结（8）--实现Office文档的预览
http://www.cnblogs.com/wuhuacong/p/3871991.html 基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览在博客园很多文章 ...
（转）基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式...
http://www.cnblogs.com/wuhuacong/p/4085682.html 在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交, ...
（转）基于MVC4+EasyUI的Web开发框架经验总结（10）--在Web界面上实现数据的导入和导出...
http://www.cnblogs.com/wuhuacong/p/3873498.html 数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,我曾经在 ...
（转）基于MVC4+EasyUI的Web开发框架经验总结（7）--实现省份、城市、行政区三者联动...
http://www.cnblogs.com/wuhuacong/p/3841338.html 为了提高客户体验和进行一些技术探索,现在正准备把我自己的客户关系管理系统CRM在做一个Web的版本,因此 ...

（转）基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自动适应宽带高度...

（转）基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自动适应宽带高度...相关推荐

最新文章

热门文章