easyui-layout佈局高度自適應

qq_23944441發表於2018-04-02
UI

動態載入datagrid資料

$("#dg_center").datagrid({
                url: ''/AJAX/EasyUiListComm.ashx',
                fit: true, //datagrid高度是否自適應
                nowrap: true, //是否只顯示一行，即文字過多是否省略部分
                striped: true,
                border: false,
                pagination: true,
                pageSize: 20,
                pageList: [20, 30, 40, 50, 100, 500],
                pageNumber: 1,
                checkOnSelect: false,
                selectOnCheck: false,
                singleSelect: true,
                rownumbers: false,
                idField: 'Id',
                columns: [[
                    { checkbox: true, field: 'Id', },

                    { title: '標題', field: 'Title', sortable: true, width: 200 },

                ]],

});


如果layout佈局中加入了form標籤，則需在樣式中寫入一個固定高度，否則頁面上將顯示不出來

<form id="form1" runat="server">

        <div class="easyui-layout" id="cc"  style="height:200px;" >
            <div data-options="region:'center',title:'資訊列表',split:false">

                <div id="dg_center" toolbar="#tb_center">

                </div>
                <div id="tb_center">
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="Add()">新增</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="Edit()">編輯</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="Delete()">刪除</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-reload" plain="true" onclick="Refresh()">重新整理</a>
                </div>

            </div>

        </div>
    </form>

   最終效果如圖：


大家實踐後可以看到這樣佈局下來的高度不能自動將頁面填滿，而且高度固定後當內容再繼續增加時會有滾動條出現，並不能達到美觀的效果。再此基礎上我們再新增屬性data-options="fit:true"，瀏覽器寬度變化時，datagrid的寬度能夠自動變化新增屬性

<div class="easyui-layout" id="cc"  style="height:200px;"  data-options="fit:true"></div>

 

如果去掉form標籤後，只需加上屬性data-options="fit:true" 即可使datagrid的寬高自動根據瀏覽器大小填滿，並且，加上屬性border:false可以完全填滿

        <div class="easyui-layout" id="cc"   data-options="fit:true,border:false">

            <div data-options="region:'center',title:'資訊列表',split:false">

                <div id="dg_center" toolbar="#tb_center">

                </div>
                <div id="tb_center">
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="Add()">新增</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="Edit()">編輯</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="Delete()">刪除</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-reload" plain="true" onclick="Refresh()">重新整理</a>
                </div>

            </div>

        </div>

   效果如圖：

相關文章