基于MVC+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" >
	<!-------------------------------搜索框----------------------------------->
	<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"   />
						</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"  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'" >
		<!-------------------------------搜索框----------------------------------->
		<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"  />
							</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>