快捷導(dǎo)航

EasyUI布局高度自適應(yīng)

更新時(shí)間：2016年06月04日 17:37:48 作者：jin_wangjia

這篇文章主要介紹EasyUI高度自適應(yīng)的問題,比較實(shí)用，需要的朋友可以參考下。

最近在把以前寫的一個(gè)項(xiàng)目改成用easyui做前端。過程中遇到了不少問題。其中一個(gè)就是datagrid不能很好的布局。想了好多辦法都有局限。最后想到會(huì)不會(huì)是布局的問題，經(jīng)過實(shí)踐，最后問題解決。

1：比如在項(xiàng)目中用到了datagrid。如果界面比較簡(jiǎn)單－－－只有一個(gè)datagrid只需要把它的屬性fit 設(shè)置為true就能實(shí)現(xiàn)自動(dòng)適應(yīng)窗體。如果在datagrid上方還有其他div的話，datagrid就不能很好的自動(dòng)適應(yīng)窗體。如查datagrid有分頁控件，分頁控件就看不到了。這個(gè)時(shí)候就應(yīng)該用 easyui-layout來分隔窗體來使具體的內(nèi)容放在easyui-layout不同的部分。這樣就能很好的解決自適應(yīng)問題。

代碼如下：

復(fù)制代碼代碼如下:

<div class="easyui-layout"data-options="fit:true">

    <div data-options="region:'north'" style="height:100px">

        <table id="part1"></table>

    </div>

    <div data-options="region:'center'">

        <table id="part2"></table>

    </div>

</div>

2：基于body標(biāo)簽的easyui-layout當(dāng)瀏覽器窗口大小改變時(shí),easyui-layout可以根據(jù)窗口的大小來調(diào)整自己的大小.基于div標(biāo)簽的easyui-layout如果想擁有上述功能必須設(shè)置easyui-layout的屬性fit等于true.

情形1：

復(fù)制代碼代碼如下:

<body class="easyui-layout">

    <div data-options="region:'north'" style="height:100px">

        <table id="part1"></table>

    </div>

    <div data-options="region:'center'">

        <table id="part2"></table>

    </div>

</div>

情形2：

復(fù)制代碼代碼如下:

<div class="easyui-layout"data-options="fit:true">

    <div data-options="region:'north'" style="height:100px">

        <table id="part1"></table>

    </div>

    <div data-options="region:'center'">

        <table id="part2"></table>

    </div>

</div>

3：在html中定義easyui時(shí)，下面兩種寫法是一樣的。即easyui控件的屬性可以寫在dataoptions屬性里，也可以把這些屬性寫到標(biāo)簽上。

寫法1：

復(fù)制代碼代碼如下:

<div class="easyui-layout"data-options="fit:true">

    <div data-options="region:'north'" style="height:100px">

        <table id="part1"></table>

    </div>

    <div data-options="region:'center'">

        <table id="part2"></table>

    </div>

</div>

寫法2：

復(fù)制代碼代碼如下:

<div class="easyui-layout"fit="true">

 <div region="north"style="height:100px;">

  <table id="part1"></table>

 </div>

 <div region="center">

            <table id="part2"></table>

 </div>

</div>

以上就是EasyUI高度自適應(yīng)的全部?jī)?nèi)容，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: