EasyUI datagrid自適應問題解決

在使用js 動態創建EasyUI datagrid時，如果設置fit為true，在顯示的時候數據的高度為固定高度不能自適應

解決辦法是把fit設為false。

但這樣設置后又有個問題，如果把columns定義在js里面，及時寬度設置為百分百，單元格的寬度不能隨着瀏覽器的大小而變化

解決辦法是把columns定義在頁面html里。

最后的代碼如下：

html代碼

<table id="grid" title="考勤數據" style="width:100%;height:auto">
      <thead>
           <tr>
               <th field="GUID" hidden="hidden">ID</th>
               <th field="EmpName" width="20%">姓名</th>
               <th field="KqDate" width="20%">日期</th>
               <th field="KqTime" width="20%">時間</th>
               <th field="IsInvalid" width="16%">是否有效</th>
               <th field="Remark" width="20%">備注</th>
           </tr>
      </thead>
</table>

js代碼

 $('#grid').datagrid({
        url: '/Checking/GetAll?r=' + Math.random(), //數據接收URL地址
        iconCls: 'icon-view', //圖標
        fit: false, //自動適屏功能
        nowrap: true,
        autoRowHeight: false, //自動行高
        autoRowWidth: true,
        striped: true,
        collapsible: false,
        remoteSort: true,
        idField: 'GUID', //主鍵值
        pagination: true, //啟用分頁
        rownumbers: true, //顯示行號
        multiSort: true, //啟用排序
        sortable: true, //啟用排序列
        fitcolumns: true,
        queryParams: $("#searchform").form2json(), //搜索條件查詢
        singleSelect: true,
        /*columns: [[
            { field: 'GUID', hidden: true },
            { field: 'EmpName', title: '姓名', width: '20%', sortable: true },
            { field: 'KqDate', title: '日期', width: '20%', sortable: true },
            { field: 'KqTime', title: '時間', width: '20%', sortable: true },
            { field: 'IsInvalid', title: '有效否', width: '16%', sortable: true },
            { field: 'Remark', title: '備注', width: '20%' }
        ]],*/
        toolbar: '#divtoolbar'
    });
}