在預設情況下，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開發框架的系列文章：