导航：首页 > 网络技术 >

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

发表于：2024-11-26 作者：热门IT资讯网编辑

编辑最后更新 2024年11月26日，在我自己的《Web开发框架》中，用了很多年的EasyUI，最新版本EasyUI为1.4.5，随着版本的更新，其很多功能得到了很大的完善和提高，同时也扩展了一些新的功能，以前在布局和对话框弹出层的自动适

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

1、Web主界面的布局调整

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

在上面的主页面布局代码里面，

data-options="fit:true,border:false"来设定布局的自动适应，这样在放大缩小页面的时候，布局总是能够自动适应页面的变化的。

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

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

表格的HTML代码如下所示。

而其中我们自动通过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 '' + val + '';                                         } else {                                                 return '' + val + '';                                         }                                 }                         },                         ....................................                ]],                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%'就可以了，不需要像以前那样需要自动宽度。