(转)基于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" 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);
});

上面的代码也只是根据效果进行了一些微调,基本和第一部分的设置宽度代码差不多。
也可以使用布局 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" 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>
</div>
<div data-options="region:'center'">
<!-------------------------------详细信息展示表格----------------------------------->
<table id="grid" title="用户操作" data-options="iconCls:'icon-view'" fit="true"></table>
</div>
</div>



(转)基于MVC4+EasyUI的Web开发框架经验总结(13)--DataGrid控件实现自动适应宽带高度的更多相关文章
- 基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用
在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔,本篇继续介绍其中界面部分的一些使用知识,包括控件的赋值.取值.清空,以及相关的使用. 我们知道,一般Web界面包括的界面控 ...
- 转--基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用
原文 http://www.cnblogs.com/wuhuacong/p/3317223.html 基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用 在前面介绍了两篇关于我的基 ...
- (转)基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用
原文地址:http://www.cnblogs.com/wuhuacong/p/3317223.html 在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔,本篇继续介绍其中 ...
- 基于MVC4+EasyUI的Web开发框架经验总结
http://www.cnblogs.com/wuhuacong/p/4093778.html 在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图 标,从而是Web系统 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作
在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(13)--DataGrid控件实现自动适应宽带高度
在默认情况下,EasyUI的DataGrid好像都没有具备自动宽度的适应功能,一般是指定像素宽度的,但是使用的人员计算机的屏幕分辨率可能不一样,因此导致有些地方显示太大或者太小,总是不能达到好的预期效 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(12)--利用Jquery处理数据交互的几种方式
在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理.本文主要介绍利用Jquery处理数据交互的几种方式,包括 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码
在Web开发的时候,我们很多时候,需要引用很多CSS文件.JS文件,随着使用更多的插件或者独立样式文件,可能我们的Web界面代码会越来越臃肿,看起来也很累赘,在MVC里面提供了一个Bundle的对象, ...
- 基于MVC4+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出
数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,我曾经在之前的一篇文章<Winform开发框架之通用数据导入导出操作>介绍了在Winform ...
- 基于MVC4+EasyUI的Web开发框架经验总结(9)--在Datagrid里面实现外键字段的转义操作
我们在使用EasyUI的时候,很多情况下需要使用到表格控件datagrid,这个控件控件非常强大,使用起来很简洁,但是我在使用中,发现对于一个表里面的外键字段进行转义,并显示引用表的一些名称的操作,却 ...
随机推荐
- Android RecyclerViewSwipeDismiss:水平、垂直方向的拖曳删除item
Android RecyclerViewSwipeDismiss:水平.垂直方向的拖曳删除item RecyclerViewSwipeDismiss是一种支持RecyclerView的水平.垂直 ...
- (38)Spring Boot分布式Session状态保存Redis【从零开始学Spring Boot】
[本文章是否对你有用以及是否有好的建议,请留言] 在使用spring boot做负载均衡的时候,多个app之间的session要保持一致,这样负载到不同的app时候,在一个app登录之后,而访问到另外 ...
- .Net操作Excel —— NPOI
近期的两个项目都有关于NPOI的功能,经过了一点学习,自己也摸索了一会,感觉还有点意思.现在将部分代码分享一下.一部分是C#代码,一部分是VB.Net的,懒得修改了,基本上都是从项目文件中copy出来 ...
- noip模拟赛 浮游大陆的68号岛
题目描述 妖精仓库里生活着黄金妖精们,她们过着快乐,却随时准备着迎接死亡的生活. 换用更高尚的说法,是随时准备着为这个无药可救的世界献身. 然而孩子们的生活却总是无忧无虑的,幼体的黄金妖精们过着天真烂 ...
- NandFlash、NorFlash、DataFlash
1. NandFlash和NorFlash Flash存储芯片,俗称闪存,因其具有非易失性.可擦除性.可重复编程及高密度.低功耗等特点,广泛地应用于手机.数码相机.笔记本电脑等产品. ...
- django book chapter 2
Django’s optional GIS (Geographic Information Systems) support requires Python 2.5 to 2.7. 这里提到了djan ...
- iOS分组通讯录效果+側滑菜单(MMDrawerController)
前言的废话-能够忽略 自从学会了使用Cocoapod,就欲罢不能了!由于太简单太赞了,不用再把源代码粘到project里了! 參见戴维营博客中的解说:Cocoapod 安装以及使用 先上一下效果图,请 ...
- Linux/CentOS各种服务框架的搭建完整流程
在2012年的时候,由于要照应新人对Linux以及相关服务的了解和学习,我特地把当时我们创业项目的全部服务搭建过程写成了一篇文档,能够让他们学习而且有所參照. 以下就以这篇文档为底稿,进行一些改动和敏 ...
- hibernate实战笔记1---初探
因为在学习Spring的时候学到有关数据库的章节的时候,提及到了hibernate的集成,可是我对hibernate技术差点儿是一点不了解.仅仅是知道它是一个orm对象映射框架,所以在初探的章节做一下 ...
- Codeforces--630D--Hexagons(规律)
D - Hexagons! Crawling in process... Crawling failed Time Limit:500MS Memory Limit:65536KB ...