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

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

也可以使用布局 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开发框架的系列文章:

基于MVC4+EasyUI的Web开发框架形成之旅--总体介绍

基于MVC4+EasyUI的Web开发框架形成之旅--MVC控制器的设计

基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用

基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

基于MVC4+EasyUI的Web开发框架形成之旅--框架总体界面介绍

基于MVC4+EasyUI的Web开发框架形成之旅--基类控制器CRUD的操作

基于MVC4+EasyUI的Web开发框架形成之旅--权限控制

基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

基于MVC4+EasyUI的Web开发框架经验总结(3)- 使用Json实体类构建菜单数据

基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

基于MVC4+EasyUI的Web开发框架经验总结(5)--使用HTML编辑控件CKEditor和CKFinder

基于MVC4+EasyUI的Web开发框架经验总结(6)--在页面中应用下拉列表的处理

基于MVC4+EasyUI的Web开发框架经验总结(7)--实现省份、城市、行政区三者联动

基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览

基于MVC4+EasyUI的Web开发框架经验总结(9)--在Datagrid里面实现外键字段的转义操作

基于MVC4+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出

基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码

基于MVC4+EasyUI的Web开发框架经验总结(12)--利用Jquery处理数据交互的几种方式

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

基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作

本文转自博客园伍华聪的博客,原文链接:基于MVC4+EasyUI的Web开发框架经验总结(13)--DataGrid控件实现自动适应宽带高度,如需转载请自行联系原博主。



目录
相关文章
|
16天前
|
开发框架 中间件 PHP
Laravel框架:优雅构建PHP Web应用的秘诀
**Laravel 框架简介:** Laravel是PHP的优雅Web开发框架,以其简洁语法、强大功能和良好开发者体验闻名。它强调代码的可读性和可维护性,加速复杂应用的构建。基础步骤包括安装PHP和Composer,然后运行`composer create-project`创建新项目。Laravel的路由、控制器和Blade模板引擎简化了HTTP请求处理和视图创建。模型和数据库迁移通过Eloquent ORM使数据库操作直观。Artisan命令行工具、队列、事件和认证系统进一步增强了其功能。【6月更文挑战第26天】
18 1
|
4天前
|
存储 JavaScript 前端开发
WEB三大主流框架之Angular
WEB三大主流框架之Angular
|
4天前
|
存储 JavaScript 前端开发
WEB三大主流框架之Vue.js
WEB三大主流框架之Vue.js
|
4天前
|
XML 前端开发 JavaScript
WEB三大主流框架之React
WEB三大主流框架之React
|
11天前
|
存储 JavaScript 安全
深入理解与应用:在Web框架中高效管理环境变量
【7月更文挑战第3天】本文阐述了在Web开发中使用环境变量的重要性,如增强安全性和灵活性,并以Django、Flask和Express为例展示了如何管理这些变量。通过`os.environ`或特定库,开发者可以从环境中读取配置,避免敏感信息硬编码。最佳实践包括最小权限、加密、默认值、文档化和环境隔离,确保项目安全和易维护。
35 0
|
16天前
|
移动开发 开发框架 JavaScript
技术心得记录:手机Web开发框架
技术心得记录:手机Web开发框架
19 0

热门文章

最新文章