基于MVC4+EasyUI的Web开发框架经验总结(17)--布局和对话框自动适应大小的处理-阿里云开发者社区

开发者社区> walb呀> 正文

基于MVC4+EasyUI的Web开发框架经验总结(17)--布局和对话框自动适应大小的处理

简介:
+关注继续查看

在我自己的《Web开发框架》中,用了很多年的EasyUI,最新版本EasyUI为1.4.5,随着版本的更新,其很多功能得到了很大的完善和提高,同时也扩展了一些新的功能,以前在布局和对话框弹出层的自动适应大小的问题,也在最近的一些版本得到了解决,本文在迁移到最新EasyUI版本的时候,总结了一些经验,希望对大家使用这个强大的Web界面组件有所帮助。

1、Web主界面的布局调整

上面的布局是顶部内容+一级菜单、左边菜单,右边主内容为页面内容,页面内容是变化的内容,其他部分为不变的,这样的布局代码如下所示。

<!DOCTYPE html>
<html>
<body style="overflow-y:hidden;" scroll="no">
    <div class="easyui-layout" data-options="fit:true,border:false">
            <!--顶部Banner-->
            <div region="north" id="header">
            
            </div>

            <!--左侧导航菜单-->
            <div region="west" split="true" title="导航菜单" style="width:200px;padding:1px;overflow:hidden;">
            
            </div>

            <!--主工作区-->
            <div id="mainPanle" region="center" title="" style="overflow:hidden;">
            
            </div>

            <!--底部版权标识-->
            <div data-options="region:'south',split:true" style="height: 40px;background: #D2E0F2;">
            
            </div>
            
    </div>
</body>

</html>

在上面的主页面布局代码里面,<div class="easyui-layout" 外面注意不要包含有Form的标志,否则会出现一些莫名其妙的错误。我们通过data-options="fit:true,border:false"来设定布局的自动适应,这样在放大缩小页面的时候,布局总是能够自动适应页面的变化的。

2、DataGrid表格的自动调整处理

在之前的一些版本里面,DataGrid总是没有能够自动实现宽度的自动调整,为了实现这种效果,还需要添加一些JS代码进行处理,这种方式在现在DataGrid支持宽度百分比的属性后,变得简单容易了。

表格的HTML代码如下所示。

            <!-------------------------------详细信息展示表格----------------------------------->
            <table id="grid" title="用户操作" data-options="iconCls:'icon-view'"></table>

而其中我们自动通过JQuery赋值的JS代码如下所示。

        //实现对DataGird控件的绑定操作
        function InitGrid(queryData) {
            $('#grid').datagrid({   //定位到Table标签,Table标签的ID是grid
                url: '/User/FindWithPager',   //指向后台的Action来获取当前用户的信息的Json格式的数据
                title: '系统用户信息',
                iconCls: 'icon-view',
                height: 650,
                width: '100%',
                nowrap: true,
                autoRowHeight: true,
                striped: true,
                collapsible: true,
                pagination: true,
                pageSize: 50,
                pageList: [50, 100, 200],
                rownumbers: true,
                //sortName: 'ID',    //根据某个字段给easyUI排序
                sortOrder: 'asc',
                remoteSort: false,
                //idField: 'ID', //不设置idField,翻页不会记录选择
                queryParams: queryData,  //异步查询的参数
                columns: [[
                    { field: 'ck', checkbox: true },   //选择
                     { title: 'ID', field: 'ID', width: 80, sortable: true },
                     { title: '用户编码', field: 'HandNo', width: 80, sortable: true },
                     { title: '用户名/登录名', field: 'Name', width: 120, sortable: true },
                     { title: '真实姓名', field: 'FullName', width: 80, sortable: true },
                     {
                         title: '是否过期', field: 'IsExpire', width: 80, formatter: function (val, rowdata, index) {
                             if (val) {
                                 return '<a class="grid_unvisible" href="javascript:void(0)" >' + val + '</a>';
                             } else {
                                 return '<a class="grid_visible" href="javascript:void(0)" >' + val + '</a>';
                             }
                         }
                     },
                     ....................................
                ]],
                onLoadSuccess: function () {
                    $(".grid_visible").linkbutton({ text: '可用', plain: true, iconCls: 'icon-ok' });
                    $(".grid_unvisible").linkbutton({ text: '过期', plain: true, iconCls: 'icon-stop' });

                    $(".grid_normal").linkbutton({ text: '正常', plain: true, iconCls: 'icon-ok' });
                    $(".grid_deleted").linkbutton({ text: '已删除', plain: true, iconCls: 'icon-stop' });
                },

                toolbar: [{
                    id: 'btnAdd',
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {
                        ShowAddDialog();//实现添加记录的页面
                    }
                }, '-', {
                    id: 'btnEdit',
                    text: '修改',
                    iconCls: 'icon-edit',
                    handler: function () {
                        ShowEditOrViewDialog();//实现修改记录的方法
                    }
                }, '-', {
                    id: 'btnDelete',
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler: function () {
                        Delete();//实现直接删除数据的方法
                    }
                }, '-', {
                    id: 'btnView',
                    text: '查看',
                    iconCls: 'icon-table',
                    handler: function () {
                        ShowEditOrViewDialog("view");//实现查看记录详细信息的方法
                    }
                }, '-', {
                    id: 'btnReload',
                    text: '刷新',
                    iconCls: 'icon-reload',
                    handler: function () {
                        //实现刷新栏目中的数据
                        $("#grid").datagrid("reload");
                    }
                }],
                onDblClickRow: function (rowIndex, rowData) {
                    $('#grid').datagrid('uncheckAll');
                    $('#grid').datagrid('checkRow', rowIndex);
                    ShowEditOrViewDialog();
                }
            });
        };

为了实现其自动伸缩,我们只需要设置 width: '100%'就可以了,不需要像以前那样需要自动宽度。

3、对话框的自动调整处理

在我们《Web开发框架》里面,利用DIV层作为界面的子窗口是一种很常见的处理方式,因此弹出的对话框层需要设定好其对应的自动缩放效果。

特别是由于不同的电脑设备上,笔记本和台式电脑的高度不同,还有分辨率不同,因此它们的宽度高度需要非常灵活的自动调整处理,实现我们界面的一致性。

以上界面我们通过样式的调整就可以实现对话框大小的变化,以及跟随整体布局的调整,总体居中的效果了。

    <!--------------------------添加信息的弹出层---------------------------->
    <div id="DivAdd" class="easyui-dialog" style="width:98%;max-width:824px;height:98%;max-height:300px;"
         closed="true" resizable="true" modal="true" data-options="iconCls: 'icon-add',buttons: '#dlg-buttons', onResize:function(){$(this).dialog('center');}">

   </div>

其中 style="width:98%;max-width:824px;height:98%;max-height:300px;" 确保了对话框不会太大变得难看,我们让它保持一个较好的大小。

其中 onResize:function(){$(this).dialog('center');} 让它在布局变化的时候自动把对话框居中,这样效果更加好看。

以上就是我们通常在实现布局和对话框自动适应大小所做的一些处理,能够很好的适应我们不同的设备分辨率。

本文转自博客园伍华聪的博客,原文链接:基于MVC4+EasyUI的Web开发框架经验总结(17)--布局和对话框自动适应大小的处理,如需转载请自行联系原博主。



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SharePoint自动化系列——Error features自动deactivate
转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ SharePoint Content Deployment prerequisite——Error features deactivate automation 对于Content Depl...
863 0
IntelliJ IDEA 设置代码提示或自动补全的快捷键
对于中国的Java开发者来说,可能使用Eclipse的人最多。 使用Idea的程序员也不少, 而且每个人都在鼓吹其好用之处。 试用半个月,感觉各有千秋,关键看熟练程度和配置是否好用。
1175 0
Android开发6——布局中的wrap_content和fill_parent以及match_parent
  一、言简意赅 fill_parent 是让控件宽或者高占全屏 wrap_content是让控件的高或宽仅仅把控件里的内容包裹住而不是全屏     二、分别来看  1 fill_parent 设置一个构件的布局为fill_parent将强制性地使构件扩展,以填充布局单元内尽可能多的空间。这跟Windows控件的dockstyle属性大体一致。设置一个顶部布局或控件为fil
1068 0
自动调整速率的Actor设计模式
问题背景 与数据库或者存储系统交互是所有应用软件都必不可少的功能之一,akka开发的系统也不例外。但akka特殊的地方在于,会尽可能的将所有的功能都设计成异步的,以避免Actor阻塞,然而无法避免IO这类的阻塞操作。
998 0
idea配置SpringBoot热部署之自动Build
一、pom.xml文件导入所需依赖文件 SpringBoot热部署插件 org.springframework.boot spring-boot-devtools true runtime 二、pom.xml文件build标签进行修改如下 该插件由Maven提供,它会自动使用当前运行mvn命令的JDK去编译Java源代码。
1066 0
+关注
1038
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载