easyui自適應常見問題解決方法

原創

2018-09-04 08:43

1：比如在項目中用到了datagrid。如果界面比較簡單－－－只有一個datagrid只需要把它的屬性fit 設置爲true就能實現自動適應窗體。如果在datagrid上方還有其他div的話，datagrid就不能很好的自動適應窗體。如查datagrid有分頁控件，分頁控件就看不到了。這個時候就應該用 easyui-layout來分隔窗體來使具體的內容放在easyui-layout不同的部分。這樣就能很好的解決自適應問題。代碼如下：

<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標籤的easyui-layout當瀏覽器窗口大小改變時,easyui-layout可以根據窗口的大小來調整自己的大小.基於div標籤的easyui-layout如果想擁有上述功能必須設置easyui-layout的屬性fit等於true. 情形1：

<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：

<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時，下面兩種寫法是一樣的。即easyui控件的屬性可以寫在dataoptions屬性裏，也可以把這些屬性寫到標籤上。寫法1：

<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：

<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自適應常見問題解決方法

asp.net mvc中應用Grid++ Report (基本應用示例)

easyui datagrid綜合功能demo實現

UEditor 富文本向.net後臺傳值問題解決方案

管理的邏輯

EasyUI可拖拽功能（Draggable）選擇器的使用

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結