昨天調試datagrid的頁面自適應，有些東西想要和大家分享一下。
自適應（ResponsiveWeb Design），我的簡單理解：是自動識別屏幕的寬度，然後自動調節。相瞭解更深，可以網上百度。
先來說datagrid的兩種佈局方式：
第一種：簡單的佈局
<span style="font-family:KaiTi_GB2312;font-size:12px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><!--整個頁面的佈局 -->
<body class="easyui-layout" fit="true">
<!--非表格信息的佈局 -->
<div class="easyui-panel" style="width: 100%; padding: 20px; ">
<div class="easyui-panel" style=" width: 100%; border:0px;">
課程：
<select id="loadCourse" name="loadCourse" class="combobox" align="left" style="width: 200px; height: 28px;outline:none;color:gray;text-align: center;" >
</select>
題型：
<select id="loadType" name=""loadType"" class="combobox" style="width: 200px; height: 28px;outline:none;color:gray;text-align: center;" >
</select>
<span align="right">
<input id="searchtxt" class="easyui-textbox" data-options="prompt:'請輸入題幹信息'" style="width: 300px; height:28px; " searcher="doSearch" />
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'" οnclick="doSearch1()" style="width: 80px;" >查詢</a>
</span>
</div>
</div>
<!-- 表格位置的信息佈局 -->
<div style="width: 100%; height: 90%;">
<!-- 第一部分：表格中的排列按鈕 -->
<div id="toolbar" width="50">
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-add" plain="true" οnclick="addQuestionMain();">添加</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-edit" plain="true" οnclick="updateDictWin();">修改</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-remove" plain="true" οnclick="deleteQuestionBank()">刪除</a>
</div>
<!-- 第二部分：表格的身體部分 -->
<div class="easyui-panel" fit="true">
<table id="dg" class="easyui-datagrid" fit="true" style="width: 100%; height: 450px" toolbar="#toolbar" pagination="true" fitColumns="true" rownumbers="true" data-options="onRowContextMenu:onRowContextMenu">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"/>
<th field="id" hidden="true"/>
<th field="questionContent" width="70%" align="center">題幹</th>
<th field="degree" formatter=formatDegree width="10px" align="center">難度等級</th>
<th field="score" style="width:10px;aglin:center;" align="center">分值</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- datagrid表格 右擊菜單 這是封裝好的 -->
<div id="menu" class="easyui-menu" style="width: 30px; display: none;">
<!--放置一個隱藏的菜單Div-->
<div data-options="iconCls:'icon-save'" οnclick="detail()">查看詳情</div>
</div>
</body></span></span>第二種佈局
代碼實現：
<span style="font-family:KaiTi_GB2312;font-size:12px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><!--ContentAreas是從頁面佈局的角度來說的 -->
<div id="ContentAreas" style="margin-top: 50px; display: block; width:100%;">
<!--表格佈局開始 -->
<div class="panel" style="display: block; width: 100%;">
<!--第一部分：表格的名字 -->
<div class="panel-header" style="width: 100%;">
<div class="panel-title">查詢結果</div>
<div class="panel-tool"></div>
</div>
<div class="easyui-panel panel-body" title="" fit="false"
style="" >
<!--第二部分：表格身體部分的按鈕 -->
<!-- style="width: 1366px; height: auto;" fit="true" -->
<div id="btnAreas" style="margin-bottom: 5px; margin-top: 10px;" >
<div id="buttons">
<a id="add" href="#" class="easyui-linkbutton l-btn l-btn-plain"
data-options=" plain:true, iconCls:' icon-add'"
οnclick="rightAdd()"><span class="l-btn-left">添加</span></a> <a
id="delete" href="#"
class="easyui-linkbutton l-btn l-btn-plain"
data-options=" plain:true, iconCls:' icon-remove'"
οnclick="rightDelete()"><span class="l-btn-left">刪除</span></a>
<a id="reload" href="#"
class="easyui-linkbutton l-btn l-btn-plain"
data-options=" plain:true, iconCls:' icon-reload'"
οnclick="editByID()"><span class="l-btn-left">複用</span></a>
</div>
</div>
<!--第三部分：表格的內容 -->
<div class="panel datagrid" style="width: 100%;">
<div class="datagrid-wrap panel-body panel-body-noheader"
title="" style="width: 100%; height: auto;" fit="true">
<div class="datagrid-view" style="width: 100%; height: auto;">
<!--style="width: 100%;" fit="true" -->
<table id="dg" class="easyui-datagrid" style="width: 100%;" fit="false"
data-options="rownumbers:true,fitColumns:true,singleSelect:false,plain:true,pagination:true,collapsible:true,url:'${pageContext.request.contextPath}/queryTempletInfo',pageSize:10,pageList:[5,10,15,20],onRowContextMenu: onContextMenu,method:'post'">
<thead style="width: 100%;">
<tr style="width: 100%;" >
<th width = "10%" data-options="field:'ck',checkbox:true"></th>
<th name="templetID" id="templetID"
data-options="field:'id'"
hidden="true">模板ID（不可見用來獲取模板ID）</th>
<th width = "20%"
data-options="field:'templateName',align:'center'">模板名稱</th>
<th width = "20%",
data-options="field:'hopeScores',align:'center'">期望分值</th>
<th width = "20%"
data-options="field:'difficultyRatioNumber',align:'center'">難度係數</th>
<th width = "20%" data-options="field:'score',align:'center'">總分</th>
<th width = "17%" data-options="field:'operator',align:'center'">操作人</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div></span></span>說一下在解決這個問題中：
①如果使用自適應，所有的寬度，必須都是百分比。在設置自適應的表格的時候，不僅僅是將表格進行百分比設置，同時還需要將表格的外面包括的div，進行設置。
②如果你發現了，你設置的寬度沒有起作用，可能在某個地方見樣式抽出來了，設置了固定的寬度。
三、自適應佈局：
引用：http://blog.163.com/jin_wangjia/blog/static/2904321620145198414922/
1：比如在項目中用到了datagrid。如果界面比較簡單－－－只有一個datagrid只需要把它的屬性fit 設置爲true就能實現自動適應窗體。如果在datagrid上方還有其他div的話，datagrid就不能很好的自動適應窗體。如查datagrid有分頁控件，分頁控件就看不到了。這個時候就應該用 easyui-layout來分隔窗體來使具體的內容放在easyui-layout不同的部分。這樣就能很好的解決自適應問題。
代碼如下：
<span style="font-family:KaiTi_GB2312;font-size:12px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><div class="easyui-layout"<span style="color:#ff6666;">data-options="fit:true"</span>>
<div data-options="region:'north'" style="height:100px">
<table id="part1"></table>
</div>
<div data-options="region:'center'">
<table id="part2"></table>
</div>
</div></span></span>2：基於body標籤的easyui-layout當瀏覽器窗口大小改變時,easyui-layout可以根據窗口的大小來調整自己的大小.基於div標籤的easyui-layout如果想擁有上述功能必須設置easyui-layout的屬性fit等於true.
情形1：
<span style="font-family:KaiTi_GB2312;font-size:12px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><span style="color:#ff6666;"><body class="easyui-layout"></span>
<div data-options="region:'north'" style="height:100px">
<table id="part1"></table>
</div>
<div data-options="region:'center'">
<table id="part2"></table>
</div>
</div></span></span><span style="font-family:KaiTi_GB2312;font-size:12px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><span style="color:#ff6666;"><div class="easyui-layout"data-options="fit:true"></span>
<div data-options="region:'north'" style="height:100px">
<table id="part1"></table>
</div>
<div data-options="region:'center'">
<table id="part2"></table>
</div>
</div></span></span>3：在html中定義easyui時，下面兩種寫法是一樣的。即easyui控件的屬性可以寫在dataoptions屬性裏，也可以把這些屬性寫到標籤上。
寫法1
<span style="font-family:KaiTi_GB2312;font-size:12px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"> <div class="easyui-layout"<span style="color:#ff6666;">data-options="fit:true"</span>>
<div <span style="color:#ff6666;">data-options="region:'north'"</span> style="height:100px">
<table id="part1"></table>
</div>
<div <span style="color:#ff6666;">data-options="region:'center'"</span>>
<table id="part2"></table>
</div>
</div></span></span><span style="font-family:KaiTi_GB2312;font-size:12px;"><div class="easyui-layout"<span style="color:#ff6666;">fit="true"</span>>
<div <span style="color:#ff6666;">region="north"</span>style="height:100px;">
<table id="part1"></table>
</div>
<div <span style="color:#ff6666;">region="center"</span>>
<table id="part2"></table>
</div>
</div> </span>這只是自己做的時候的，一些小感受，寫篇博客記錄下來。希望對大家有用。