基於MVC4+EasyUI的Web開發框架經驗總結（17）--佈局和對話框自動適應大小的處理

時間 2019-12-09

標籤基於 mvc4+easyui mvc easyui web 開發框架經驗總結佈局對話框自動適應大小處理欄目 HTML 简体版

原文原文鏈接

在我本身的《Web開發框架》中，用了不少年的EasyUI，最新版本EasyUI爲1.4.5，隨着版本的更新，其不少功能獲得了很大的完善和提升，同時也擴展了一些新的功能，之前在佈局和對話框彈出層的自動適應大小的問題，也在最近的一些版本獲得瞭解決，本文在遷移到最新EasyUI版本的時候，總結了一些經驗，但願對你們使用這個強大的Web界面組件有所幫助。javascript

一、Web主界面的佈局調整

上面的佈局是頂部內容+一級菜單、左邊菜單，右邊主內容爲頁面內容，頁面內容是變化的內容，其餘部分爲不變的，這樣的佈局代碼以下所示。html

<!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"來設定佈局的自動適應，這樣在放大縮小頁面的時候，佈局老是可以自動適應頁面的變化的。java

二、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%'就能夠了，不須要像之前那樣須要自動寬度。ui

三、對話框的自動調整處理

在咱們《Web開發框架》裏面，利用DIV層做爲界面的子窗口是一種很常見的處理方式，所以彈出的對話框層須要設定好其對應的自動縮放效果。this

特別是因爲不一樣的電腦設備上，筆記本和臺式電腦的高度不一樣，還有分辨率不一樣，所以它們的寬度高度須要很是靈活的自動調整處理，實現咱們界面的一致性。編碼

以上界面咱們經過樣式的調整就能夠實現對話框大小的變化，以及跟隨總體佈局的調整，整體居中的效果了。url

    <!--------------------------添加信息的彈出層---------------------------->
    <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>